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標簽引入方式， 

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

npm方式，可以按照以下方式引入

import buffer from '@turf/buffer' // 按需引用
import area from '@turf/area'
import {point, circle, bboxPolygon, booleanPointInPolygon} from '@turf/turf' // 一次引入多個
import * as turf from '@turf/turf' // 一次性引入

使用前需要先安裝，

// 部分安裝
npm install @turf/area @turf/buffer 
// 全部安裝
npm install @turf/turf

3. 示例

一個簡單的應用庫，繪制點和面，判斷點是否在面內，當然顯示還是需要mapbo-gl配合。

import {point, circle, bboxPolygon, booleanPointInPolygon} from '@turf/turf'
export default {
  createCircle (center, radius, points) { // 創建圓geojson
    let res = circle(center, radius / 1000.0, {steps: points || 100, units: 'kilometers'})
    return res
  },
  createPoint (location, properties) { // 創建點geojson
    let res = point(location, properties)
    return res
  },
  inArea (lngLat, bbox) { // 判斷點[lng, Lat]是否在面內，bbox為[minX, minY, maxX, maxY]
    let res = booleanPointInPolygon(point(lngLat), bboxPolygon(bbox))
    return res
  }
}

希望能給想用turf.js的同學一點引入的作用，歡迎留言交流🎈