MapboxDraw draw_line_string模式下SHIFT键删除已绘顶点的异常修复

异常表现 #

在draw_line_string模式下按住SHIFT点击历史顶点时，目标旧顶点被删除的同时，会在当前点击位置额外生成一个新顶点，不符合仅删除旧顶点、后续可正常继续加顶点的预期。

异常根因 #

• 原有代码通过filter方法重新生成coordinates数组的写法，没有同步更新MapboxDraw内部LineString实例的状态缓存，造成实例记录的坐标数据和手动修改的数组不一致
• 删除顶点后，数组内后续元素的索引整体前移，但绘图状态中记录的currentVertexPosition游标值没有同步偏移，导致游标定位错位，触发内部默认逻辑在点击位置补写新顶点

核心修复逻辑 #

• 改用splice方法原位删除匹配到的目标顶点，替代整体重赋值coordinates数组的写法，避免实例状态缓存不一致
• 当删除的顶点索引小于等于当前游标位置时，同步将currentVertexPosition减1，修正游标偏移量

修复后完整代码 #

MapboxDraw.modes.draw_line_string.clickAnywhere = function (state, e) {
  if (e.originalEvent.shiftKey) {
    const line = state.line.coordinates;
    const lastClick = line[line.length - 1]
    const lastClickProject = map.project(lastClick)

    const res = line.map((i, index) => {
      const currentProject = map.project(i)
      const d = distance(lastClickProject, currentProject)
      return { index, distance: d };
    }).find(i => i.distance < 5 && i.distance > 0)

    if (res) {
      // 原位删除目标顶点
      state.line.coordinates.splice(res.index, 1)
      // 同步修正游标位置
      if (res.index <= state.currentVertexPosition) {
        state.currentVertexPosition = state.currentVertexPosition - 1
      }
    }
  } else {
    // 原有正常绘制顶点逻辑，保持不变
    if (state.currentVertexPosition > 0 && isEventAtCoordinates(e, state.line.coordinates[state.currentVertexPosition - 1]) ||
      state.direction === 'backwards' && isEventAtCoordinates(e, state.line.coordinates[state.currentVertexPosition + 1])) {
      return this.changeMode('simple_select', { featureIds: [state.line.id] });
    }
    this.updateUIClasses({ mouse: 'add' });
    state.line.updateCoordinate(state.currentVertexPosition, e.lngLat.lng, e.lngLat.lat);
    if (state.direction === 'forward') {
      state.currentVertexPosition++;
      state.line.updateCoordinate(state.currentVertexPosition, e.lngLat.lng, e.lngLat.lat);
    } else {
      state.line.addCoordinate(0, e.lngLat.lng, e.lngLat.lat);
    }
  }
};

交互调整提示 #

• 顶点匹配的5像素阈值可根据实际交互灵敏度调整，平衡删除准确率和误触概率
• 如需遵循MapboxDraw的实例方法规范，可替换splice操作调用state.line.removeCoordinate(res.index)，同步更新currentVertexPosition值即可，避免直接操作coordinates数组造成的实例状态不一致

内容的提问来源于stack exchange，提问作者SERG