Turf.js—讓你在瀏覽器上實現地理分析

這是我參與更文挑戰的第1天，活動詳情查看： 更文挑戰。

前言

咱們在地圖相關係統中必不可少的就是空間分析操做相關需求，例如緩衝區、計算等高線等。憑藉簡單的js咱們沒法將點線面進行結合分析，而Turf.js的出現幫咱們解決了這一難題，讓咱們在瀏覽器中也能夠輕鬆的使用之前只屬於桌面GIS的分析功能。

Turf.js簡介及其意義

Turf.js是MapBox公司研發的基於瀏覽器端的空間分析庫，它使用JavaScript進行編寫，經過npm進行包管理。值得一提的是，良好的模塊化設計使其不只可以做用於瀏覽器端、還可經過Node.js在服務端使用。Turf 原生支持 GeoJSON 矢量數據。GeoJSON 的優勢是結構簡單，而且獲得了全部網頁地圖API的支持；但 GeoJSON 不支持空間索引，這個缺點可能會限制 Turf 處理大型文件的能力效率。其適用於輕量級（數據輕量而非功能輕量）的WebGIS應用。

瀏覽器端支持空間分析的意義在於，經過網頁地圖的不只可提供地名搜索與路徑查詢（目前 Google Maps 的功能其實與十年前並無太大區別），並且能夠在瀏覽器中分享空間分析模型。之前的 WebGIS 功能固然也支持空間分析，可是分析過程須要在服務器端進行，本地可以進行的設置有限，如今使用 Turf.js 能夠將分析過程徹底移到本地，若是頁面中提供了參數設置的話，能夠在本地對模型進行修改並當即看到分析結果。這樣的直接好處有兩個方面：更渲的數據展現，以及更加複雜的用戶交互（複雜交互自己須要空間分析做爲基礎）。

安裝

引入所有功能

// 下載
$ npm install @turf/turf
複製代碼

// 引入
import * as turf from '@turf/turf'
import { lineString, along } from '@turf/turf'
複製代碼

若是想引用指定模塊，能夠下載功能名稱對應的npm包（功能名稱對應其包的名稱）

$ npm install @turf/collect
複製代碼

import collect from '@turf/collect';
複製代碼

功能

Turf 有着質量極高的官方文檔，詳細介紹了每一個功能模塊的使用，並有在線示例能夠直接上手試用。

Turf的功能分爲幾大類，咱們列舉幾個經常使用類並抽出一兩個經常使用方法作展現。

MEASUREMENT

area（計算區域面積）

獲取一個或多個feature，並返回其面積平方米。

參數

參數	類型	描述
geojson	GeoJSON	input GeoJSON feature(s)

返回

number - area in square meters

示例

var polygon = turf.polygon([[
        [108.09876, 37.200787],
        [106.398901, 33.648651],
        [114.972103, 33.340483],
        [113.715685, 37.845557],
        [108.09876, 37.200787]
      ]]);

var area = turf.area(polygon);
複製代碼

npm install @turf/area

centerOfMass（計算多邊形質心）

取任何Feature或FeatureCollection，並利用這個公式返回其質心:多邊形質心。

參數

參數	類型	描述
geojson	GeoJSON	GeoJSON to be centered
properties	Object	an Object that is used as the Feature 's properties

返回

Feature - the center of mass

示例

var polygon = turf.polygon([[[-81, 41], [-88, 36], [-84, 31], [-80, 33], [-77, 39], [-81, 41]]]);

var center = turf.centerOfMass(polygon);
複製代碼

npm install @turf/center-of-mass

TRANSFORMATION

buffer（計算緩衝區）

爲給定半徑的Feature計算一個緩衝區。支持的單位是英里、千米和度數。

參數

參數	類型	描述
geojson	(FeatureCollection|Geometry|Feature )	input to be buffered
radius	number	distance to draw the buffer (negative values are allowed)
options	Object	Optional parameters: see below

options選項

屬性	類型	默認值	描述
units	string	kilometers	any of the options supported by turf units
steps	number	64	number of steps

返回

(FeatureCollection|Feature <(Polygon|MultiPolygon)>|undefined) - buffered features

示例

var point = turf.point([-90.548630, 14.616599]);
var buffered = turf.buffer(point, 500, {units: 'miles'});
複製代碼

npm install @turf/buffer

transformTranslate（平移）

在給定的方向角上沿沿恆向線移動指定距離的任何geojsonFeature或幾何圖形。

參數

