资讯详情

@turf/line-slice 实战指南:用 Turf 精准截取线要素子段

📅 2026/9/25 16:10:23 | 华诺云谱 👁 阅读
@turf/line-slice 实战指南:用 Turf 精准截取线要素子段
数据分析【免费下载链接】turfA modular geospatial engine written in JavaScript and TypeScript项目地址https://gitcode.com/gh_mirrors/tu/turf点击查看免费下载导读turf/line-slice是 TurfJavaScript/TypeScript 模块化地理空间引擎中用于按起止点截取线要素的核心工具函数给定一条线和一个起点、一个终点它返回这条线上位于两点之间的子段FeatureLineString。该模块在路线规划、轨迹回放、路径抽稀等场景中非常实用——例如只需要展示某条导航路线中两个途经点之间的部分。读完本文你将掌握lineSlice的完整 API、实际调用方式、底层实现原理基于最近点投影与线段索引排序以及它的边界处理与测试验证方式。lineSlice 是什么lineSlice接收一条 LineString 线、一个起始 Point 点 和一个终止点返回这条线在这两个点之间的子段。起始点和终止点并不需要恰好落在线上——函数会自动寻找它们在线上最近的投影位置再截取中间部分。在 官方 README 中这一能力被描述为提取路线上两个途经点之间的部分extracting only the part of a route between waypoints这也是它最典型的应用场景在完整路线数据中只保留用户关心的起终点区间。安装方式turf/line-slice是 Turf 模块化架构下的独立包可以单独安装也可以随完整版 Turf 一起使用# 单独安装本模块 $ npm install turf/line-slice# 安装包含全部模块以函数形式挂载到 turf 命名空间下的完整包 $ npm install turf/turf从 package.json 可以看到当前仓库中该模块版本为7.4.0采用 ESMtype: module并声明node: 22的运行时要求其运行时依赖仅有三个 Turf 内部包turf/helpers提供lineString、point、Coord等类型与构造工具turf/invariant提供getCoords、getType等坐标与类型校验工具turf/nearest-point-on-line负责将点投影到线上、寻找最近顶点。函数签名与参数说明lineSlice( startPt: Coord, // 起始点 stopPt: Coord, // 终止点 line: FeatureLineString | LineString // 待截取的线 ): FeatureLineString // 返回截取后的线参数类型说明startPtCoord起始点可以是PointFeature、PointGeometry 或坐标数组stopPtCoord终止点类型同上lineFeatureLineString或LineString被截取的线要素支持 Geometry 或 Feature 两种形态返回值始终是一个FeatureLineString线要素。当输入line是 Feature 时输出会保留其properties见下文源码分析当输入是纯 Geometry 时输出属性为空对象。快速上手官方示例以下示例来自 README展示了如何构造一条折线、两个点然后截取两点之间的子段var line turf.lineString([ [-77.031669, 38.878605], [-77.029609, 38.881946], [-77.020339, 38.884084], [-77.025661, 38.885821], [-77.021884, 38.889563], [-77.019824, 38.892368] ]); var start turf.point([-77.029609, 38.881946]); var stop turf.point([-77.021884, 38.889563]); var sliced turf.lineSlice(start, stop, line); // 用于地图叠加显示 var addToMap [start, stop, line];注意示例中start-77.029609, 38.881946恰好等于线坐标数组的第 2 个顶点stop-77.021884, 38.889563恰好等于第 5 个顶点因此这里截取的是顶点索引 1 到 4 之间的完整折线段。更常见的情况是两点并不落在顶点上此时lineSlice会在线上投影出新的端点见下文底层原理。底层实现原理源码级解析lineSlice的实现位于 index.ts核心流程清晰可分为四步1. 输入校验const coords getCoords(line); if (getType(line) ! LineString) throw new Error(line must be a LineString);借助turf/invariant的getCoords与getType先取出坐标并校验几何类型。如果传入的不是 LineString例如 Polygon、Point 等会直接抛出line must be a LineString错误这与文档中line to slice的参数约束一致。2. 寻找最近投影点const startVertex nearestPointOnLine(line, startPt); const stopVertex nearestPointOnLine(line, stopPt);这是整个算法最关键的一步调用 turf/nearest-point-on-line将起止点投影到线上返回线路上距离最近的点。由于该函数基于逐段求最近点的方式实现即使输入点偏离线路如 GPS 轨迹点或手工采集的路口坐标也能正确投影到线段的合适位置——这正是 README 所说起止点不一定要恰好落在线上的原理支撑。nearestPointOnLine的返回值会携带segmentIndex属性落在第几个线段上供下一步排序使用。3. 按线段索引排序起止点const ends startVertex.properties.segmentIndex stopVertex.properties.segmentIndex ? [startVertex, stopVertex] : [stopVertex, startVertex];如果终止点在沿线的位置反而在起始点之前即用户给出的 stopPt 在线上更靠前函数会通过比较segmentIndex自动交换两端顺序保证截取结果始终是从线头部向尾部方向的连续子段不会产生反向或空结果。4. 组装截取坐标并返回const clipCoords [ends[0].geometry.coordinates]; for ( let i ends[0].properties.segmentIndex 1; i ends[1].properties.segmentIndex 1; i ) { clipCoords.push(coords[i]); } clipCoords.push(ends[1].geometry.coordinates); return linestring(clipCoords, line.type Feature ? line.properties : {});截取结果的坐标组成为起始投影点 → 途经的完整中间顶点 → 终止投影点。即两个投影端点之间原本落在线上的中间顶点会全部保留折线的形状细节不会丢失。最后调用turf/helpers的linestring构造函数生成新的线要素并通过line.type Feature判断来决定是否继承原线的propertiesFeature 输入则保留属性Geometry 输入则返回空属性。边界情况与已知问题的处理segmentIndex 越界修正Issue #3016源码中专门定义了一个内部函数fixSegmentIndexBoundsindex.tsfunction fixSegmentIndexBounds(line, vertex) { let geometry line.type Feature ? line.geometry : line; if (vertex.properties.segmentIndex geometry.coordinates.length - 1) { vertex.properties.segmentIndex geometry.coordinates.length - 2; } }在 index.ts 中startVertex和stopVertex在排序前都会经过该函数修正。源码注释说明了原因nearestPointOnLine存在一个已知 bug可能返回超出实际范围的segmentIndex指向不存在的线段在 Turf 官方修复对应 issue 编号 #3016之前lineSlice在此处主动将越界索引钳制到length - 2保证后续遍历坐标数组时不会越界。重复端点问题Issue #2946在 test.ts 中有专门针对 issue #2946 的回归测试输入线[[2.999848, 0.000152], [2, -1], [2, 2]]起点[2, 0]、终点[2, 2]断言截取结果只有两个点coordinates.length 2即不会因为投影算法引入重复点同时断言对截取结果再次调用lineSlice不会抛错。该用例的 fixture 也保存在 test/in/avoid-duplicated-end-points.geojson 中。非 LineString 输入如前所述传入非 LineString 几何会抛出类型错误。这是函数最直接的使用约束lineSlice 只支持折线数据如果需要处理其他几何类型请先通过turf/line-to-polygon、turf/polygon-to-line等模块做转换。测试用例与验证lineSlice的测试集中在 test.ts采用 tape 断言 GeoJSON fixture 的方式Fixture 驱动测试test.ts遍历 test/in/ 目录下的 6 个输入 fixtureline1、line2、route1、route2、vertical、avoid-duplicated-end-points每个 fixture 按[linestring, start, stop]顺序解析要素调用lineSlice后先用turf/truncate统一截断坐标精度默认 6 位小数再与 test/out/ 中的期望结果做深度比对。覆盖的典型场景line1展示一般折线截取line1.geojsonline2中起止点均偏离线段[0, 0.1]与[0.9, 0.8]均不在对角线[0,0]→[1,1]上验证投影能力line2.geojsonvertical验证竖直方向、起点恰为线端点的场景vertical.geojsonroute1/route2则是上千个顶点的真实路线数据验证大规模折线的截取正确性。Issue 回归测试除 #2946 外还有针对 issue #2023 的测试test.ts使用长距离直线[[3.69140625, 51.72702815704774], [-5.3173828125, 41.60722821271717]]断言截取结果精确到 8 位小数的坐标值。运行测试的命令在 package.json 中定义pnpm run test:tape # 等价于 tsx test.ts性能基准仓库提供了 bench.ts 基准脚本基于benchmark库对三种规模的数据进行压测turf-line-slice#simple使用 3 个顶点的简单折线line1turf-line-slice#route1与turf-line-slice#route2使用真实大路线上千顶点验证大规模折线下的截取效率。运行方式pnpm run bench # 等价于 tsx bench.ts从算法实现看lineSlice的性能开销主要取决于nearestPointOnLine的逐段最近点搜索实际耗时与线段的顶点数量线性相关路线越长顶点越多计算成本越高。典型应用场景路线区间展示地图上一条完整路线可能横跨数百公里只需渲染用户起终点间的部分时先用lineSlice截取再绘图减少前端渲染负担轨迹分段分析将 GPS 轨迹按事件点停留点、兴趣点切成多段逐段计算长度、耗时或速度路径裁剪预处理将截取结果继续输入 turf/length 计算区间里程或配合turf/truncate控制输出坐标精度测试中也正是这样组合使用的。小结turf/line-slice用简洁的 API 完成了两点截线这一高频地理计算需求三个参数、一个返回值内部却串联了类型校验、最近点投影、索引排序与坐标重组四步逻辑并针对上游nearestPointOnLine的索引越界 bug 做了主动钳制。配合完善的 fixture 测试与基准脚本无论用于路线、轨迹还是路径处理它都是一个可靠且易于理解的模块。更多组合用法可参考 packages/turf 聚合入口或阅读相邻模块 turf/nearest-point-on-line 了解投影算法的细节。赞分享数据分析【免费下载链接】turfA modular geospatial engine written in JavaScript and TypeScript项目地址https://gitcode.com/gh_mirrors/tu/turf点击查看免费下载相关推荐turf/line-slice-along 实战指南按里程提取折线子路段turf/line slice along 实战指南按里程提取折线子路段 本指南围绕 Turf 模块化地理引擎JavaScript/TypeScript数据分析turf/line-offset 指南用 Turf 为线要素生成平行偏移线turf/line offset 指南用 Turf 为线要素生成平行偏移线 turf/line offset 是 Turf 模块化地理引擎中专门用于线偏数据分析使用 turf/line-split 切割线要素Turf 中 LineString 分段切割的完整指南使用 turf/line split 切割线要素Turf 中 LineString 分段切割的完整指南 本指南围绕 Turf 模块集合中的 turf/li数据分析上一篇游戏对话一行看不懂用 Translumo 实时屏幕翻译的 4 种打开方式下一篇marked 中 Tab 字符的解析全解缩进代码块、列表嵌套与制表位展开原理创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
📝

华诺云谱内容团队

资深建站顾问 · 行业研究员

10年+企业数字化服务经验,专注智能建站、SEO优化与品牌营销,持续输出建站技巧、行业洞察与营销干货,已帮助5000+企业实现数字化增长。

你可能需要的服务

订阅华诺云谱资讯周报

每周一封,精选建站技巧、SEO与营销干货,直达邮箱。已有 8,000+ 企业主订阅,助你少走弯路。

↑