^ 关注我,带你一起学GIS ^
注:当前使用的是 ol [9.2.4] 版本,天地图使用的
key
请到天地图官网申请,并替换为自己的key
前言
❝在现代 GIS 开发中,如何准确、高效的分析地理空间数据是构建强大地图应用的核心。Turf.js 是一款用于地理数据展示分析的前端地图库,具有轻量、功能丰富的特点,可以说是专为地理空间分析而设计。Turf.js 提供了丰富的工具和算法,可以使开发者轻松实现如空间分析、地图量测、几何转换等复杂功能。
1. Turf是什么
Turf是一个用于空间分析的JavaScript库。它包括传统的空间操作、用于创建GeoJSON数据的辅助函数以及数据分类和统计工具。Turf可以作为客户端模块添加到您的网站中,也可以使用Node.js在服务器端运行Turf。
Turf 在前端GIS开发中具有大量的应用,因其强大的地理空间分析能力受到广大开发者的喜爱。下面从CDN访问量、NPM下载量以及GitHub星标数量进行说明。
CDN月请求量:13839676

NPM周下载量:830550

GitHub星标数量:9600

2. Turf 应用
Turf.js当前最新版本为7.2.0,可以通过离线、CDN在线引入或者通过NPM下载包等多种方式使用Turf。
离线引入
<script src="./turf@7.2.0.min.js"></script>
CDN引入
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@7.2.0/turf.min.js"></script>
NPM下载
默认下载最新版本:npm install @turf/turf
下载指定版本:npm install @turf/turf@version
3. Turf 数据特点
在 Turf 中有关数据处理、转换何分析等操作,只能以GeoJSON作为地理数据,并且其默认地理坐标系为WGS84,如果涉及的测量距离何面积等操作时,最好转换为目标投影坐标系进行计算。有关GeoJSON数据介绍请参考以下文章:1111111
4. Turf 数据操作
Turf 提供了丰富的数据转换与空间分析方法,包括数据转换、空间查询、空间分析、空间插值以及聚合统计等。
地图量测 | 测距 |
测面 | |
测大圆航线 | |
测边框 | |
几何变换 | 边框裁切 |
融合 | |
旋转 | |
平移 | |
缩放 | |
空间查询 | 相交查询 |
空间分析 | 缓冲区分析 |
泰森多边形 | |
凸包分析 | |
空间插值 | IDW(反距离权重插值) |
等高线等值线 | |
TIN | |
聚类统计 | DBSCAN聚类 |
K均值聚类算法 |
Turf 使用示例:
计算两点之间的距离
const p1 = turf.point([102.538837, 27.984255]);
const p2 = turf.point([102.549837, 27.984255]);
const distance = turf.distance(p1, p2, { units: 'kilometers' });
// 两点间距离(千米)
console.info("量测距离:",distance);
创建缓冲区
const point = turf.point([102.538837, 27.984255]);
const buffer = turf.buffer(point, 0.25, { units: 'kilometers' });
// 缓冲区 GeoJSON 数据
console.info("缓冲数据:"buffer);
判断点是否在多边形内
const pt = turf.point([102.538837, 27.984255]);
const polygon = turf.polygon([[
[102.538807, 27.984295],
[102.538857, 27.984295],
[102.538857, 27.984205],
[102.538807, 27.984205],
[102.538807, 27.984295]
]]);
const isInside = turf.booleanPointInPolygon(pt, polygon);
console.info(isInside);
线段平滑
const line = turf.lineString([
[-12.034835, 8.901183],
[-12.060413, 8.899826],
[-12.03638, 8.873199],
[-12.059383, 8.871418],
[-12.034835, 8.901183],
]);
const curved = turf.bezierSpline(line, { resolution: 100 });
// 输出平滑后的线要素
console.info(curved );
5. 参考文档
官方文档: [https://turfjs.org/](https://turfjs.org/)
GitHub 仓库: [https://github.com/Turfjs/turf](https://github.com/Turfjs/turf)
CDN资源: [https://www.jsdelivr.com/package/npm/@turf/turf](https://www.jsdelivr.com/package/npm/@turf/turf)
npm资源: [https://www.npmjs.com/package/@turf/turf](https://www.npmjs.com/package/@turf/turf)
❝
OpenLayers示例数据下载,请在公众号后台回复:ol数据
全国信息化工程师-GIS 应用水平考试资料,请在公众号后台回复:GIS考试
❝
GIS之路公众号已经接入了智能助手,欢迎大家前来提问。
欢迎访问我的博客网站-长谈GIS:
http://shanhaitalk.com
都看到这了,不要忘记点赞、收藏+关注 哦!
本号不定时更新有关 GIS开发 相关内容,欢迎关注