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的同窗一點引入的做用，歡迎留言交流🎈