Festlegen der Sichtbarkeit von OpenLayers 3-Ebenen

9

Ich versuche, meine Openlayers 2.12-Karte auf Openlayers 3 zu aktualisieren, um die fantastischen Übergangseffekte auf transparenten Ebenen zu nutzen (etwas, das OL2 und Leaflet nicht attraktiv machen können). Dies und ich möchten nicht hinter dem Upgrade meiner Websites zurückbleiben, wenn OL3 offiziell veröffentlicht wird. In meiner aktuellen Site (OL2.12) verwende ich Kontrollkästchen in einem einfachen HTML-Menü, um die Sichtbarkeit von Ebenen umzuschalten. Ich schiebe jede Ebene auf ein Array (ich hoffe, ich denke, OL3 generiert jetzt automatisch ein Array für die Ebenen, die als "Ebenen" bezeichnet werden), und jedes Kontrollkästchen ruft diese Funktion auf (Kontrollkästchen erhalten einen Wert, der für die Array-Nummer ihrer Ebenen repräsentativ ist ):

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

In OL3 funktioniert dies nicht mehr und ich kann keine Beispiele oder Dokumentationen finden, die detailliert beschreiben, wie die Sichtbarkeit von Ebenen festgelegt wird.

Phill
quelle

Antworten:

4

Weitere Informationen finden Sie hier im Abschnitt Eigenschaften.

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

und Live-Beispiel im Beispiel einer Ebenengruppe .

ol3

Aragon
quelle
1
Leider sind diese Links tot.
Auspex
8

Aragon, deine Antwort hat mich in die richtige Richtung gelenkt. Unten ist mein endgültiger unreiner Code zum Hinzufügen von Ebenen zu einem Array und zum anschließenden Steuern.

In einer Javascript-Datei habe ich die Karte initialisiert und eine Funktion verwendet, um die Sichtbarkeit wie folgt umzuschalten:

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

Im HTML habe ich einfache Kontrollkästchen verwendet (Beispiel für 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>
Phill
quelle
Imho mit ol.layer.bindTo ( ol3js.org/en/master/apidoc/ol.layer.Vector.html#bindTo ) können Sie noch eleganter damit umgehen.
Mistapink