mapbox-gl空间分析插件turf.js使用介绍

mapbox-gl可以方便地显示地图，作一些交互，可是缺乏空间分析功能，好比绘制缓冲区、判断点和面相交等等。

turf.js是一个丰富的用于浏览器和node.js空间分析库，官网 http://turfjs.org/ ，很是适合于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

 判断是否包含booleanContains

turf的功能至关丰富，用到时查文档吧

2. 安装

普通script标签引入方式， 

1 <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
2 <script>
3      var point = turf.point([119.625, 39.984]);
4 </script>

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 res
10   },
11   inArea (lngLat, bbox) { // 判断点[lng, Lat]是否在面内，bbox为[minX, minY, maxX, maxY]
12     let res = booleanPointInPolygon(point(lngLat), bboxPolygon(bbox))
13     return res
14   }
15 }

但愿能给想用turf.js的同窗一点引入的做用，欢迎留言交流🎈