Mengatur OpenLayers 3 Layer Visibility

9

Saya mencoba untuk meningkatkan peta Openlayers 2.12 saya ke Openlayers 3 untuk memanfaatkan efek transisi yang fantastis pada lapisan transparan (Sesuatu OL2 dan Leaflet tidak dapat melakukan hal yang menarik). Ini dan saya tidak ingin ketinggalan meningkatkan situs saya ketika OL3 secara resmi dirilis. Di situs saya saat ini (OL2.12) saya menggunakan kotak centang di menu HTML sederhana untuk beralih visibilitas lapisan. Saya mendorong setiap lapisan ke array (saya harap saya benar dalam berpikir OL3 sekarang secara otomatis menghasilkan array untuk lapisan yang disebut 'lapisan') dan setiap kotak centang memanggil fungsi ini (kotak centang diberi nilai yang mewakili jumlah lapisan lapisan mereka) ):

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

Di OL3 ini tidak lagi berfungsi, dan saya tidak dapat menemukan contoh atau dokumentasi yang merinci cara mengatur visibilitas lapisan.

Phill
sumber

Jawaban:

4

Anda dapat menemukan informasi lebih lanjut di sini di bawah bagian properti.

visible     boolean | undefined     Visibility. Default is true (visible).

dan contoh hidup dalam contoh grup Layer .

ol3

Aragon
sumber
1
Sayangnya, tautan itu sudah mati.
Auspex
8

Aragon, jawaban Anda menunjuk saya ke arah yang benar. Di bawah ini adalah kode najis terakhir saya untuk menambahkan lapisan ke array dan kemudian mengendalikannya.

Dalam file javascript saya menginisialisasi peta dan menggunakan fungsi untuk mengaktifkan visibilitas sebagai berikut:

//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);
}

Dalam HTML saya menggunakan kotak centang sederhana (contoh toggle poly1):

<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>
Phill
sumber
Saya juga dengan ol.layer.bindTo ( ol3js.org/en/master/apidoc/ol.layer.Vector.html#bindTo ) Anda dapat menanganinya dengan lebih elegan.
mistapink