Как использовать пользовательские кнопки HTML для вызова функции Mapbox GL JS Draw Polygon?

Question

Я пытаюсь создать собственный контроллер для карты, используя Mapbox GL JS, который включает в себя функцию рисования многоугольника. Но когда я sh включу рисование многоугольника в соответствии с документацией Mapbox, в правом верхнем углу экрана отображается меню.

Так выглядит каждый раз, когда я добавляю JS, показанный в https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/

Это код JS, который работает с документацией Mapbox GL JS предоставил

var draw = new MapboxDraw({
// Instead of showing all the draw tools, show only the line string and delete tools
displayControlsDefault: false,
controls: {
    line_string: true,
    polygon: true,
    point: true,
    trash: true
}

});


// Add the draw tool to the map
map.addControl(draw);

Я хочу создать пользовательскую кнопку, которая выполняет ту же функцию, позволяя мне рисовать на карте.

Я хочу использовать эту кнопку sh, и она должна открыть курсор рисования, аналогичный тому, когда я нажимаю на функцию рисования в их меню по умолчанию

Как мне поступить делать это?

Answer 1

Вы можете применить режим рисования, используя draw.changeMode ('draw_polygon'). Это вызовет то же событие, что и оригинальная кнопка. Поэтому вы можете избавиться от этого.

document.getElementById('button').onclick = function () {
    draw.changeMode('draw_polygon');

}