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

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

https://i.stack.imgur.com/G3LbS.png

Это код 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);

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

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

Как я могу это сделать?


javascript html css mapbox mapbox-gl-js
person escigs    schedule 17.02.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

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

}
person botivegh    schedule 23.04.2020