Turf.js 入门指南：地理空间分析的超能力工具包！

原创于 2025-10-02 11:01:21 发布 · 1k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #其他

文章目录

什么是 Turf.js？（你一定要知道！）

Turf.js 是一个强大的 JavaScript 库，专为地理空间分析而生。它让我们能够在浏览器或 Node.js 环境中执行复杂的地理计算，而不需要依赖外部 GIS 服务！作为一个纯 JavaScript 库，它处理起空间操作来既轻量又高效。

与传统 GIS 工具不同，Turf.js 可以直接在客户端工作，这意味着你可以构建响应迅速的地图应用，无需频繁的服务器请求。不管你是要计算两点间的距离、分析多边形区域，还是创建缓冲区，Turf 都能轻松胜任。

为什么选择 Turf.js？

在众多地理空间库中，Turf.js 脱颖而出有几个关键原因：

模块化设计 - 你可以只引入需要的功能，避免臃肿的代码库
兼容性强 - 与 Leaflet、Mapbox GL 等主流地图库完美配合
GeoJSON 中心 - 基于业界标准的 GeoJSON 格式，便于数据交换
开源无忧 - MIT 许可证下开源，使用没有商业限制
社区活跃 - 持续更新和完善

对于前端开发者来说，这简直是地理信息处理的瑞士军刀！

快速上手 Turf.js

安装方式

根据你的项目类型，有几种方式可以添加 Turf：

使用 npm（推荐方式）：

npm install @turf/turf

通过 CDN 引用：

<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>

模块化引入（节省空间）：

// 只引入需要的模块
import distance from '@turf/distance';
import buffer from '@turf/buffer';

基础概念：GeoJSON

在深入 Turf.js 之前，有必要理解 GeoJSON 这个核心概念。GeoJSON 是 Turf 用来表示空间数据的标准格式，它支持以下几种几何类型：

点 (Point) - 单个位置，如商店位置
线 (LineString) - 连接的点序列，如道路
多边形 (Polygon) - 封闭区域，如行政区划
多点 (MultiPoint) - 点的集合
多线 (MultiLineString) - 线的集合
多多边形 (MultiPolygon) - 多边形的集合
几何集合 (GeometryCollection) - 混合几何类型的集合

一个简单的点 GeoJSON 示例：

const point = {
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [-73.9857, 40.7484] // 经度, 纬度
  },
  properties: {
    name: "时代广场"
  }
};

Turf.js 常用功能详解

下面我们通过一些实用案例来了解 Turf 的强大功能。

1. 测量距离

想知道两个地点之间的距离？轻松搞定！

// 创建两个点
const point1 = turf.point([-73.9857, 40.7484]); // 纽约时代广场
const point2 = turf.point([-118.2437, 34.0522]); // 洛杉矶

// 计算距离（单位：公里）
const distance = turf.distance(point1, point2);
console.log(`两点间距离: ${distance.toFixed(2)} 公里`);

2. 创建缓冲区

比如你需要查找某个点周围 5 公里范围内的区域：

const point = turf.point([-77.0366, 38.8951]); // 华盛顿特区
const buffered = turf.buffer(point, 5, {units: 'kilometers'});

// buffered 是一个表示圆形区域的多边形

这个功能在做"附近的店铺"、"服务覆盖范围"等功能时特别有用！

3. 判断点是否在区域内

这个功能用处太多了，从判断用户是否在配送区域内，到地理围栏应用：

const point = turf.point([4.9, 52.4]); // 阿姆斯特丹附近一点
const polygon = turf.polygon([[
  [4.88, 52.35], [4.96, 52.35], [4.96, 52.45], 
  [4.88, 52.45], [4.88, 52.35]
]]); // 一个覆盖阿姆斯特丹的矩形

const isInside = turf.booleanPointInPolygon(point, polygon);
console.log(`点是否在多边形内: ${isInside}`);

4. 计算区域面积

需要知道一块区域有多大？

const polygon = turf.polygon([[
  [125, -15], [113, -22], [117, -37], [130, -33], [148, -39],
  [154, -27], [144, -15], [125, -15]
]]); // 澳大利亚的简化轮廓

const area = turf.area(polygon);
console.log(`区域面积: ${(area / 1000000).toFixed(2)} 平方公里`);

5. 寻找最近点

从一组点中找出离特定位置最近的点（比如最近的咖啡店）：

