zoukankan      html  css  js  c++  java
  • 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
    

    附录

  • 相关阅读:
    词云图value传递数据不显示(已解决)
    中文分词并将结果存入数据库
    《浪潮之巅》阅读笔记(一)
    亿信BI——维度转换组件使用
    SyntaxError: NonUTF8 code starting with '\xef' in file(已解决)
    AJAX——POST请求
    Ajax前后端交互——后端接收前端页面变量
    Ajax——Get请求
    《浪潮之巅》阅读笔记(二)
    谷粒商城分布式基础(十)—— 商品服务API—新增商品 & 商品管理
  • 原文地址:https://www.cnblogs.com/hustshu/p/14853715.html
Copyright © 2011-2022 走看看