OpenLayers snippets

OpenLayers es una biblioteca de código abierto que permite integrar mapas en una aplicación web.

A continuación te presento algunos ejemplos de código que pueden ser útiles:

  • Para incluir OpenLayers en una página web, primero debes incluir una referencia a la biblioteca en el <head> de tu página HTML:
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
  • Luego, para crear un mapa básico, puedes usar el siguiente código:
    // Se crea una nueva instancia de la clase Map de OpenLayers
    var map = new ol.Map({
      // Se especifica el elemento HTML donde se mostrará el mapa
      target: 'map',
      // Se especifican las capas que se mostrarán en el mapa
      layers: [
        // Capa del servicio de mapas base OpenStreetMap
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      // Se especifica la vista inicial del mapa
      view: new ol.View({
        // Se centra el mapa en las coordenadas especificadas
        center: ol.proj.fromLonLat([-0.92, 52.96]),
        // Se establece el nivel de zoom inicial del mapa
        zoom: 6
      })
    });
    
    • Para añadir un marcador en una posición determinada en el mapa, puedes usar el siguiente código:
    // Se crea una nueva instancia de la clase Feature de OpenLayers
    var marker = new ol.Feature({
      // Se especifican las coordenadas del marcador
      geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.92, 52.96]))
    });
    
    // Se crea una nueva capa para mostrar el marcador en el mapa
    var vectorLayer = new ol.layer.Vector({
      // Se añade el marcador a la capa
      source: new ol.source.Vector({
        features: [marker]
      })
    });
    
    // Se añade la capa al mapa
    map.addLayer(vectorLayer);
    

    Este código crea una nueva capa en el mapa, añade un marcador a la capa y luego agrega la capa al mapa. También puedes personalizar el aspecto del marcador usando una imagen diferente o cambiando el tamaño o el color.

    • Para dibujar una polilínea en el mapa, puedes usar el siguiente código:
    // Se crea una nueva instancia de la clase Feature de OpenLayers
    var line = new ol.Feature({
      // Se especifican las coordenadas de la línea
      geometry: new ol.geom.LineString([
        ol.proj.fromLonLat([-0.92, 52.96]),
        ol.proj.fromLonLat([-2.07, 53.01]),
        ol.proj.fromLonLat([-3.05, 53.68])
      ])
    });
    
    // Se crea una nueva capa para mostrar la línea en el mapa
    var vectorLayer = new ol.layer.Vector({
      // Se añade la línea a la capa
      source: new ol.source.Vector({
        features: [line]
      })
    });
    
    // Se añade la capa al mapa
    map.addLayer(vectorLayer);
    
    • Para detectar cuando el cursor sale del mapa
     this.olMap.getViewport().addEventListener('mouseout', (event) => {
          console.info('out');
        }, false);
    
    • Para detectar cuando el cursor entra en el mapa
    this.olMap.on('pointermove', (event) => {
          console.info('in');
        });
    
    👉  Cómo saber qué versión de Node.js tengo instalada: 32 ó 64 bits

    👇Tu comentario