Configuración de OpenLayers 3 Layer Visibility

9

Estoy tratando de actualizar mi mapa Openlayers 2.12 a Openlayers 3 para aprovechar los fantásticos efectos de transición en capas transparentes (algo que OL2 y Leaflet no pueden hacer de manera atractiva). Esto y no quiero retrasarme en la actualización de mis sitios cuando se lanza oficialmente OL3. En mi sitio actual (OL2.12) utilizo casillas de verificación en un menú HTML simple para alternar la visibilidad de la capa. Empujo cada capa a una matriz (espero tener razón al pensar que OL3 ahora genera automáticamente una matriz para las capas llamadas 'capas') y cada casilla de verificación llama a esta función (las casillas de verificación reciben un valor que es representativo del número de matriz de sus capas ):

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

En OL3 esto ya no funciona, y no puedo encontrar ningún ejemplo o documentación que detalle cómo configurar la visibilidad de la capa.

Phill
fuente

Respuestas:

4

Puede encontrar más información aquí en la sección de propiedades.

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

y ejemplo en vivo en el ejemplo de grupo de capas .

ol3

Aragón
fuente
1
Desafortunadamente, esos enlaces están muertos.
Auspex
8

Aragón, tu respuesta me señaló en la dirección correcta. A continuación se muestra mi código sucio final para agregar capas a una matriz y luego controlarlas.

En un archivo javascript inicialicé el mapa y usé una función para alternar la visibilidad de la siguiente manera:

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

En el HTML utilicé casillas de verificación simples (ejemplo de alternar 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
fuente
Imho con ol.layer.bindTo ( ol3js.org/en/master/apidoc/ol.layer.Vector.html#bindTo ) puede manejarlo aún más elegante.
errar el