Turf.js 三角网格生成指南：使用 @turf/triangle-grid 快速构建三角多边形网格

数据分析【免费下载链接】turfA modular geospatial engine written in JavaScript and TypeScript项目地址https://gitcode.com/gh_mirrors/tu/turf点击查看免费下载三角网格Triangular Grid是空间分析中常用的规则网格形态常用于采样、插值、表面建模与专题制图。本文以 Turf.js 模块化地理引擎中的turf/triangle-grid模块为对象完整讲解其 API 参数、安装方式、底层实现原理与测试验证方法帮助你基于给定的地理范围bbox与单元格边长在数行代码内生成一张覆盖目标区域的三角多边形网格。模块定位与安装turf/triangle-grid是 Turf 系列中负责在指定矩形范围内生成三角网格的独立子模块当前仓库中版本为7.4.0见 package.json。它以 GeoJSONFeatureCollectionPolygon形式返回结果输入输出均遵循 RFC 7946 标准可直接被地图库或后端空间分析管线消费。官方 README即本文所依据的 README.md提供两种安装方式方式一单独安装本模块$ npm install turf/triangle-grid方式二安装聚合模块 turf/turf$ npm install turf/turf第二种方式会把所有 Turf 模块作为函数一次性纳入适合在整体引入 Turf 的场景中使用第一种方式则适合按需加载、控制包体大小的项目。仓库基于 pnpm workspace 管理模块声明为type: module且要求 Node.js 22见 package.json。API 签名与参数详解triangleGrid的完整函数签名如下引自 index.tsfunction triangleGridP extends GeoJsonProperties GeoJsonProperties( bbox: BBox, cellSide: number, options: { units?: Units; properties?: P; mask?: FeaturePolygon; } {} ): FeatureCollectionPolygon, P各参数的含义与要点如下参数类型必填说明bboxBBox是网格覆盖范围按[minX, minY, maxX, maxY]顺序给出即经度最小值、纬度最小值、经度最大值、纬度最大值cellSidenumber是每个网格单元的边长在该单位下每个单元格内会生成两个三角形options.unitsUnits否计算cellSide时使用的单位支持 Turf 的全部合法单位如kilometers、miles、degrees等默认值为kilometersoptions.maskFeaturePolygon否若传入 Polygon或 MultiPolygon网格三角形只保留落在该范围内部的部分options.propertiesObject否透传给网格中每个要素的属性对象默认值为{}返回值FeatureCollectionPolygon即由三角形多边形组成的要素集合。关于单位的完整枚举与换算规则可参见 README_UNITS.md位于turf/helpers模块内。快速上手示例README 给出的最小可用示例README.mdvar bbox [-95, 30 ,-85, 40]; var cellSide 50; var options {units: miles}; var triangleGrid turf.triangleGrid(bbox, cellSide, options); //addToMap var addToMap [triangleGrid];该示例在经度-95至-85、纬度30至40的矩形范围内以50 英里为单元边长生成三角网格。若使用 ES Module 方式按模块导入则可写作import { triangleGrid } from turf/triangle-grid; const bbox [-95, 30, -85, 40]; const cellSide 50; const options { units: miles }; const grid triangleGrid(bbox, cellSide, options); // grid.features 中即为三角形多边形集合把生成的FeatureCollection交给任意 GeoJSON 渲染器即可看到三角形铺满 bbox 的效果。需要说明的是网格单元是依据cellSide在经纬度空间内等分 bbox 得到的矩形再按对角线一分为二成两个三角形因此覆盖区域仍严格限制在 bbox 矩形内。底层实现原理从 cellSide 到三角网阅读 index.ts 的源码可以完整还原该模块的算法流程共分三步1. 将单位制下的边长换算为经纬度增量由于cellSide以公里、英里等距离单位给出而 bbox 以经纬度表示源码借助turf/distance完成换算index.tsvar xFraction cellSide / distance([bbox[0], bbox[1]], [bbox[2], bbox[1]], options); var cellWidth xFraction * (bbox[2] - bbox[0]); var yFraction cellSide / distance([bbox[0], bbox[1]], [bbox[0], bbox[3]], options); var cellHeight yFraction * (bbox[3] - bbox[1]);这里分别测量了 bbox底边两个点经度不同、纬度相同和左边两个点纬度不同、经度相同的球面距离把cellSide与整条边的长度求比得到边长占 bbox 的分数再乘回经纬度跨度从而把距离单位换算为适合当前经纬度的cellWidth与cellHeight。这意味着同一cellSide在不同纬度地区对应的经纬度步长会自动不同——越靠近高纬度经度方向的实际距离被压缩换算出的cellWidth会相应放大从而在物理距离上保持一致。2. 双循环铺满 bbox随后源码以currentX/currentY为游标、xi/yi为行列计数用嵌套while循环从bbox[0], bbox[1]出发依次以cellWidth、cellHeight为步长扫描到 bbox 右上角index.ts。每个单元格生成两个三角形且依据xi与yi的奇偶性切换四种朝向组合index.tsxi偶、yi偶左下与右上两个三角形xi偶、yi奇另一种对角分割xi奇、yi偶再一种对角分割xi奇、yi奇与第一种相反的斜向分割。这种棋盘式交替checkerboard保证了相邻单元格的三角形边能够对齐拼接形成无缝的三角网格这也是每个 cell 生成两个三角形这一设计的目的所在。3. 输出与掩膜裁剪所有三角形收集到results数组后最终通过featureCollection(results)组装为FeatureCollectionPolygon返回index.ts。使用 mask 做不规则范围裁剪当业务只需要 bbox 内某一不规则区域的网格时传入options.mask即可。源码中的处理逻辑index.ts是对每个候选三角形与 mask 构造一个临时FeatureCollection调用turf/intersect求交若存在交集则保留该三角形否则丢弃if (options.mask) { if (intersect(featureCollection([options.mask, cellTriangle1!]))) results.push(cellTriangle1!); if (intersect(featureCollection([options.mask, cellTriangle2!]))) results.push(cellTriangle2!); } else { results.push(cellTriangle1!); results.push(cellTriangle2!); }因此options.mask需为 Polygon 或 MultiPolygon 类型的 Feature。仓库测试夹具 piedemont-mask.json 就演示了在意大利皮埃蒙特地区 bbox 内、以 12.5 英里为边长、并给定一块不规则多边形掩膜代表真实行政区/区域轮廓的完整配置{ bbox: [6.3775634765625, 44.05601169578525, 9.437255859375, 46.50595444552049], cellSide: 12.5, units: miles, mask: { type: Feature, properties: { stroke: #00F, stroke-width: 6, fill-opacity: 0.3, fill: #00F }, geometry: { type: Polygon, coordinates: [ /* ...顶点序列... */ ] } } }需要留意的是mask 裁剪采用逐三角形求交的方式属于逐要素判定当 bbox 很大或cellSide很小时三角形数量激增求交开销会相应上升此时应合理权衡网格分辨率。properties 透传与 TypeScript 泛型支持options.properties会被原样附加到每个生成的三角形要素上。源码中每个polygon(...)调用的第二个参数都是options.properties例如 index.ts。这在需要为网格要素标注类型、分组或渲染样式时非常实用测试夹具 properties.json 即演示了{ bbox: [2.131519317626953, 41.37835427979543, 2.2264480590820312, 41.44388449101261], properties: { marker-color: #0ff }, cellSide: 1 }此外该模块对 TypeScript 支持良好triangleGridP是泛型函数P即 properties 的类型参数。仓库中的类型测试 types.ts 验证了如下用法const grid triangleGrid(bbox, 50, { units: miles, properties: { foo: bar }, }); grid.features[0].properties.foo; // 类型安全可正常访问 // grid.features[0].properties.bar // 类型错误bar 不存在于 { foo: string; }即传入的properties类型会被精确推导并约束到返回的FeatureCollectionPolygon, P上为编译期发现属性名错误提供了保障。测试用例与性能基准仓库为每个 Turf 模块配套了测试与基准便于验证与评估功能测试test.ts 基于tape编写遍历 test/in 下的全部夹具读取其中的bbox、cellSide、units、mask、properties字段调用triangleGrid生成结果用turf/truncate截断坐标精度后与 test/out 目录中的预期 GeoJSON 逐要素deepEqual比对设置环境变量REGEN可重新生成预期文件。测试夹具覆盖包括斐济群岛 10 英里网格fiji-10-miles.json、伦敦 20 英里网格london-20-miles.json、跨越东西经度的超大 bbox500 英里big-bbox.json、高纬度的 Resolute 地区 12.5 英里网格resolute.json、带掩膜与带 properties 的组合场景覆盖了不同纬度、不同单位与不同选项的典型用法。性能基准bench.ts 使用benchmark库在同一 bbox 上分别以 100、10、1 英里为边长生成网格统计对应生成的三角形数量grid(...).features.length并逐个跑分便于观察分辨率与生成耗时的关系。在仓库中可这样运行# 运行功能测试在模块目录内 pnpm --filter turf/triangle-grid test # 运行性能基准 pnpm --filter turf/triangle-grid bench注意事项与边界单位默认值未传options.units时按kilometers处理跨项目复用代码时建议显式声明单位避免语义歧义。运行环境当前版本要求 Node.js 22且使用 ESMtype: module见 package.json在旧版本 Node 或 CommonJS 项目中需先确认兼容性。网格范围网格严格铺满整个 bbox 矩形若需不规则范围请使用mask但要注意逐三角形求交的性能开销。模块依赖本模块内部依赖turf/distance、turf/helpers与turf/intersect见 package.json单独安装时这些依赖会自动随包安装。小结turf/triangle-grid以bbox cellSide 可选掩膜三个核心输入即可输出标准 GeoJSON 三角网格适合快速为空间分析搭建规则采样框架。结合本文对 index.ts 源码距离换算、双循环铺格、棋盘式朝向、mask 求交与测试夹具的分析你可以准确预估不同参数下的网格形态与开销并将其无缝接入 Turf 的网格、插值、统计与可视化工作流。赞分享数据分析【免费下载链接】turfA modular geospatial engine written in JavaScript and TypeScript项目地址https://gitcode.com/gh_mirrors/tu/turf点击查看免费下载相关推荐使用 turf/tin 构建不规则三角网TIN从散点生成多边形三角剖分使用 turf/tin 构建不规则三角网TIN从散点生成多边形三角剖分 turf/tin 是 Turf 空间分析模块集合中负责 三角剖分 的核心模块数据分析Wagtail 2.16.2 版本解析关键 Bug 修复全梳理与 Jinja2 升级注意事项Wagtail 2.16.2 版本解析关键 Bug 修复全梳理与 Jinja2 升级注意事项 docs/releases/2.16.2.md 记录了 Wagt数据分析Bourbon三角形生成器triangle mixin使用指南Bourbon三角形生成器triangle mixin使用指南 你是否还在为CSS三角形代码编写繁琐而烦恼是否经常忘记border属性组合的方向规则Bou前端上一篇Comet高级配置终极指南如何精准控制工作流自动化与构建模式下一篇团队协作必备nypm corepack 锁定包管理器版本的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考