Cómo añadir capas de OSM, Stamen y Bing en OpenLayers

por

Si quieres realizar un mapa con OpenLayers lo primero que se te pasará por la cabeza es qué capa base utilizar. Ahora que ya sabes cómo crear un mapa sencillo con OpenLayers vamos a continuar adaptándolo a nuestro gusto.

OpenLayers nos permite incluir varias capas base. En este tutorial vamos a explicar que código debes utilizar para mostrar capas de OSM, Stamen y Bing en OpenLayers.

Añadir OSM en OpenLayers

Para añadir las capas de OpenStreetMap debemos utilizar la clase ol.source.OSM. Por lo tanto en el momento de añadir las capas deberemos introducir este código:

var layers = [
  new ol.layer.Tile({
    source: new ol.source.OSM()
  })
];

ol3_osm

Añadir capas de Stamen en OpenLayers

Para añadir las capas de Stamen debemos utilizar la clase ol.source.Stamen. Por lo tanto en el momento de añadir las capas deberemos introducir este código:

var layers = [
  new ol.layer.Tile({
     source: new ol.source.Stamen({
           layer: 'watercolor'
     })
  }),
];

Es interesante conocer cómo añadir los mapas de Stamen, porque son visualmente muy atractivos. Los valores de layer disponibles son:

  • terrain
  • watercolor
  • toner

Añadir la capa de carreteras de Bing en OpenLayers

Para añadir las capas de Bing debemos utilizar la clase ol.source.BingMaps con las propiedades key e imagerySet: ‘road’.

var layers = [
  new ol.layer.Tile({
      source: new ol.source.BingMaps({
         key: 'API key',
         imagerySet:'Road'})
  })
];

ol3_Bing_roads

Combinación de imagen de satélite y etiquetas de Bing en OpenLayers

Para añadir las capas de Bing debemos utilizar la clase ol.source.BingMaps con las propiedades key e imagerySet: ‘AerialWithLabels’.

var layers = [
  new ol.layer.Tile({
      source: new ol.source.BingMaps({
         key: 'API key',
         imagerySet:'AerialWithLabels'})
  })
];

ol3_Bing_Aerial_With_Labels

Como hemos visto los mapas de Bing admiten diversos estilos:

  • ‘Road’,
  • ‘Aerial’,
  • ‘AerialWithLabels’,
  • ‘collinsBart’,
  • ‘ordnanceSurvey’
ol3_Bing_collinsBart
imagerySet: ‘collinsBart’
ol3_Bing_ordnanceSurvey
imagerySet: ‘ordnanceSurvey’
Hay que tener en cuenta que debido a la política de restricciones del mismo origen ( Same-origin policy) no es posible abrir una aplicación webmapping basada en JavaScript accediendo desde una ubicación local (file://), debe estar accesible desde un servidor web.

6 comentarios en «Cómo añadir capas de OSM, Stamen y Bing en OpenLayers»

  1. Hola, agradecido con este gran aporte. Podria apoyarme con la Combinación de imagen de satélite y etiquetas de Bing en OpenLayers, lo agrege a mi pagina pero no lo muestra. Espero tu respuesta y muchas gracias.

    • Hola David,
      Para incluir dicha combinación debes incluir el siguiente código:

      var layerBing = new ol.layer.Tile({
      source: new ol.source.BingMaps({
      key: 'tupropiaclave',
      imagerySet:'AerialWithLabels'})
      });

      Saludos!

  2. Muchas gracias por tu aporte, podrias poner un ejmplo de Routing con OL3 y Mapquest? este artículo está excelente.

    Gracias

  3. Hola, buen tuto !! Necesito añadir una capa personalizada a mi mapa, pero no se como hacerlo desde el código javascript. Creo que se dice capa superpuesta. Espero tu respuesta y gracias !! 🙂

Los comentarios están cerrados.