Cómo añadir un control de capas en OpenLayers

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:

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:

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:

8. Por último creamos un objeto layerSwitcher. Incluir la etiqueta es opcional y solo se muestra cuando se pasa el ratón por encima:

9. Añadimos el control al mapa:

10. Si deseamos que el mapa se inicie con el control de capas desplegado podemos hacer uso del método showPanel. Para ello incluimos:

Listo.

control de capas en openlayers 3

El código completo es este (recuerda descargar el complemento y ubicarlo en la misma ruta que el html, de lo contrario no funcionará):

Más info:

Let’s connect!

Date de alta en nuestro newsletter
y recibe este ebook gratuito

Y una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos

12 comentarios en “Cómo añadir un control de capas en OpenLayers”

  1. 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!!

  2. ¿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!!

    • 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, 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!

Los comentarios están cerrados.