WebGIS开发入门教程八: 空间分析咋做?Turf.js怎么用?

wowwwai GIS研习社 · 工具流程与项目排障

“我的缓冲区分析怎么老是报错？”——别慌，Turf.js来救场

你是不是也遇到过这种情况：辛辛苦苦用Leaflet画了个点，想做个500米缓冲区，结果浏览器控制台一片红？或者前端同事催着要“热力图+交集分析”的功能，你却还在纠结要不要搭Geoserver？别焦虑，这根本不是你的错——传统GIS空间分析依赖后端或桌面软件，而WebGIS时代，我们需要的是轻量、快速、纯前端的解决方案。今天，Dr. Gis就手把手带你用Turf.js把空间分析“搬”到浏览器里。

为什么选Turf.js？因为它像瑞士军刀一样趁手

我在参与某智慧城市项目时，客户要求实时计算共享单车热点与地铁站的服务范围重叠率。如果走后端分析，每次拖动地图都要等3秒响应——用户早跑了。后来我们切换到Turf.js，所有计算在前端完成，毫秒级反馈，客户当场拍板加预算。

Turf.js是什么？简单说，它就是一个用JavaScript写的地理空间分析库，专为WebGIS而生。不需要装ArcGIS，不用配PostGIS，甚至不用懂复杂的投影变换公式。它把那些高大上的空间算法（缓冲区、插值、叠加分析…）封装成一个个函数，你只需要传入GeoJSON格式的数据，就能拿到结果。就像你去超市买切好的净菜，回家直接下锅——省去了“洗菜切菜”的繁琐过程。

Turf.js ≠ GIS桌面软件。它不追求“全功能”，而是专注“高频刚需”。适合80%的轻量级空间分析场景，比如：找最近设施、划服务圈、算区域重叠面积、生成热力点等。

实战教学：三步上手Turf.js核心功能

我们以“计算某公园500米缓冲区内有多少家咖啡店”为例，拆解操作流程：

第一步：安装与引入

最简单的方式是通过CDN直接引入：

<script src="https://unpkg.com/@turf/turf@6.5.0/turf.min.js"></script>

或者用npm管理（推荐生产环境）：

npm install @turf/turf

第二步：准备数据——GeoJSON是通行证

Turf.js只认GeoJSON。假设你有一个公园的点坐标和一堆咖啡店的点集合：

// 公园位置
const park = turf.point([116.39, 39.91]);

// 咖啡店集合
const cafes = turf.points([
  [116.38, 39.92],
  [116.40, 39.90],
  [116.37, 39.93]
]);

⚠️ 注意：坐标必须是[经度, 纬度]顺序！我见过太多人写反导致结果跑到太平洋去了。

第三步：调用函数——像搭积木一样简单

现在，创建500米缓冲区，并筛选落在其中的咖啡店：

// 创建缓冲区（单位：米）
const buffer = turf.buffer(park, 500, {units: 'meters'});

// 筛选落在缓冲区内的点
const withinBuffer = turf.pointsWithinPolygon(cafes, buffer);

console.log(withinBuffer.features.length); // 输出：符合条件的咖啡店数量

就这么简单。没有SQL，没有ModelBuilder，一行代码搞定空间查询。

进阶技巧：这些坑我替你踩过了

在真实项目中，我发现新手最容易栽在三个地方：

1. 坐标系问题：Turf.js默认使用WGS84（EPSG:4326），如果你的数据是其他坐标系（比如Web墨卡托），必须先转换。可以用turf.transformScale或proj4js辅助。
2. 性能瓶颈：当点数据超过1万时，前端计算会卡顿。我的方案是：先用turf.bbox做粗筛，再精细计算。
3. 可视化联动：分析结果是GeoJSON，直接丢给Leaflet或Mapbox就能渲染。但记得用turf.area(buffer)这类函数提取数值，用于图表展示。

空间分析不止于“画圈圈”——Turf.js还能做什么？

总结：空间分析的未来在前端

记住这三个关键点：
① Turf.js让空间分析从“专家专属”变成“前端标配”；
② GeoJSON是数据交换的通用语言；
③ 复杂计算交给后端，高频轻量分析大胆用前端。

现在轮到你了——你在项目中用Turf.js做过哪些有趣的空间分析？是计算台风影响范围？还是规划共享单车调度路线？欢迎在评论区晒出你的代码片段，我会挑3个最有创意的案例，送你《WebGIS性能优化手册》电子版！