mapbox-gl-js - 允许使用 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

问题是当模式改变时，增加了一个对应类型的模板空特性。然后您将其与所有功能一起删除。因此有必要遍历所有特征并检查模板空特征：

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/ ]