经纬志 看得懂 · 跑得起来
首页 / Turf.js

Turf.js

浏览器端的空间分析库。缓冲区、距离、相交判断、插值与聚类,不需要后端就能在地图旁边算。

Turf.js 7.x · 教程 13 篇 · API 45 个 · 示例 32 个

一句话概览:Turf.js 是浏览器端的空间分析库,输入输出都是 GeoJSON。它不做渲染,只负责计算:缓冲区、距离、面积、相交判断、中心点、插值网格、聚类等,适合在地图交互里即时算结果。

教程13 篇

01

空间分析基础

Turf.js 不画地图,只做计算。输入几何,输出几何或数字, 所以它可以跑在浏览器、Node、甚至一个没有 DOM 的测试…

02

缓冲区与距离

距离回答「多远」,缓冲区回答「影响范围有多大」。 Turf 把这两件事都算在球面上,半径单位默认公里, 所以「500 米缓冲…

03

聚类与统计

Turf 提供两种聚类:按空间密度自动分组的 DBSCAN,和指定组数的 KMeans。 聚类结果只是给每个点加了一个 cl…

04

社区精选资源

Turf 有近两百个函数,官方文档按字母排序,找起来并不直观。这一页把入口和常用函数按用途重新编排: 几何运算、距离面积、网…

05

坐标处理

真实数据里总有重复顶点、多余小数、方向反了的环。这一组函数不改几何形状, 只做规整:降精度、去冗余、统一方向、翻转坐标顺序。

06

几何运算:相交、合并与差集

面面运算是 Turf 里结果最不可预测的一组函数。 输入合法时它们给出标准 GeoJSON,输入有瑕疵时会返回 null 或…

07

插值与网格

手上只有几十个采样点,要画出一整片连续分布,就要靠插值。 另一类需求是把空间切成规则网格再逐格统计。两者都输出大量新几何,…

08

线要素处理:截取、分段与最近点

线数据上的操作几乎都围绕「里程」展开:第几公里处有什么、从 A 点到 B 点截一段、 每隔五百米打一个桩。这一组函数都以 u…

09

与地图库配合

Turf 只算数据,不画图。它的输出是标准 GeoJSON,可以直接交给 Leaflet 的 L.geoJSON 或 Map…

10

长度、面积、中心与包围盒

度量类函数是 Turf 最常被调用的部分。它们看起来简单,真正容易出错的只有两处: 单位怎么传、以及「中心」到底指哪一种中心…

11

性能与大数据

Turf 是纯 JavaScript 的同步计算库,跑在主线程上。 数据量到十万级时,瓶颈不是算法复杂度,而是每次调用产生的…

12

点线面之间的关系判断

这类函数统一以 boolean 开头,返回 true 或 false。 语义看着直白,真正容易出错的是边界:落在多边形边线上…

13

简化、平滑与合并

这一组函数处理几何的「外观」而不是「关系」:抽稀顶点减小体积、 用曲线替换折线、把相邻且属性相同的面合成一个。它们都改变几何…

API 文档45 个

使用示例32 个

沿线取点的运行效果截图

沿线取点

拖动里程滑块,红色标记沿折线移动。 每公里的刻度线用来确认:沿线等距不等于图上等距。

查看示例
计算面积的二维地图场景示意

计算面积

面积接口返回平方米,展示时按平方公里、公顷、亩分别换算。 周长用同一个面对象求,省去重复构造。

查看示例
面积对比的运行效果截图

面积对比

三块经纬度跨度完全相同的矩形,纬度越高实际面积越小,柱状图量化差距。

查看示例
包围盒计算的运行效果截图

包围盒计算

同一组数据,切换成只看点、只看线、看全部,外包矩形随之变化。 矩形四个数字的顺序是「西、南、东、北」。

查看示例
平滑曲线的运行效果截图

平滑曲线

原始折线是硬拐角,经过贝塞尔插值后变成顺滑曲线,顶点数量增加。

查看示例
生成缓冲区的运行效果截图

生成缓冲区

一个站点、一条半径滑块,实时得到缓冲面。 半径以公里传入,面积由 Turf 反算,两者可以直接互相验证。

查看示例
计算中心点的运行效果截图

计算中心点

一个 U 形地块,三种「中心」落在不同位置。 顶点均值直接掉进缺口里,这正是 centroid 与 centerOf…

查看示例
多边形裁剪的运行效果截图

多边形裁剪

超出研究范围的部分被切掉,结果只保留范围内的一块,原面用虚线示意。

查看示例
分类聚合统计的运行效果截图

分类聚合统计

六百个点按类别分成三组,每组用不同颜色,底部给出数量和均值。

