如何使用自定义 HTML 按钮调用 Mapbox GL JS 绘制多边形函数？

Question

我正在尝试使用 Mapbox GL JS 为地图构建自定义控制器，其中包括绘制多边形功能。但是，当我希望按照 Mapbox 文档包含“绘制多边形”时，它会在屏幕右上角显示一个菜单。

这就是每当我添加 https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/ 中显示的 JS 时的样子

这是 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);

我想构建一个自定义按钮，它具有与允许我在地图上绘制相同的功能。

我希望使用此按钮，它应该打开绘图光标，类似于我在默认菜单中单击绘图功能时

我该怎么做呢？

Answer 1

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

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

}