El control de capas (layerswitcher) en un visor de mapas web es una herramienta muy útil para organizar las capas de nuestro visor por medio de un botón que nos permite activar y desactivarlas.
Matt Walker ha desarrollado una clase nueva (ol.control.LayerSwitcher) para añadir un control de capas en OpenLayers. Este plugin es compatible con las versiones de OpenLayers 3, 4, 5 y 6.
Antes de seguir adelante, si no lo has hecho aun, te recomendamos que leas el post cómo crear un mapa con OpenLayers, ya que sobre esa base podemos implementar el nuevo código para añadir el control de capas. Además también deberías saber cómo añadir capas base de OSM, Bing o Stamen en OpenLayers.
Pasos a seguir:
1. Ir a la página del repositorio GitHub del complemento: https://github.com/walkermatt/ol-layerswitcher
2. Nos descargamos el complemento haciendo clic sobre el botón Download ZIP:
4. Descomprimimos el archivo y lo colocamos en el directorio en el que se encuentre nuestro HTML.
5. Añadimos la librería JavaScript ol-layerswitcher.js y la hoja de estilos ol-layerswitcher.css en la cabecera de nuestro HTML junto con la librería de OpenLayers:
<!-- Openlayers --> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css"> <!-- ol3-layerswitcher --> <link rel="stylesheet" href="ol-layerswitcher-master/src/ol-layerswitcher.css" type="text/css"/> <script src="ol-layerswitcher-master/dist/ol-layerswitcher.js"></script>
6. Para poder utilizar este control es necesario tener en cuenta algunas consideraciones:
- Es necesario agrupar las capas en Grupos, por lo tanto es necesario utilizar la clase ol.layer.Group.
- Todas las capas deben tener la propiedad title (que será el texto que se muestre en el control de capas).
- En cada capa base la propiedad type se fijará como base.
Veamos como quedaría el código para las capas.
Primero creamos el objeto mapa, y dentro de la propiedad layer creamos el grupo, que incluirá las capas que deseemos:
var map = new ol.Map({
layers:
[new ol.layer.Group({
'title': 'Base maps',
layers: [
new ol.layer.Tile({
title: 'Water color',
type: 'base',
visible: false,
source: new ol.source.Stamen({
layer: 'watercolor'
})
})
...
En el código anterior vemos como la propiedad visible esta fijada como false, ya que solo una de las capas base debe tener la propiedad fijada como true, que será la que queremos mostrar cuando se inicie el mapa.
7. A continuación creamos otro grupo de capas para las capas superpuestas:
new ol.layer.Group({
title: 'Overlays',
layers: [
new ol.layer.Tile({
title: 'Countries',
source: new ol.source.TileWMS({
url: 'http://demo.opengeo.org/geoserver/wms',
params: {'LAYERS': 'ne:ne_10m_admin_1_states_provinces_lines_shp'},
serverType: 'geoserver'
})
})
]
})
8. Por último creamos un objeto layerSwitcher. Incluir la etiqueta es opcional y solo se muestra cuando se pasa el ratón por encima:
var layerSwitcher = new ol.control.LayerSwitcher({
tipLabel: 'Leyenda'
});
9. Añadimos el control al mapa:
map.addControl(layerSwitcher);
10. Si deseamos que el mapa se inicie con el control de capas desplegado podemos hacer uso del método showPanel. Para ello incluimos:
layerSwitcher.showPanel();
Listo.
El código completo es este (recuerda descargar el complemento y ubicarlo en la misma ruta que el html, de lo contrario no funcionará):
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset="LATIN1">
<head>
<title>Layerswitcher ol3</title>
<!-- Openlayers -->
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css">
<!-- ol3-layerswitcher -->
<link rel="stylesheet" href="ol-layerswitcher-master/src/ol-layerswitcher.css" type="text/css"/>
<script src="ol-layerswitcher-master/dist/ol-layerswitcher.js"></script>
<style>
#map{
position: absolute;
width: 100%;
height: 75%;
}
</style>
</head>
<body>
<h1> ol3-layerswitcher</h1>
<div id="map"></div>
<script>
var map = new ol.Map({
layers:
[new ol.layer.Group({
'title': 'Base maps',
layers: [
new ol.layer.Tile({
title: 'Water color',
type: 'base',
visible: false,
source: new ol.source.Stamen({
layer: 'watercolor'
})
}),
new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: false,
source: new ol.source.OSM()
}),
new ol.layer.Tile({
title: 'Satellite',
type: 'base',
visible: true,
source: new ol.source.MapQuest({layer: 'sat'})
})
]
}),
new ol.layer.Group({
title: 'Overlays',
layers: [
new ol.layer.Tile({
title: 'Countries',
source: new ol.source.TileWMS({
url: 'http://demo.opengeo.org/geoserver/wms',
params: {'LAYERS': 'ne:ne_10m_admin_1_states_provinces_lines_shp'},
serverType: 'geoserver'
})
})
]
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform([-4.72, 41.66], 'EPSG:4326', 'EPSG:3857'),
zoom: 7
})
});
var layerSwitcher = new ol.control.LayerSwitcher({
tipLabel: 'Leyenda'
});
map.addControl(layerSwitcher);
layerSwitcher.showPanel();
</script>
</body>
</html>
Más info:
Licenciado en Geografía. Máster en Sistemas de Información Geográfica. Consultor GIS desde el año 2004. En MappingGIS desde el año 2012 para ayudarte a impulsar tu perfil GIS y diferenciarte de la competencia. Echa un vistazo a todos nuestros cursos de SIG online.
Soy nueva en esto…
Las capas las obtengo «dinamicamente» con ajax según consultas con una api rest.
El usuario entra en un input la capa que quiere mostar, obtengo la capa en GEOJson desde consulta a la api y se debería actualizar en el mapa (mostrar la capa de la cual el usuario selecciono el nombre)… El mapa no se esta actualizando… siempre muestra la primera que se ingreso
Cualquier sugerencia… muchas gracias!!
disculpa como puedo agregar un collapsed porque quiero poner bastantes capas en varios grupos
Hola Ricardo, Para mostrar este control en forma colapsada, basta con eliminar la línea 75: layerSwitcher.showPanel(); Saludos!
Gracias, creo que no me di a entender, mi duda la siguiente; tengo varios grupos y quiero que se vean colapsados te lo dejo ejemplificado
grupoA
shp1
shp2
grupoB
shp3
shp4
y quiero que se muestre solo
+grupoA
+grupoB
gracias de ante mano
Hola Ricardo,
Creo que este plugin no te permite crear un árbol jeraquico. Échale un vistazo a este otro control: http://www.acuriousanimal.com/thebookofopenlayers3/chapter02_03_layer_groups.html Saludos!
¿Para añadir un track en formato .gpx con sus waypoints, añadiéndolo a la capa Overlays con el titulo Countrys.?
He intentado añadir tracks pero se me hace realmente complicado. Gracias!!
Hola deseo saber cómo hago para agregarle mi proyecto hecho en qgis.
Hola Pamela,
Para exportar un proyecto de QGIS a OpenLayers 3 puedes utilizar plugin Export to OpenLayers, en este tutorial te indicamos como utilizarlo.
Un Saludo!
Hola, quisiera saber como le agrego mis propias capas de geoJson.
Buenas tardes Miller,
Para añadir una capa en formato geojson debes utilizar la clase ol.layer.Vector y utilizar la fuente GeoJSON. Ejemplo:
var vector = new ol.layer.Vector({title: 'cities',
source: new ol.source.GeoJSON({
url: 'cities.json',
projection: 'EPSG:3857'
})
});
Un saludo!
Hola amigo, y por ejemplo, para seleccionar dentro de cities.json una sola ciudad?
Hola, Para realizar selecciones, en las propiedades del objeto map debemos añadir una propiedad nueva, la propiedad interaction:
var map = new ol.Map({
…
interactions: ol.interaction.defaults().extend([
new ol.interaction.Select()
])
});
Saludos!