參數	類型	描述
geojson	GeoJSON	object to be translated
distance	number	length of the motion; negative values determine motion in opposite direction
direction	number	of the motion; angle from North in decimal degrees, positive clockwise
options	Object	Optional parameters: see below

options選項

屬性	類型	默認值	描述
units	string	kilometers	in which
zTranslation	number	0	length of the vertical motion, same unit of distance
mutate	boolean	false	allows GeoJSON input to be mutated (significant performance increase if true)

返回

GeoJSON - the translated GeoJSON object

示例

var poly = turf.polygon([[[0,29],[3.5,29],[2.5,32],[0,29]]]);
var translatedPoly = turf.transformTranslate(poly, 100, 35);
複製代碼

npm install @turf/transform-translate

MISC

lineIntersect（計算兩端線段相交點）

獲取任何LineString或PolygonGeoJSON，並返回相交點。

參數

參數	類型	描述
line1	(Geometry|FeatureCollection|Feature <(LineString|MultiLineString|Polygon|MultiPolygon)>)	any LineString or Polygon
line2	(Geometry|FeatureCollection|Feature <(LineString|MultiLineString|Polygon|MultiPolygon)>)	any LineString or Polygon

返回

FeatureCollection - point(s) that intersect both

示例

var line1 = turf.lineString([[126, -11], [129, -21]]);var line2 = turf.lineString([[123, -18], [131, -14]]);var intersects = turf.lineIntersect(line1, line2);
複製代碼

npm install @turf/line-intersect

mask(返回非遮罩多邊形)

獲取任意類型的多邊形和一個可選的遮罩，並返回一個帶孔的多邊形外部環。

參數

參數	類型	描述
polygon	(FeatureCollection|Feature <(Polygon|MultiPolygon)>)	GeoJSON Polygon used as interior rings or holes.
mask	(Feature )	GeoJSON Polygon used as the exterior ring (if undefined, the world extent is used)

返回

Feature - Masked Polygon (exterior ring with holes).

示例

var polygon = turf.polygon([[[112, -21], [116, -36], [146, -39], [153, -24], [133, -10], [112, -21]]]);var mask = turf.polygon([[[90, -55], [170, -55], [170, 10], [90, 10], [90, -55]]]);var masked = turf.mask(polygon, mask);
複製代碼

npm install @turf/mask

JOINS

pointsWithinPolygon（返回在多邊形內的點）

找到落在(多個)多邊形內的點。

參數

參數	類型	描述
points	(Feauture|FeatureCollection )	Points as input search
polygons	(FeatureCollection|Geometry|Feature <(Polygon|MultiPolygon)>)	Points must be within these (Multi)Polygon(s)

返回

FeatureCollection - points that land within at least one polygon

示例

var points = turf.points([    [-46.6318, -23.5523],    [-46.6246, -23.5325],    [-46.6062, -23.5513],    [-46.663, -23.554],    [-46.643, -23.557]]);var searchWithin = turf.polygon([[    [-46.653,-23.543],    [-46.634,-23.5346],    [-46.613,-23.543],    [-46.614,-23.559],    [-46.631,-23.567],    [-46.653,-23.560],    [-46.653,-23.543]]]);var ptsWithin = turf.pointsWithinPolygon(points, searchWithin);
複製代碼

npm install @turf/points-within-polygon

BOOLEANS

booleanPointInPolygon（判斷點是否在多邊形內）

取一個點和一個多邊形或多多邊形，並肯定該點是否位於該多邊形內。多邊形能夠是凸的，也能夠是凹的。

> npm install @turf/boolean-point-in-polygon
複製代碼

參數

參數	類型	描述
point	Coord	input point
polygon	Feature <(Polygon|MultiPolygon)>	input polygon or multipolygon
options	Object	Optional parameters: see below

options選項

屬性	類型	默認值	描述
ignoreBoundary	boolean	false	True if polygon boundary should be ignored when determining if the point is inside the polygon otherwise false.

返回

boolean - true if the Point is inside the Polygon; false if the Point is not inside the Polygon

示例

var pt = turf.point([-77, 44]);var poly = turf.polygon([[  [-81, 41],  [-81, 47],  [-72, 47],  [-72, 41],  [-81, 41]]]);turf.booleanPointInPolygon(pt, poly);//= true
複製代碼

附錄

• 官方文檔

• Turf.js中文網

• Turf: GIS for web maps （這個網頁裏有 mapbox.com 基於 Turf 開發的精美地圖……的截圖）