const targetPoint = turf.point([28.965797, 41.010086]); // 伊斯坦布尔某位置
const points = turf.featureCollection([
  turf.point([28.973865, 41.011122], {name: '咖啡店 A'}),
  turf.point([28.948459, 41.024204], {name: '咖啡店 B'}),
  turf.point([28.938674, 41.013324], {name: '咖啡店 C'})
]);

const nearest = turf.nearestPoint(targetPoint, points);
console.log(`最近的点是: ${nearest.properties.name}`);

实际项目应用案例

案例一：绘制等距线（等时线）

想象一下，你需要显示从一个位置步行 10 分钟能到达的所有区域。使用 Turf 的 isolines 功能：

// 创建点网格
const extent = [-74.018, 40.691, -73.959, 40.730]; // 纽约部分区域
const cellSide = 0.5;
const options = {units: 'kilometers'};
const grid = turf.pointGrid(extent, cellSide, options);

// 为每个点计算到中心点的时间
const center = turf.point([-73.9905, 40.7106]); // 曼哈顿下城
const walkingSpeed = 5; // 每小时5公里

// 添加到每个点的时间属性
grid.features.forEach(point => {
  const dist = turf.distance(center, point, {units: 'kilometers'});
  // 步行时间（分钟）
  point.properties.time = (dist / walkingSpeed) * 60;
});

// 创建等时线（5, 10, 15分钟）
const breaks = [5, 10, 15];
const isolines = turf.isolines(grid, breaks, {zProperty: 'time'});

这段代码创建了一组等时线多边形，显示从中心点步行 5、10 和 15 分钟可达的区域。超实用！

案例二：路线沿途兴趣点

假设你有一条驾车路线，想找出路线两侧 1 公里内的所有餐厅：

// 假设我们有一条路线
const route = turf.lineString([
  [-77.031669, 38.878605],
  [-77.029609, 38.881946],
  [-77.020339, 38.884084],
  [-77.025661, 38.885821]
]); // 华盛顿特区的一条路线

// 创建 1 公里的缓冲区
const buffer = turf.buffer(route, 1, {units: 'kilometers'});

// 假设这是餐厅数据
const restaurants = turf.featureCollection([
  turf.point([-77.023071, 38.880961], {name: '餐厅 A'}),
  turf.point([-77.030137, 38.881284], {name: '餐厅 B'}),
  turf.point([-77.035656, 38.880726], {name: '餐厅 C'}),
  // ... 更多餐厅
]);

// 筛选缓冲区内的餐厅
const restaurantsNearRoute = restaurants.features.filter(restaurant => {
  return turf.booleanPointInPolygon(restaurant, buffer);
});

console.log('路线附近的餐厅:', restaurantsNearRoute.map(r => r.properties.name));

进阶技巧：结合其他地图库

Turf.js 与其他地图库结合使用时威力更大。这里简单展示与 Leaflet 结合的例子：

// 初始化地图
const map = L.map('map').setView([38.8951, -77.0366], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// 创建一个点
const point = turf.point([-77.0366, 38.8951]);

// 创建 2 公里缓冲区
const buffered = turf.buffer(point, 2, {units: 'kilometers'});

// 将 GeoJSON 添加到地图
L.geoJSON(buffered, {
  style: {
    color: '#ff7800',
    weight: 2,
    opacity: 0.65
  }
}).addTo(map);

这样就在地图上显示了一个 2 公里的圆形缓冲区！

性能优化小贴士

处理大量空间数据时，性能可能成为瓶颈。以下是一些优化建议：

按需引入模块 - 不要引入整个 Turf 库，只引入需要的功能
减少数据复杂度 - 对复杂几何图形使用 turf.simplify 减少点数
分批处理 - 处理大量点时，将计算分批执行，避免阻塞UI
使用索引 - 对频繁查询的数据使用空间索引，如 RBush

// 简化复杂多边形，保留80%的细节
const simplified = turf.simplify(complexPolygon, {tolerance: 0.01, highQuality: true});

结语

Turf.js 是前端地理空间分析的神器，它让我们能够在浏览器中执行复杂的空间计算，而无需依赖后端服务。从简单的距离计算到复杂的空间分析，Turf 都能优雅地处理。

随着位置服务的普及，掌握 Turf.js 将让你的 Web 地图应用更加强大和智能。最重要的是，它的学习曲线相对平缓，即使你不是 GIS 专家也能快速上手！

希望这篇教程能帮助你开启地理空间分析的大门。下次当你需要在前端处理地理数据时，记得考虑这个强大的工具包！

参考资源

无论你是构建旅行应用、商店定位器还是复杂的地理分析工具，Turf.js 都会是你工具箱中的重要一员。开始探索地理空间的奇妙世界吧！