Turf.js簡介


本文轉自 Turf.js—讓你在瀏覽器上實現地理分析 請支持原創!

前言

我們在地圖相關系統中必不可少的就是空間分析操作相關需求,例如緩沖區、計算等高線等。憑借簡單的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

pic_97fa3104.png

centerOfMass(計算多邊形質心)

取任何FeatureFeatureCollection,並利用這個公式返回其質心:多邊形質心。

參數

參數 類型 描述
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

pic_28f6793f.png

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

pic_5f8ebe02.png

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

pic_a9e4fac7.png

MISC

lineIntersect(計算兩端線段相交點)

獲取任何LineStringPolygonGeoJSON,並返回相交點。

參數

參數 類型 描述
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

pic_05bbfe0b.png

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

pic_68305d47.png

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

pic_7aa6c7b4.png

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

附錄


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM