大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!
什么是 TurfA modular geospatial engine written in JavaScript and TypeScriptTurf 是一个用于空间分析的 JavaScript 库,包括传统的空间操作、用于创建 GeoJSON 数据的辅助函数以及数据分类和统计工具。开发者可以将 Turf 作为客户端插件添加到目标网站,也可以使用 Node.js 在服务器端运行 Turf。
目前 Turf 在 Github 通过 MIT 协议开源,有 9k 的 star、1k 的 fork、21k 的项目依赖量、代码贡献者 150+、是一个优质的前端开源项目。
如何使用 Turf首先需要安装相应的依赖:
// get all of turfnpm install @turf/turf// or get individual packagesnpm install @turf/helpersnpm install @turf/buffer当然,开发者也可以通过 CDN 直接使用:
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>Turf.js 的端口可用于:
Java(Android、Java SE)Swift(iOS、macOS、tvOS、watchOS、Linux):Turf for Swift 处于实验阶段,其公共 API 可能会发生变化。Dart/Flutter(Dart Web、Dart Native;Flutter for iOS、Android、macOS、Windows、Linux、Web)Turf 使用 GeoJSON 来处理所有地理数据。Turf 要求数据为标准 WGS84 经度、纬度坐标,开发者可以查看 geojson.io 以获取可轻松创建此数据的工具。
大多数 Turf 函数都适用于 GeoJSON 特征,这些数据代表属性集合(即人口、海拔、邮政编码等)以及几何图形。GeoJSON 有几种几何类型,例如:
点线串多边形Turf 提供了一些自己的几何函数,只不过是输出普通 GeoJSON 的简单包装器。例如,创建点的这两种方法在功能上是等效的:
// 节点顺序:精度和维度var point1 = turf.point([-73.988214, 40.749128]);var point2 = { type: 'Feature', geometry: { type: 'Point', // Note order: longitude, latitude. coordinates: [-73.988214, 40.749128] }, properties: {}};需要注意的是,Turf 软件包编译为 ES2017。但是,@turf/turf 的浏览器版本经过转译后也支持 IE11。如果开发者正在使用这些软件包并且需要以 IE11 为目标,可以在构建过程中转译以下软件包:
// 需要转译的软件包@turf/*robust-predicatesrbushtinyqueue下面示例获取一个或多个要素并返回其面积(以平方米为单位):
var polygon = turf.polygon([ [ [125, -15], [113, -22], [154, -27], [144, -15], [125, -15], ],]);var area = turf.area(polygon);centroid 方法采用一个或多个特征并使用所有顶点的平均值计算质心,从而减少计算一组多边形的质心时小岛和伪影的影响。
var polygon = turf.polygon([ [ [-81, 41], [-88, 36], [-84, 31], [-80, 33], [-77, 39], [-81, 41], ],]);var centroid = turf.centroid(polygon);更多关于 Turf 的用法和示例可以参考文末资料,本文不再过多展开。
参考资料https://github.com/Turfjs/turf
https://turfjs.org/docs/intro
https://www.youtube.com/watch?v=OGJ27rfySP0
https://github.com/Turfjs/turf/issues/1246
https://www.bram.us/2015/01/12/turf-js-advanced-geospatial-analysis-for-browsers-and-node/