使用 Mapbox-GL-Draw 一次只允许绘制一个形状

Question

我正在使用 mapbox draw 绘制多边形。我希望它一次只能在屏幕上绘制一个多边形。例如，用户绘制了一个多边形，然后再次点击多边形绘制按钮，第一个多边形将被删除。我曾尝试使用 draw.modechange 来执行此操作，但在编码方式的某处存在错误。当我单击多边形绘制按钮时，现有的多边形被删除，但当我尝试绘制新的多边形时，什么也没有。

this.map.on('draw.modechange', (e) => {
        const data = draw.getAll(); 
        console.log(draw.getMode());
        if (draw.getMode() == 'draw_polygon') {
           if (data.features.length > 1) {
               draw.deleteAll();
           }                
        } 
    });

Answer 1

问题是mode改变的时候，增加了对应类型的template empty feature。然后你删除它的所有功能。所以有必要通过所有功能并检查模板空功能：

map.on('draw.modechange', (e) => {
  const data = Draw.getAll();
  if (Draw.getMode() == 'draw_polygon') {
    var pids = []

    // ID of the added template empty feature
    const lid = data.features[data.features.length - 1].id

    data.features.forEach((f) => {
      if (f.geometry.type === 'Polygon' && f.id !== lid) {
        pids.push(f.id)
      }
    })
    Draw.delete(pids)
  }
});

[http://jsfiddle.net/9kn1esdq/1/]

使用 Mapbox-GL-Draw 一次只允许绘制一个形状

Allow drawing only one shape at a time with Mapbox-GL-Draw

mapbox-gl-js

mapbox-gl-draw