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.

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


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>

Imho con ol.layer.bindTo ( ol3js.org/en/master/apidoc/ol.layer.Vector.html#bindTo ) puede manejarlo aún más elegante.
errar el

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.