查看示例
差集运算的运行效果截图

差集运算

外框减去右侧的圆角矩形,结果是一个带缺口的形状,缺口边界清晰。

查看示例
多面融合的运行效果截图

多面融合

八个相邻街区按所属片区合并,两组各自得到一条完整外轮廓。

查看示例
两点测距的运行效果截图

两点测距

点击图上两个位置,得到两点间的球面距离。 同一个结果同时以公里和米输出,便于确认单位换算没有出错。

查看示例
多部件拆分的运行效果截图

多部件拆分

一个三部件的地理要素被拆成三块,分别着色后能看出原本连在一起的关系。

查看示例
GeoJSON 变换的运行效果截图

GeoJSON 变换

同一份线数据经过清理与截断,顶点数与文件体积下降,形状几乎不变。

查看示例
网格生成的运行效果截图

网格生成

把一块研究范围切成六边形单元,是密度统计、热区聚合的常用前置步骤。 单元尺寸以公里给定,不受地图投影影响。

查看示例
网格聚合统计的运行效果截图

网格聚合统计

一公里见方的网格上统计随机分布的监测点,空格与密集格用颜色区分。

查看示例
六边形网格的运行效果截图

六边形网格

同一片范围铺满六边形,单元之间没有缝隙,中心点等距。

查看示例
多边形相交的二维地图场景示意

多边形相交

两个面重叠时得到一块交集,分离后返回 null。 拖动滑块能同时看到面积变化和空值返回这两件事。

查看示例
等时圈的运行效果截图

等时圈

从中心点出发,按四公里时速换算半径,逐级生成缓冲区并融合,得到三圈可达范围。

查看示例
计算长度的运行效果截图

计算长度

一条带四个拐点的巡查路线。总里程与逐段里程分别给出, 两者相加应当一致,这是最省事的自检方式。

查看示例
沿线分段的运行效果截图

沿线分段

一条四公里长的路线被切成两公里一段,四种颜色循环标记,末段通常不足长度。

查看示例
线段截取的运行效果截图

线段截取

给定线上两点,截取它们之间的部分,其余部分用细虚线表示。

查看示例
掩膜裁剪的运行效果截图

掩膜裁剪

研究区之外被统一压暗,区内保持原色,边界正好落在多边形上。

查看示例
最近点查找的运行效果截图

最近点查找

八个候选设施,一个随机移动的目标点。 每次移动都重新求最近点,并输出它在集合中的序号。

查看示例
点到线最近点的运行效果截图

点到线最近点

点击任意位置,点被投影到最近的线上一处,垂线与距离同时画出。

查看示例
点在多边形内判断的运行效果截图

点在多边形内判断

一批随机坐标落在一张不规则多边形上,逐点判断是否在面内。 这是选址、派单、围栏判断里出现频率最高的一类计算。

查看示例
批量点面判断的运行效果截图

批量点面判断

四百个点判断是否落在多边形内,区内绿、区外灰,边界点单独标记。

查看示例
点到线距离的运行效果截图

点到线距离

河岸两侧的监测点到河道中心线的距离,按远近分级着色。

查看示例
面转线的二维地图场景示意

面转线

填充面转成边界线后只剩轮廓,可以单独加粗、做虚线或沿线取点。

查看示例
简化线的运行效果截图

简化线

拖动容差滑块,线被逐级抽稀,顶点数下降而走向基本不变。

查看示例
TIN 三角网的运行效果截图

TIN 三角网

三十个采样点连成三角网,每个三角形都尽量接近等边,覆盖整个凸包范围。

查看示例
合并多边形的二维地图场景示意

合并多边形

两个相邻片区合并成一个整体。并集面积比两者之和略小, 差值恰好是重叠部分,用这个恒等式可以判断合并是否可信。

查看示例

常见问题

Turf 能直接在地图上画出来吗?
不能。Turf 只处理 GeoJSON 数据,不包含渲染能力。算完的结果要交给 Leaflet、OpenLayers、MapLibre 或 deck.gl 的对应图层去画。它的价值在于把分析逻辑放到前端,省掉一次服务端往返。
距离和面积默认用什么单位?
距离默认是千米,面积默认是平方米。可以在 options 里传 units 改成 miles、meters、degrees 等。经纬度坐标下直接算欧氏距离会失真,Turf 内部按球面计算,所以结果比平面估算可靠。
缓冲区为什么是多边形而不是圆?
缓冲区用折线逼近圆弧,steps 参数决定每四分之一圆分成多少段,默认值较小,放大后会看出棱角。把 steps 调到 64 以上就接近圆形,代价是顶点数增加。