mapbox gl js禁用控件

Posted 2023-02-16

【中文标题】mapbox gl js禁用控件

【英文标题】：mapbox gl js disable controls

【发布时间】：2017-03-14 00:36:14

【问题描述】：

有没有办法隐藏/删除或禁用控件，例如 mapbox-gl-draw 中的控件？

我添加绘图控件如下

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

map.addControl(draw);

一旦绘制了一个多边形，我想禁用或隐藏控件，因此不再可能绘制另一个多边形。

非常感谢！

格雷戈

【参考方案1】：

您实际上可以通过一点 DOM 交互来禁用绘制按钮（单独或作为一组）。简而言之，您可以找到绘制菜单的原生 CSS 类（'mapbox-gl-draw_polygon'、'mapbox-gl-draw_point' 等），添加 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');
;
)

【参考方案2】：

目前你应该在 2020 年使用

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

【讨论】：

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

【参考方案3】：

控件的remove方法没有绑定到map对象，但是你可以通过在控件对象上调用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()