This is the first day of my participation in the More text Challenge. For details, see more text Challenge.

preface

Essential to our map-related system are the requirements related to spatial analysis operations, such as buffers, calculation of contour lines, etc. With simple JS, we can’t combine point, line and surface analysis, but Turf.js has solved this problem and made it easy to use the analysis functions previously only belonged to desktop GIS in the browser.

An introduction to Turf.js and its significance

Turx.js is a browser-based spatial analysis library developed by MapBox, which is written in JavaScript and managed through NPM. It is worth mentioning that the good modularization design allows it to be used not only on the browser side, but also on the server side through Node.js. Turf native supports GeoJSON vector data. GeoJSON has the advantage of being simple and supported by all web map apis; GeoJSON does not support spatial indexing, however, a drawback that could limit the efficiency of Turf’s ability to handle large files. It is suitable for WebGIS applications that are lightweight (data light rather than function light).

The point of supporting spatial analysis on the browser side is that not only can you search for places and paths via web Maps (Google Maps doesn’t really work much different today than it did ten years ago), but you can also share spatial analysis models in the browser. The previous WebGIS features of course also supported spatial analysis, but the analysis process had to be performed on the server side and there were limited Settings that could be performed locally. Now using Turx.js you can move the analysis process completely to the local, where you can make changes to the model and see the analysis results immediately if the parameters are set in the page. The immediate benefits are twofold: better presentation of data, and more complex user interactions that themselves require spatial analysis to underlie.

The installation

Introducing full functionality

$NPM install @turf/turfCopy the code
/ / introduction
import * as turf from '@turf/turf'
import { lineString, along } from '@turf/turf'
Copy the code

If you want to reference the specified module, you can download the NPM package for the function name (the function name corresponds to the package name).

$ npm install @turf/collect
Copy the code
import collect from '@turf/collect';
Copy the code

function

Turf has high quality official documentation detailing the use of each of the functional modules and online examples to try out.

The features of Turf are divided into a few broad categories and we will list a few common ones and draw out one or two common methods for demonstration.

MEASUREMENT

Area (calculate area area)

Gets one or more features and returns their area in square meters.

parameter

parameter type describe
geojson GeoJSON input GeoJSON feature(s)

return

number – area in square meters

The sample

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);
Copy the code

npm install @turf/area

Calculate the centerOfMass of a polygon

Take any Feature or Feature recollection, and use this formula to return its centroid: the polygon centroid.

parameter

parameter type describe
geojson GeoJSON GeoJSON to be centered
properties Object an Object that is used as the Feature ‘s properties

return

Feature – the center of mass

The sample

var polygon = turf.polygon([[[-81.41], [...88.36], [...84.31], [...80.33], [...77.39], [...81.41]]]);

var center = turf.centerOfMass(polygon);
Copy the code

npm install @turf/center-of-mass

TRANSFORMATION

Buffer (calculate buffer)

Calculates a buffer for a Feature with a given radius. The units of support are miles, kilometers and degrees.

parameter

parameter type describe
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

The options options

attribute type The default value describe
units string kilometers any of the options supported by turf units
steps number 64 number of steps

return

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

The sample

var point = turf.point([-90.548630.14.616599]);
var buffered = turf.buffer(point, 500, {units: 'miles'});
Copy the code

npm install @turf/buffer

Translate

Any geojsonFeature or geometry that moves a specified distance along a rho line at a given directional Angle.

parameter

parameter type describe
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

The options options

attribute type The default value describe
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)

return

GeoJSON – the translated GeoJSON object

The sample

var poly = turf.polygon([[[0.29], [3.5.29], [2.5.32], [0.29]]]);
var translatedPoly = turf.transformTranslate(poly, 100.35);
Copy the code

npm install @turf/transform-translate

MISC

LineIntersect (calculate the intersection point of line segments at both ends)

Gets any LineString or PolygonGeoJSON and returns the intersection.

parameter

parameter type describe
line1 (Geometry|FeatureCollection|Feature <(LineString|MultiLineString|Polygon|MultiPolygon)>) any LineString or Polygon
line2 (Geometry|FeatureCollection|Feature <(LineString|MultiLineString|Polygon|MultiPolygon)>) any LineString or Polygon

return

FeatureCollection – point(s) that intersect both

The sample

var line1 = turf.lineString([[126, -11], [129, -21]]);var line2 = turf.lineString([[123, -18], [131, -14]]);var intersects = turf.lineIntersect(line1, line2);
Copy the code

npm install @turf/line-intersect

Mask (returns a non-mask polygon)

Gets any type of polygon and an optional mask, and returns an outer ring of the polygon with holes.

parameter

parameter type describe
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)

return

Feature – Masked Polygon (exterior ring with holes).

The sample

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);
Copy the code

npm install @turf/mask

JOINS

PointsWithinPolygon (returns the points inside the polygon)

Find points that fall within (multiple) polygons.

parameter

parameter type describe
points (Feauture|FeatureCollection ) Points as input search
polygons (FeatureCollection|Geometry|Feature <(Polygon|MultiPolygon)>) Points must be within these (Multi)Polygon(s)

return

FeatureCollection – points that land within at least one polygon

The sample

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);
Copy the code

npm install @turf/points-within-polygon

BOOLEANS

booleanPointInPolygon

Take a point and a polygon or polygons and determine whether the point is within the polygon. Polygons can be convex or concave.

> npm install @turf/boolean-point-in-polygon
Copy the code

parameter

parameter type describe
point Coord input point
polygon Feature <(Polygon|MultiPolygon)> input polygon or multipolygon
options Object Optional parameters: see below

The options options

attribute type The default value describe
ignoreBoundary boolean false True if polygon boundary should be ignored when determining if the point is inside the polygon otherwise false.

return

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

The sample

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
Copy the code

The appendix

  • The official documentation

  • Turf. Js Chinese website

  • Turf: GIS for Web Maps The screenshot below)