Разрешить рисование только одной фигуры одновременно с 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/]