Mapbox GL JS禁用控件

Question

有没有办法隐藏、移除或禁用像mapbox-gl-draw控件这样的控件？

我是这样添加绘图控件的：

    draw = mapboxgl.Draw({
    drawing: true,
    displayControlsDefault: false,
    controls: {
        polygon: true,
        trash: true
    }
});

map.addControl(draw);

绘制多边形后，我想要禁用或隐藏控件，从而无法再绘制另一个多边形。

非常感谢！

Gregor

- user3061553

Answer 1

你可以使用一些DOM操作来禁用绘制按钮（单独或整组）。简单来说，你需要找到绘制菜单的本地CSS类（如'mapbox-gl-draw_polygon'、'mapbox-gl-draw_point'等），添加disabled属性，并添加一个带有“disabled”/灰色样式的CSS类。示例在这里：https://jsfiddle.net/emLs72zj/9/

// HTML

<div id="map">

</div>
<button id="disable-draw">
Disable Draw Btns
</button>

<button id="enable-draw">
Enable Draw Btns
</button>


// CSS

body { margin:0; padding:0; overflow:hidden;}
#map { position:absolute; top:20px; bottom:0; width:100%; }

.disabled-button {
  -webkit-filter: opacity(.3) drop-shadow(0 0 0 #FFF);
  filter: opacity(.3) drop-shadow(0 0 0 #FFF);
  cursor: default !important;
}


// JS

mapboxgl.accessToken = 'pk.eyJ1IjoieXVuamllIiwiYSI6ImNpZnd0ZjZkczNjNHd0Mm0xcGRoc21nY28ifQ.8lFXo9aC9PfoKQF9ywWW-g';
var sfmapbox = [-122.413692, 37.775712];

// Create a new dark theme map
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location
  center: sfmapbox, // starting position
  zoom: 12, // starting zoom
  minZoom: 11,
});

map.on('load', function(){
        // create control
    var draw = mapboxgl.Draw({
        drawing: true,
        displayControlsDefault: false,
        controls: {
            polygon: true,
            trash: true
        }
    });
    // add control to map
    map.addControl(draw);

    var disableBtn = document.getElementById('disable-draw');
    var enableBtn = document.getElementById('enable-draw');

    var drawPolygon = document.getElementsByClassName('mapbox-gl-draw_polygon');

    disableBtn.onclick = (e) => {
        drawPolygon[0].disabled = true;
  drawPolygon[0].classList.add('disabled-button');
};

enableBtn.onclick = (e) => {
    drawPolygon[0].disabled = false;
  drawPolygon[0].classList.remove('disabled-button');
};
})

- Lauren

Answer 2

2020年，您应该使用以下代码：

mapboxDraw = new MapboxDraw({.... map.addControl(mapboxDraw);
map.removeControl(mapboxDraw);

- djdance

---

重要的是要考虑到 map.removeControl(mapboxDraw); 也会删除您绘制的任何多边形。因此，在可能需要像状态机一样控制事物的用例中，您可能希望保留绘制的多边形，但仅隐藏绘制控件。因此，这个答案可能并不适合所有人。 - Andre

Answer 3

控件的删除方法不是绑定在地图对象上的，但您可以通过在控件对象上调用remove()来删除它。https://jsfiddle.net/9o9mknqh/

// create control
var draw = mapboxgl.Draw({
    drawing: true,
    displayControlsDefault: false,
    controls: {
        polygon: true,
        trash: true
    }
});
// add control to map
map.addControl(draw);

// remove control from map
draw.remove()

- mollymerp

Answer 4

您可以始终像这样隐藏控件（如果这是您想要的）。

controls: {
        polygon: false, // true -> show, false -> hide
        trash: true
    }

在处理此控件后，您必须处理控件的更新方式。就像在React中，如果您为MapboxDraw创建自己的组件，则可以简单地更改参数并让其重新渲染。

- Kavinda Jayakody

Answer 5

有一个数组 map._controls: [mapboxgl.IControl]，所以你可以像这样移除所有的控件：

map._controls.forEach((control) => map.removeControl(control))

你可以通过 control.constructor.name 获取名称。

- webjay