mapbox-gl能够方便地显示地图,做一些交互,但是缺少空间分析功能,比如绘制缓冲区、判断点和面相交等等。
turf.js是一个丰富的用于浏览器和node.js空间分析库,官网 ,非常适合于mapbox-gl开发,不仅mapbox-gl里面推荐的空间分析插件有turf,而且turf.js官网的示例均基于mapbox实现。
下面就开始turf之旅了。
1. 先介绍几个功能介绍
1.1 测量相关MEASUREMENT
如面积(area)、长度(length)、中心(center)、包络线(envelope)
1.2 转换相关TRANSFORMATION
缓冲区buffer、绘制圆circle
1.3 判断相关
判断点是否在多边形内booleanPointInPolygon
2. 安装
普通script标签引入方式,
1 2
npm方式,可以按照以下方式引入
1 import buffer from '@turf/buffer' // 按需引用2 import area from '@turf/area'3 import {point, circle, bboxPolygon, booleanPointInPolygon} from '@turf/turf' // 一次引入多个4 import * as turf from '@turf/turf' // 一次性引入
使用前需要先安装,
// 部分安装npm install @turf/area @turf/buffer // 全部安装npm install @turf/turf
3. 示例
一个简单的应用库,绘制点和面,判断点是否在面内,当然显示还是需要mapbo-gl配合。
1 import {point, circle, bboxPolygon, booleanPointInPolygon} from '@turf/turf' 2 export default { 3 createCircle (center, radius, points) { // 创建圆geojson 4 let res = circle(center, radius / 1000.0, {steps: points || 100, units: 'kilometers'}) 5 return res 6 }, 7 createPoint (location, properties) { // 创建点geojson 8 let res = point(location, properties) 9 return res10 },11 inArea (lngLat, bbox) { // 判断点[lng, Lat]是否在面内,bbox为[minX, minY, maxX, maxY]12 let res = booleanPointInPolygon(point(lngLat), bboxPolygon(bbox))13 return res14 }15 }
希望能给想用turf.js的同学一点引入的作用,欢迎留言交流?