Turf.js—让你在浏览器上实现地理分析

发布时间 2023-10-22 01:48:57作者: 漫思

Turf.js—让你在浏览器上实现地理分析

2021-06-015,110阅读5分钟
 
专栏: 
GIS与前端
 

这是我参与更文挑战的第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 可以将分析过程完全移到本地,如果页面中提供了参数设置的话,可以在本地对模型进行修改并立即看到分析结果。这样的直接好处有两个方面:更渲的数据展示,以及更加复杂的用户交互(复杂交互本身需要空间分析作为基础)。

安装

引入全部功能

 
java
复制代码
// 下载
$ npm install @turf/turf
 
js
复制代码
// 引入
import * as turf from '@turf/turf'
import { lineString, along } from '@turf/turf'

如果想引用指定模块,可以下载功能名称对应的npm包(功能名称对应其包的名称)

 
ruby
复制代码
$ npm install @turf/collect
 
js
复制代码
import collect from '@turf/collect';

功能

Turf 有着质量极高的官方文档,详细介绍了每个功能模块的使用,并有在线示例可以直接上手试用。

Turf的功能分为几大类,我们列举几个常用类并抽出一两个常用方法做展示。

MEASUREMENT

area(计算区域面积)

获取一个或多个feature,并返回其面积平方米。

参数

参数类型描述
geojson GeoJSON input GeoJSON feature(s)

返回

number - area in square meters

示例

 
js
复制代码
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

image-20210531171407541.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

示例

 
js
复制代码
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

image-20210531171328729.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

示例

 
js
复制代码
var point = turf.point([-90.548630, 14.616599]);
var buffered = turf.buffer(point, 500, {units: 'miles'});

npm install @turf/buffer

image-20210531171448035.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

示例

 
js
复制代码
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

image-20210531171535520.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

示例

 
js
复制代码
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

image-20210531171642600.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).

示例

 
js
复制代码
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

image-20210531171716436.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

示例

 
js
复制代码
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

image-20210531171955477.png

BOOLEANS

booleanPointInPolygon(判断点是否在多边形内)

取一个点和一个多边形或多多边形,并确定该点是否位于该多边形内。多边形可以是凸的,也可以是凹的。

 
text
复制代码
> 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

示例

 
js
复制代码
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

附录