如何使用自定义HTML按钮来调用Mapbox GL JS Draw Polygon函数？

Question

我正在尝试使用包含Draw多边形功能的Mapbox GL JS为地图构建自定义控制器。但是，当我希望根据Mapbox文档包括Draw多边形时，它会在屏幕右上方显示一个菜单。

This is how it looks whenever I add the JS shown in https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/

这是Mapbox GL JS文档提供的有效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);

我想建立一个自定义按钮，其功能与允许我绘制地图相同。

I wish to use this button and it should open the draw cursor similar to when I click on draw function in their default menu

我该怎么做？

Answer 1

您可以使用draw.changeMode（'draw_polygon'）应用绘图模式。这将触发与原始按钮相同的事件。因此，您可以摆脱它。

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

}