前言
在前端开发中，地图应用的需求越来越多，而要实现复杂的地图交互，需要用到很多地理数据处理的算法。其中，tesselation（简单理解为“网格化”）是一类重要的算法，它将一个面（polygon）分割成若干个三角形，常用于地图绘制、地形分析等场景。Node.js 生态中的 @turf/tesselate 包为我们提供了方便快捷的 tesselation 算法实现，本文将介绍它的使用方法以及实际应用案例。
安装
@turf/tesselate 包是 npm 上的一个模块，安装方法如下：
npm install @turf/tesselate
安装完成后，我们就可以在代码里引用该模块：
const { tesselate } = require('@turf/tesselate');API
@turf/tesselate 模块暴露出一个函数 tesselate，它的作用是将一个面（polygon）分割成若干个三角形，并返回一个由这些三角形构成的新面（multipolygon）。tesselate 函数的函数签名如下：
function tesselate(geom: Feature<Polygon> | Polygon, options?: TesselateOptions): Feature<MultiPolygon>;
有两个参数：
- geom：一个面（polygon）的 GeoJSON 对象，可以是 Feature<polygon> 或 Polygon 两种形式；
- options：选填，一个对象，包含以下可选参数：
- edgeThreshold：网格化边缘的长度，例如 0.001 表示边缘长度为该面积的千分之一，默认值为 0.1。
示例
以下是一个简单的示例，其中的 zhangjiachuan 面来自 Antv 百度地图基础图层：
const { tesselate } = require('@turf/tesselate');
const zhangjiachuan = require('./zhangjiachuan.json');
const tesselated = tesselate(zhangjiachuan, { edgeThreshold: 0.01 });
console.log(tesselated);运行该代码可以得到以下输出：
-- -------------------- ---- -------
-
------- ----------
----------- -
------- ---------------
-------------- -
-
-
-
-------------------
-----------------
--
-
-------------------
------------------
--
-
-------------------
-----------------
--
---
--
-
-
-------------------
------------------
--
-
-------------------
------------------
--
-
-------------------
------------------
--
---
--
---
-
-
--
------------- --
-可以看到，tesselate 函数将 zhangjiachuan 面成功网格化为多个三角形。
应用案例
tesselation 算法广泛应用于地图绘制、地形分析等场景，以下是一些具体应用案例：
地图填充色
地图填充色的实现离不开 tesselation 算法。使用 @turf/tesselate 包，可以将一个面分割成若干个三角形并给每个三角形填充指定颜色，从而实现所需效果。
以下是一个简单示例，我们先生成一个随机颜色的渐变填充，然后将一个面分割成若干个三角形，每个三角形按比例填充一部分渐变色：
-- -------------------- ---- -------
----- - --------- - - ---------------------------
----- ----------- - -----------------------
----- - ------- - - -------------------------
-- -------
----- ------- - --- ---------
-
--- ---
--- ----
---- ----
---- ---
--- ---
--
---
-- -------
----- ---------- - ------------------ - -------------- ---- ---
-- ------
----- ------ - ------------- ------ ----------------------------------------- ---
----- -------- - ------------------ -- -- -- - -------------- --------
-- ------------
----- ----- - -------------------------------------------- -- -------------------- ----- ---------- ------------ ----- -----
-- --------------
--- ------ - --
------------------------------------------------ -- -- -
----- ----- - -------- - -------------------
----- ---- - --------------------------------------------- --- --- ---- - -------- --- ----- - ------- - ------ ------- ---
------ -- ------
-- -- --------- ---- ----
---地形分析
tesselation 算法也被广泛应用于地形分析，例如地形等高线图的绘制。以下是一个简单示例，我们使用 @turf/tin 包将一个点集转换为三角网，然后使用 tesselation 算法将三角形分割为等高线：
-- -------------------- ---- ------- ----- - --- - - --------------------- ----- - --------- - - --------------------------- ----- - -------- ------- - - ------------------------- ----- - --------- - - ------------------------ -- ------- --- ----- ----- ------ - ------------- -- --- ---- ----- -- ----- ----- --- - ---------- -------------------- --------- ------------------ -- ---------- ----- ------- - - ----- ---------- --------- - ----- ---------- ------------ -- - -- ----------------------------- ---------- - ------------------------------------------------------------------------------------------------------------ --- ----- ------- - --- -------------------------------------- -- ------- ----- ---------- - ------------------ - -------------- ---- --- -- -------------- ----- -------- - --- ------------------------------------------------ -- - ----- -- - ---------- ----- -- - ---------- ----- -- - ---------- ----- -- - ---------- ----- -- - ---------- ----- -- - ---------- ----- -- - ------------------------ -- ------------------------- --- -- -- ------------------------- --- ------------------------- ----- -- - ------------------------ -- ------------------------- --- -- -- ------------------------- --- ------------------------- ----- -- - ------------------------ -- ------------------------- --- -- -- ------------------------- --- ------------------------- ----- ---- - --- - -- - --- - -- ----------------- ----------- ----------------- ------- ------- ---------- - ---------- ---- ---- ---
总结
@turf/tesselate 包是 Node.js 生态中便捷的 tesselation 算法实现，它简单易用、通用性强、性能优秀。在地图相关应用中，应用 @turf/tesselate 可以方便快捷地进行地图填充色、等高线绘制等操作，提高产品开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae39b5cbfe1ea0610ded