Mapbox-gl-draw编辑GeoJSON线要素时拖拽顶点出现重复异常

架构老林

2026-10-4

故障根因

你代码中对同一份GeoJSON数据做了两次渲染：你自行添加了自定义图层渲染线要素，同时调用draw.add()将同一份数据加入MapboxDraw的内部管理队列，由MapboxDraw的内置图层二次渲染。拖拽顶点时MapboxDraw仅会更新自身管理的图层要素，你手动添加的静态图层不会同步变化，两个图层叠加就会产生顶点重复、出现三角形的视觉错误，手动绘制的线不会触发这个问题是因为手动绘制的要素仅由MapboxDraw单独渲染。

修复方案

1. 移除冗余的自定义图层

删除你自行添加的multiple-lines-source数据源和multiple-lines-layer图层，仅保留MapboxDraw相关逻辑即可：

map.on('load', function () {
  let draw = new MapboxDraw()
  map.addControl(draw)
  draw.add(geojson)
});

2. 自定义Draw渲染样式（可选）

如果需要调整线的颜色、宽度等样式，直接在初始化MapboxDraw时传入styles配置即可，无需额外添加图层：

let draw = new MapboxDraw({
  styles: [
    // 激活状态的线样式
    {
      id: 'gl-draw-line-active',
      type: 'line',
      filter: ['all', ['==', 'active', 'true'], ['==', '$type', 'LineString']],
      paint: {
        'line-color': '#3bb2d0',
        'line-width': 2
      }
    },
    // 非激活状态的线样式
    {
      id: 'gl-draw-line-inactive',
      type: 'line',
      filter: ['all', ['==', 'active', 'false'], ['==', '$type', 'LineString']],
      paint: {
        'line-color': '#3bb2d0',
        'line-width': 2
      }
    }
  ]
})