OpenLayers 3 Katman Görünürlüğünü Ayarlama


9

Şeffaf katmanlardaki fantastik geçiş efektlerinden yararlanmak için Openlayers 2.12 haritamı Openlayers 3'e yükseltmeye çalışıyorum (OL2 ve Leaflet bir şey çekici bir şekilde yapamaz). Bu ve OL3 resmi olarak yayınlandığında sitelerimi yükseltmenin gerisinde kalmak istemiyorum. Geçerli sitemde (OL2.12) katman görünürlüğünü değiştirmek için basit bir HTML menüsündeki onay kutularını kullanıyorum. Her katmanı bir diziye itiyorum (Umarım OL3 artık otomatik olarak 'katmanlar' olarak adlandırılan katmanlar için bir dizi oluşturur) ve her onay kutusu bu işlevi çağırır (onay kutularına katmanlarının dizi numarasını temsil eden bir değer verilir ):

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

OL3'te bu artık çalışmaz ve katman görünürlüğünün nasıl ayarlanacağını gösteren hiçbir örnek veya belge bulamıyorum.

Yanıtlar:



8

Aragon, cevabın bana doğru yönü gösterdi. Aşağıda, bir diziye katman eklemek ve sonra bunları kontrol etmek için son kirli kodum var.

Javascript dosyasında haritayı başlattım ve görünürlüğü aşağıdaki gibi değiştirmek için bir işlev kullandım:

//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'de basit onay kutularını kullandım (poly1 geçiş örneği):

<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>

Ol.layer.bindTo ile Imho ( ol3js.org/tr/master/apidoc/ol.layer.Vector.html#bindTo ) daha zarif bir şekilde başa çıkabilirsiniz.
mistapink

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.