edittrack 中的多行编辑：同时处理多个路线

发布: 3天前 (2026年2月9日 GMT+8 17:05)

11 分钟阅读

Source: Dev.to

请提供您希望翻译的正文内容（除代码块和 URL 之外的文本），我将按照要求将其翻译为简体中文并保留原有的格式。

规划复杂路线

规划复杂路线通常需要不止一条轨迹。无论您是在绘制多日徒步路线、比较备选路径，还是管理相互连接的路径网络，将所有路线保存在同一个工作区可以让您看到全局，并在独立编辑每个部分时保持上下文。

从 version 2.0‑beta 开始，edittrack 引入了 multi‑line editing —— 在同一个 TrackManager 中创建、编辑和管理多个独立轨迹的能力。本文将逐步介绍该功能、其实际应用场景以及如何使用它。

什么是 Multi‑Line Editing？

Multi‑line editing 让你在单个 edittrack 工作区中同时处理多个独立的线路字符串——称为 “parts”。每个 part 都是一个完整的轨迹，拥有各自的：

控制点
线段
POI（兴趣点）
路由配置

你可以：

创建任意数量的 parts
切换不同的 parts 进行单独编辑
同时查看 所有 parts 以获取上下文
为活动和非活动的 parts 设置不同的样式，以提升视觉清晰度
删除不再需要的 parts

当你绘制、移动点或添加 POI 时，仅会影响 当前活动的 part。其他 parts 保持不变，让你在不干扰其他路线的情况下细化某一路径。

真实世界使用案例

用例	部件如何帮助
将长途旅行拆分为每日段落	每一天都成为独立的部件，这样您可以编辑第 3 天而不会意外移动第 1 天的点。所有天数在地图上保持可见，让您在微调各个阶段时仍能感知完整行程。
向客户或合作者展示选项	并排绘制多种变体： • 风景路线 vs. 最快路线 • 技术性山地自行车道 vs. 适合初学者的路径 • 主干道 vs. 风景支路在决定之前，比较不同方案的距离、海拔剖面和路面类型。
构建互联的路径系统	主路线加可选的支线路段： • 主要徒步路线及观景分支 • 不同起点汇聚至同一目的地 • 环形路线并提供捷径选项每个分支都是独立的部件，便于修改而不会使整个网络纠结。
按出行方式划分部件	示例： • 步行至登山口（部件 0） • 骑行主路线（部件 1） • 驾车返回（部件 2）或： • 接近路线 vs. 主攀登路线 • 铺装通道路 vs. 越野小径如有需要，每个部件可以使用不同的路径规划配置或捕捉设置。
比较原始路线与优化路线	将原始路线保留为部件 0，然后创建部件 1 作为优化版本。直接在地图上进行比较。如果实验不理想，只需删除新部件或切换回原始路线。

入门

如果你已经熟悉第一篇博客文章中的 edittrack，那么使用多个部件的操作自然是对已有知识的延伸。关键区别在于：不再只管理一个轨道，而是管理多个部件并在它们之间切换。

创建新部件

// Assuming you already have a TrackManager instance
const partIndex = trackManager.createNewPart();
// Returns the index (0, 1, 2, …) and automatically switches to that part

新部件会成为 活动部件，你可以立即在其上绘制。
第一个创建的部件始终是 部件 0。

切换到其他部件

trackManager.workOnPart(1); // Switch to part 1

切换后，所有绘图、点操作以及 POI 操作都只会影响 该部件。

查询当前活动部件

const currentPart = trackManager.activePart();
console.log(`Editing part ${currentPart}`);

获取部件数量

const total = trackManager.partsCount();

删除部件

trackManager.deletePart(2); // Remove part 2

删除部件会移除其所有特征（控制点、线段、POI），并 重新编号 后续部件，以保持索引的连续性。
如果删除的是活动部件，edittrack 会自动切换到另一个可用部件。

拖拽切换行为

默认情况下，edittrack 允许您 从任意部件抓取要素，并在开始拖动时自动切换到该部件。这使得快速编辑直观：只需从部件 2 抓取一个点，edittrack 即切换上下文，以便您移动它。

要禁用此行为（例如，防止意外编辑非活动部件）：

trackManager.switchPartOnDrag = false;

