前端做地图可视化必备工具:高级地理空间分析库 Turf

959 阅读3分钟

Turf 是可用于浏览器和Node 端的高级地理空间分析工具,Turf 提供多达 150 种的空间分析功能,你需要的都可以找到,比如数据抽稀、Tin、等高线、缓冲区、网格聚合、空间关系判断,坐标转换等等。

简介

Turf 简单易懂,小巧灵敏,模块化,运行速度极快!

  • 简约: 使用 GeoJSON 的模块化、简单易懂的 JavaScript 函数
  • 模块化: Turf 是一个个小模块的集合,按需引用
  • 快速: 利用最新的算法,前端计算

Turf 作为空间数据分析工具,处理的对象是空间数据,使用之前你需要了解什么是 GeoJSON。GeoJSON 相关介绍:

如何使用

使用场景

  • WebGIS 系统中经常会涉及到空间数据的处理,计算比如计算面积、缓冲区、中心点计算这种情况我可以使用Truf 在前端进行计算、这样灵活性会更好。

  • 本地环境数据进行处理,比如计算多边形的面积,点和面数据空间连接,我们就可以使用 Turf 写脚本批量完成数据操作。

  • 服务端提供空间计算服务,借助Turf 可以实现很多空间数据计算服务,相对其他软件工具要简单很多。\

使用方法

前端编译工具或者node 环境中使用:

var collect = require('@turf/collect');
// or in ES6
import collect from '@turf/collect';
// 使用
collect(points, polys, 'population', 'populationValues');

// 全量引用
 
import * as turf from '@turf/turf'

浏览器中直接使用

<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
<script>  
  var bbox = turf.bbox(features);
</script>

使用案例

前端地图绘制 50KM 的缓冲区,并进行可视化,这里们使用使用 开源地理可视化引擎 L7 可视化绘制。

github.com/antvis/l7\

可视化效果图:

我们看看如何实现这样的效果

引入依赖

var collect = require('@turf/collect');
// or in ES6
import collect from '@turf/collect';
// 使用
collect(points, polys, 'population', 'populationValues');

// 全量引用
 
import * as turf from '@turf/turf

初始化地图

const scene = new Scene({
  id: "map",
  map: new GaodeMap({
    pitch: 0,
    style: "light",
    center: [-96, 37.8],
    zoom: 3
    })
});

缓冲区计算

const buffered = turf.buffer(linedata, 50, {units: 'kilometres'});
// 绘制线
const layer2 = new LineLayer()
.source(linedata)
.color('#fff')
.active(true)
.size(2)
.style({
  lineType: 'dash',
  dashArray: [ 2, 2 ],
  opacity: 1
});
// 绘制缓冲区
const layer = new PolygonLayer({}).source(buffered).color('rgb(12,44,132)').shape('fill').style({opacity: 1.0});
scene.addLayer(layer);
scene.addLayer(layer2);

在线demo查看demo:

codesandbox.io/s/l7-buffer…

Turf 能力介绍

更多功能 Turf turfjs.org/

Measurement 测量计算

    • along
    • area
    • bbox
    • bboxPolygon
    • bearing
    • center
    • centerOfMass
    • centroid
    • destination
    • distance
    • envelope
    • length
    • midpoint
    • pointOnFeature
    • polygonTangents
    • pointToLineDistance
    • rhumbBearing
    • rhumbDestination
    • rhumbDistance
    • square
    • greatCircle

Coordinate Mutation 坐标变换

    • cleanCoords
    • flip
    • rewind
    • round
    • truncate

Transformation 数据处理

    • bboxClip
    • bezierSpline
    • buffer
    • circle
    • clone
    • concave
    • convex
    • difference
    • dissolve
    • intersect
    • lineOffset
    • simplify
    • tesselate
    • transformRotate
    • transformTranslate
    • transformScale
    • union
    • voronoi

Feature Conversion 要素转换

    • combine
    • explode
    • flatten
    • lineToPolygon
    • polygonize
    • polygonToLine

Misc

    • kinks
    • lineArc
    • lineChunk
    • lineIntersect
    • lineOverlap
    • lineSegment
    • lineSlice
    • lineSliceAlong
    • lineSplit
    • mask
    • nearestPointOnLine
    • sector
    • shortestPath
    • unkinkPolygon

Helper 数据工具

    • featureCollection
    • feature
    • geometryCollection
    • lineString
    • multiLineString
    • multiPoint
    • multiPolygon
    • point
    • polygon

Random 随机生成数据

    • randomPosition
    • randomPoint
    • randomLineString
    • randomPolygon
    • sample\

Interpolation 插值

    • interpolate
    • isobands
    • isolines
    • planepoint
    • tin

Joins 空间关联

    • pointsWithinPolygon
    • tag

Grids 网格计算

    • hexGrid
    • pointGrid
    • squareGrid
    • triangleGrid

Classification

    • nearestPoint

Aggregation 聚合

    • collect
    • clustersDbscan
    • clustersKmeans

Meta 元数据使用方法

    • coordAll
    • coordEach
    • coordReduce
    • featureEach
    • featureReduce
    • flattenEach
    • flattenReduce
    • getCoord
    • getCoords
    • getGeom
    • getType
    • geomEach
    • geomReduce
    • propEach
    • propReduce
    • segmentEach
    • segmentReduce
    • getCluster
    • clusterEach
    • clusterReduce

Assertions 类型校验

    • collectionOf
    • containsNumber
    • geojsonType
    • featureOf

Booleans 布尔类方法

    • booleanClockwise
    • booleanContains
    • booleanCrosses
    • booleanDisjoint
    • booleanEqual
    • booleanOverlap
    • booleanParallel
    • booleanPointInPolygon
    • booleanPointOnLine
    • booleanWithin

Unit Conversion 单位换算

    • bearingToAzimuth
    • convertArea
    • convertLength
    • degreesToRadians
    • lengthToRadians
    • lengthToDegrees
    • radiansToLength
    • radiansToDegrees
    • toMercator
    • toWgs84

关注 ThinkGIS 公众号一起学习 WebGIS 技术