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

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

moe_

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

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

示例

 

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

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

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

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

示例

 

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

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

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

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

附录

• 官方文档

• Turf.js中文网

• Turf: GIS for web maps （这个网页里有 mapbox.com 基于 Turf 开发的精美地图……的截图）