ओपनलेयर्स 3 लेयर विजिबिलिटी सेट करना


9

मैं अपने Openlayers 2.12 मानचित्र को Openlayers 3 में अपग्रेड करने की कोशिश कर रहा हूं ताकि पारदर्शी परतों पर शानदार संक्रमण प्रभावों का लाभ उठाया जा सके (कुछ OL2 और USC आकर्षक रूप से नहीं कर सकते)। जब ओएल 3 आधिकारिक तौर पर जारी किया जाता है तो यह और मैं अपनी साइटों को अपग्रेड करने में पीछे नहीं रहना चाहता। मेरी वर्तमान साइट (OL2.12) में मैं लेयर दृश्यता को टॉगल करने के लिए एक साधारण HTML मेनू में चेक बॉक्स का उपयोग करता हूं। मैं प्रत्येक परत को एक सरणी में धकेलता हूं (मुझे आशा है कि मैं सोचने में सही हूं ओएल 3 अब स्वचालित रूप से परतों के लिए एक सरणी बनाता है जिसे 'लेयर्स' कहा जाता है) और प्रत्येक चेकबॉक्स इस फ़ंक्शन को कॉल करता है (चेकबॉक्स को एक मान दिया जाता है जो उनकी परतों की संख्या संख्या का प्रतिनिधि है। ):

function layerswitch(evt){
    layers[evt.value].setVisibility(evt.checked);
}

OL3 में यह अब काम नहीं करता है, और मुझे कोई भी उदाहरण या प्रलेखन नहीं मिला है जो यह बताता है कि परत की दृश्यता कैसे निर्धारित करें।

जवाबों:



8

आरागॉन, आपके उत्तर ने मुझे सही दिशा में इशारा किया। नीचे एक सरणी में परतों को जोड़ने और फिर उन्हें नियंत्रित करने के लिए मेरा अंतिम अशुद्ध कोड है।

एक जावास्क्रिप्ट फ़ाइल में मैंने मैप को इनिशियलाइज़ किया और निम्नानुसार दृश्यता को टॉगल करने के लिए एक फंक्शन का उपयोग किया:

//Layer array
var layersArray = [];

//Map view (Initial location)
var view = new ol.View2D({
// the view's initial state
center: ol.proj.transform([*Lat*,*Long*], 'EPSG:4326', 'EPSG:3857'),
zoom: 12
});

/*  Map Initialization  */
function initializeMap(){

var esribase = new ol.layer.Tile({
preload: Infinity,
  source: new ol.source.XYZ({
    url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
        'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
  })
});

var poly1 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly1.setVisible(false);

var poly2 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly2.setVisible(false);

var poly3 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly3.setVisible(false);

layersArray.push(esribase); //0
layersArray.push(poly1); //1
layersArray.push(poly2); //2
layersArray.push(poly3);//3

var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({
  units: ol.control.ScaleLineUnits.METRIC
})
]),
renderer: ol.RendererHint.CANVAS,
target: 'map',
layers: layersArray,

view:view
});
}

// Layer visibility function
function layerswitch(evt){
layersArray[evt.value].setVisible(evt.checked);
}

HTML में मैंने साधारण चेकबॉक्स (पॉली 1 टॉगल का उदाहरण) का उपयोग किया है:

<input  style='cursor:pointer' type="checkbox" value="1" onclick="javascript:layerswitch(this)" class="Cpoly1" name="poly1check" id="poly1check"/><label id="poly1checkLabel" for="poly1check">Polygon 1 Layer Switcher</label>

Imho with ol.layer.bindTo ( ol3js.org/en/master/apidoc/ol.layer.Vector.html#bindTo ) आप इसे और भी सुंदर तरीके से संभाल सकते हैं।
१२:२१

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.