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');
});