MapBox जीएल js अक्षम नियंत्रण

वोट
1

वहाँ एक रास्ता छिपाने / हटाने या इस तरह के MapBox-जीएल-ड्रा से नियंत्रण के रूप में नियंत्रण को अक्षम करने के लिए है?

मैं इस प्रकार की बराबरी पर नियंत्रण जोड़ने

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

map.addControl(draw);

एक बार एक बहुभुज तैयार की है मैं अक्षम या नियंत्रण को छिपाना चाहते हैं, इसलिए अब एक और बहुभुज बनाने के लिए संभव है।

आपका बहुत बहुत धन्यवाद!

ग्रेगर

31/10/2016 को 18:57
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
1

नियंत्रण के लिए निकालें विधि नक्शा वस्तु के लिए बाध्य नहीं है, लेकिन आप को फोन करके उसे निकाल सकते हैं 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()
02/11/2016 को 13:46
का स्रोत उपयोगकर्ता

वोट
0

आप वास्तव में एक छोटे से डोम बातचीत के साथ ड्रा बटन (व्यक्तिगत या एक समूह के रूप में) निष्क्रिय कर सकते हैं। संक्षेप में, आप ड्रा मेनू (के लिए देशी CSS वर्ग पा सकते हैं 'mapbox-gl-draw_polygon', 'mapbox-gl-draw_point',, आदि) विकलांग प्रॉपर्टी जोड़ते हैं, और साथ 'अक्षम' / धूसर हो स्टाइल एक 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');
};
})
12/09/2019 को 20:21
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more