当前位置：首页 > news >正文

Turf.js：前端地理空间分析的瑞士军刀

news 2025/5/29 14:23:11

在Web开发中，地理空间数据处理已成为许多应用的核心需求。从地图可视化到位置服务，再到复杂的数据分析，前端开发者需要强大的工具来处理这些任务。Turf.js 作为一款轻量级、模块化的地理空间分析库，凭借其丰富的功能和易用性，成为前端开发者的得力助手。本文将深入探讨 Turf.js 的核心功能、常用 API 及其应用场景，并提供实际代码示例。

一、Turf.js 简介

Turf.js 是一个开源的地理空间分析库，由 Mapbox 开发并维护。它支持点、线、面等地理要素的创建、编辑和分析，包括缓冲区计算、距离测量、区域合并、空间关系判断等高级功能。Turf.js 的核心优势在于：

轻量级：仅需少量代码即可实现复杂功能。
模块化设计：按需引入功能模块，减少包体积。
跨平台：支持浏览器和 Node.js 环境。
不依赖地图库：可与 Leaflet、OpenLayers、高德地图等无缝集成。

二、安装与引入

Turf.js 可以通过 npm 或 yarn 安装，也可以通过 CDN 直接引入到 HTML 文件中。

使用 npm 安装

npm install @turf/turf

使用 CDN 引入

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

三、核心功能与 API 详解

1. 创建地理要素

Turf.js 提供了创建点、线、面等地理要素的函数。

import * as turf from '@turf/turf';// 创建点
const point = turf.point([-122.4194, 37.7749]);// 创建线
const line = turf.lineString([[-122.4194, 37.7749],[-121.8863, 37.3382]
]);// 创建面（多边形）
const polygon = turf.polygon([[[-122.801742, 45.48565],[-122.801742, 45.60491],[-122.584762, 45.60491],[-122.584762, 45.48565],[-122.801742, 45.48565]]
]);

2. 距离与方位计算

`distance` - 计算两点之间的距离

const point1 = turf.point([-75.343, 39.984]);
const point2 = turf.point([-75.534, 39.123]);
const distance = turf.distance(point1, point2, { units: 'kilometers' });
console.log(distance); // 输出距离（公里）

`bearing` - 计算两点之间的方位角

const bearing = turf.bearing(point1, point2); // 输出方位角（度）

3. 空间关系判断

`booleanPointInPolygon` - 判断点是否在多边形内

const polygon = turf.polygon([[[-122.4194, 37.7749],[-122.4194, 37.7759],[-122.4184, 37.7759],[-122.4184, 37.7749],[-122.4194, 37.7749]
]]);
const isInside = turf.booleanPointInPolygon(point, polygon); // true 或 false

`booleanOverlap` - 判断两个多边形是否有重叠区域

const poly1 = turf.polygon([[[-122.801742, 45.48565],[-122.801742, 45.60491],[-122.584762, 45.60491],[-122.584762, 45.48565]
]]);
const poly2 = turf.polygon([[[-122.64038, 45.553967],[-122.720031, 45.526554],[-122.669906, 45.507309],[-122.599806, 45.535693]
]]);
const isOverlap = turf.booleanOverlap(poly1, poly2); // true 或 false

`booleanWithin` - 判断一个多边形是否完全包含另一个多边形

const poly3 = turf.polygon([[[-122.75, 45.5],[-122.75, 45.6],[-122.65, 45.6],[-122.65, 45.5]
]]);
const isWithin = turf.booleanWithin(poly2, poly3); // true 或 false

4. 缓冲区计算

缓冲区计算是在地理要素周围生成一个固定半径的区域，常用于分析影响范围或服务区域。

const buffered = turf.buffer(point, 0.5, { units: 'miles' });
console.log(buffered); // 输出缓冲区 GeoJSON 对象

5. 叠加分析

叠加分析是地理空间分析中的重要技术，Turf.js 支持求交、求并、求差等操作。

`intersect` - 计算两个多边形的交集

const intersection = turf.intersect(poly1, poly2);
console.log(intersection); // 输出交集 GeoJSON 对象

`difference` - 计算两个多边形的差异部分

const difference = turf.difference(poly1, poly2);
console.log(difference); // 输出差异部分 GeoJSON 对象

6. 高级分析

`interpolate` - 基于点数据生成插值网格

const points = turf.featureCollection([turf.point([-122.4194, 37.7749], { value: 10 }),turf.point([-122.4194, 37.7759], { value: 20 })
]);
const grid = turf.interpolate(points, 0.01, { units: 'miles' });

`isobands` - 生成等值线/面

const breaks = [10, 15, 20];
const isobands = turf.isobands(grid, breaks);

四、与地图库集成

1. Leaflet.js 集成示例

<!DOCTYPE html>
<html>
<head><title>Turf.js 与 Leaflet.js 集成示例</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><style>#map { height: 400px; }</style>
</head>
<body><div id="map"></div><script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script src="https://unpkg.com/@turf/turf@latest/turf.min.js"></script><script>// 初始化地图const map = L.map('map').setView([37.7749, -122.4194], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);// 创建点并添加到地图const point = turf.point([-122.4194, 37.7749]);L.marker([37.7749, -122.4194]).addTo(map).bindPopup('起点');// 创建缓冲区并添加到地图const buffered = turf.buffer(point, 0.5, { units: 'miles' });L.geoJSON(buffered).addTo(map).setStyle({ color: 'blue', fillOpacity: 0.2 });</script>
</body>
</html>

2. 高德地图集成示例

import * as turf from '@turf/turf';// 初始化高德地图
AMapLoader.load({key: "你的key",version: "2.0",plugins: ["AMap.Polygon"]
}).then((AMap) => {const map = new AMap.Map('container');// 创建多边形const polygon = new AMap.Polygon({path: turf.getCoords(turfPolygon1), // 将 Turf.js 多边形转换为高德地图路径fillColor: "#FFC0CB",strokeColor: "#000000"});map.add(polygon);
});