将 switchPartOnDrag 设置为 false 后，拖动来自非活动部件的要素将被完全阻止，强制在部件之间保持严格隔离。

访问数据

熟悉的方法——getSegments()、getControlPoints() 和 getPOIs()——仅返回当前活动部件的数据。

如果需要一次性获取所有部件的数据，请使用 “all” 变体：

const allSegments      = trackManager.getAllSegments();      // Feature[][]
const allControlPoints = trackManager.getAllControlPoints(); // Feature[][]
const allPOIs          = trackManager.getAllPOIs();          // Feature[][]

每个方法返回一个嵌套数组：allSegments[0] 包含第 0 部件的段，allSegments[1] 包含第 1 部件的段，依此类推。

使用生成器遍历部件

for (const { index, trackData } of trackManager.partsGenerator()) {
  console.log(`Part ${index} has ${trackData.segments.length} segments`);
  // 处理 trackData.segments、trackData.controlPoints、trackData.pois
}

循环结束后，生成器会自动恢复原来的活动部件，因此你无需手动跟踪状态。

撤销 / 重做

撤销和重做现在会同时跟踪 功能和活动部件。当你执行撤销时，edittrack 不仅恢复之前的几何形状和点，还会恢复 你当时正在编辑的部件：

await trackManager.undo();
await trackManager.redo();

这意味着你可以切换部件、进行编辑、再次切换，然后通过撤销一步步回到整个序列的起点——edittrack 会记住每一步的活动部件。

为活动与非活动部分设置样式

为了帮助用户区分不同的部件，edittrack 会在每个要素上设置一个 active 属性。该布尔值指示要素是否属于 当前活动部件。你可以在样式定义中使用它：

const trackLineStyle = {
  "stroke-width": ["case", ["==", ["get", "active"], true], 4, 2],
  "stroke-color": ["case", ["==", ["get", "active"], true], "#ff6600", "#999999"]
};

const pointStyle = {
  "icon-size": ["case", ["==", ["get", "active"], true], 1.2, 0.8],
  "icon-color": ["case", ["==", ["get", "active"], true], "#ff6600", "#666666"]
};

活动部件显示为更粗、更亮，而非活动部件则呈现为暗淡的颜色，为用户提供明确的视觉反馈。

摘要

多行编辑 在 edittrack 2.0‑beta 版中为您提供以下能力：

创建在单个工作区内无限数量的独立部分。
切换在各部分之间无缝切换，以实现专注编辑。
可视化 将所有部分一起显示，同时保持各自隔离。
比较、实验、以及迭代多种路线选项而不失去上下文。

尝试一下，并告诉我们它如何改变您的路由工作流！

样式示例

const lineStyle = {
  "line-width": 6,
  "stroke-color": [
    "case",
    ["==", ["get", "active"], false],
    "#00883c80",  // 半透明绿色（用于非激活部分）
    "#00883cff"   // 不透明绿色（用于激活部分）
  ],
  "text-value": ["concat", "", ["get", "part"]], // 将部件编号显示为文本
  "text-fill-color": "#fff",
};

同样，控制点也可以使用条件样式：

const controlPointStyle = {
  "circle-fill-color": [
    "case",
    ["==", ["get", "active"], false],
    "#0071ec80",  // 半透明蓝色（用于非激活）
    "#0071ecff"   // 不透明蓝色（用于激活）
  ],
};

part 属性存储每个要素部件的数字索引（0、1、2，……）。在地图上将该数字显示为标签，可帮助用户跟踪各部件的对应关系，尤其是在处理大量部件时。

实时演示控制

Add a new line string – 创建一个新的空部件
Change active line string – 在现有部件之间循环
Delete active line string – 删除当前活动的部件

如何实验

在第 0 部分绘制路线，通过在地图上点击点来完成。
点击 “添加新线串” 以创建第 1 部分。
绘制第二条路线——注意第一条路线会变为半透明。
点击 “更改活动线串” 切换回第 0 部分并进行修改。
尝试将点从非活动部分拖动，观察自动切换的效果。

演示使用上面显示的条件样式，因此您会看到活动和非活动部分之间的明显视觉区别。

资源

Docs:
Demos: simple, schm
Source:
npm: @geoblocks/edittrack

许可证

BSD‑3‑Clause