大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

什么是 Turf

A modular geospatial engine written in JavaScript and TypeScript

Turf 是一个用于空间分析的 JavaScript 库，包括传统的空间操作、用于创建 GeoJSON 数据的辅助函数以及数据分类和统计工具。开发者可以将 Turf 作为客户端插件添加到目标网站，也可以使用 Node.js 在服务器端运行 Turf。

目前 Turf 在 Github 通过 MIT 协议开源，有 9k 的 star、1k 的 fork、21k 的项目依赖量、代码贡献者 150+、是一个优质的前端开源项目。

如何使用 Turf

首先需要安装相应的依赖：

// get all of turf
npm install @turf/turf

// or get individual packages
npm install @turf/helpers
npm install @turf/buffer

当然，开发者也可以通过 CDN 直接使用：

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

Turf.js 的端口可用于：

Java（Android、Java SE）
Swift（iOS、macOS、tvOS、watchOS、Linux）:Turf for Swift 处于实验阶段，其公共 API 可能会发生变化。
Dart/Flutter（Dart Web、Dart Native；Flutter for iOS、Android、macOS、Windows、Linux、Web）

Turf 使用 GeoJSON 来处理所有地理数据。Turf 要求数据为标准 WGS84 经度、纬度坐标，开发者可以查看 geojson.io 以获取可轻松创建此数据的工具。

大多数 Turf 函数都适用于 GeoJSON 特征，这些数据代表属性集合（即人口、海拔、邮政编码等）以及几何图形。GeoJSON 有几种几何类型，例如：

点
线串
多边形

Turf 提供了一些自己的几何函数，只不过是输出普通 GeoJSON 的简单包装器。例如，创建点的这两种方法在功能上是等效的：

// 节点顺序：精度和维度
var point1 = turf.point([-73.988214, 40.749128]);
var point2 = {
  type: 'Feature',
  geometry: {
    type: 'Point',
    // Note order: longitude, latitude.
    coordinates: [-73.988214, 40.749128]
  },
  properties: {}
};

需要注意的是，Turf 软件包编译为 ES2017。但是，@turf/turf 的浏览器版本经过转译后也支持 IE11。如果开发者正在使用这些软件包并且需要以 IE11 为目标，可以在构建过程中转译以下软件包：

// 需要转译的软件包
@turf/*
robust-predicates
rbush
tinyqueue

下面示例获取一个或多个要素并返回其面积（以平方米为单位）：

var polygon = turf.polygon([
  [
    [125, -15],
    [113, -22],
    [154, -27],
    [144, -15],
    [125, -15],
  ],
]);
var area = turf.area(polygon);

centroid 方法采用一个或多个特征并使用所有顶点的平均值计算质心，从而减少计算一组多边形的质心时小岛和伪影的影响。

var polygon = turf.polygon([
  [
    [-81, 41],
    [-88, 36],
    [-84, 31],
    [-80, 33],
    [-77, 39],
    [-81, 41],
  ],
]);
var centroid = turf.centroid(polygon);

更多关于 Turf 的用法和示例可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/Turfjs/turf

https://turfjs.org/docs/intro

https://www.youtube.com/watch?v=OGJ27rfySP0

https://github.com/Turfjs/turf/issues/1246

https://www.bram.us/2015/01/12/turf-js-advanced-geospatial-analysis-for-browsers-and-node/

思凡资源网

为何 Turf 能成为 JavaScript 地理空间引擎王者?

什么是 Turf

如何使用 Turf

参考资料