Impostazione della visibilità a 3 strati di OpenLayers


9

Sto cercando di aggiornare la mia mappa di Openlayers 2.12 a Openlayers 3 per sfruttare i fantastici effetti di transizione su livelli trasparenti (qualcosa che OL2 e Leaflet non possono fare in modo attraente). Questo e non voglio rimanere indietro rispetto all'aggiornamento dei miei siti quando OL3 viene rilasciato ufficialmente. Nel mio sito attuale (OL2.12) uso caselle di controllo in un semplice menu HTML per attivare / disattivare la visibilità dei livelli. Spingo ogni layer in un array (spero di pensare che OL3 ora generi automaticamente un array per i layer chiamati 'layer') e ogni casella di controllo chiama questa funzione (alle caselle di controllo viene assegnato un valore che è rappresentativo del loro numero di array di livelli ):

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

In OL3 non funziona più e non riesco a trovare alcun esempio o documentazione che descriva in dettaglio come impostare la visibilità dei layer.

Risposte:


4

puoi trovare maggiori informazioni qui nella sezione proprietà.

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

ed esempio live nell'esempio del gruppo Layer .

OL3


1
Sfortunatamente, quei collegamenti sono morti.
Auspex,

8

Aragona, la tua risposta mi ha indicato la giusta direzione. Di seguito è riportato il mio codice impuro finale per l'aggiunta di livelli a un array e il controllo.

In un file javascript ho inizializzato la mappa e usato una funzione per attivare la visibilità come segue:

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

Nell'HTML ho usato semplici caselle di controllo (esempio di poly1 toggle):

<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 con ol.layer.bindTo ( ol3js.org/en/master/apidoc/ol.layer.Vector.html#bindTo ) puoi gestirlo ancora più elegante.
mistapink,

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.