OpenLayers facilita la incorporación de un mapa dinámico en cualquier página web. Puede mostrar mosaicos de mapas, datos vectoriales y marcadores cargados desde cualquier fuente. OpenLayers ha sido desarrollado para promover el uso de información geográfica de todo tipo.

OpenLayer es compatible con Proj4js (es una librería para transformar coordenadas de puntos de un sistema de coordenadas a otro).

¿Qué es OpenLayers?

• Librería open source para construir mapas interactivos en la web.
• Contiene diferentes tipos de datos geoespaciales (rastes y vectoriales).

Ventajas de usar OpenLayers

• Es uno de las librerías más populares.
• Esta librería es reconocida y apoyada por la Open Source Geospatial Foundation (OSGeo).

Entorno de Desarrollo

📘 Documentación

Primer Mapa

Un ejemplo sencillo para crear un mapa sería el siguiente:

import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

📘 Documentación   🚀 CodePen

Map

Map: Es el componente central de Openlayer ( ol / Map ), se representa en un contenedor (normalmente en un div). Para poder representar un mapa es necesario:

• target: Este elemento hace referencia al contenedor del mapa (HTML). Se hace referencia al id del elemento o el propio elemento.
  ℹ️ Si no se pasa por el constructor es necesario llamar a setTarget para poder representar el mapa.

• layers: A la representación de un mapa se le llama capa (layer). Sería como el lienzo que se quiere representar, la imagen. Estas pueden ser superpuestas para formar mapas más complejos.

• view: Parámetros que definirá como se mostrará el mapa, como el centro, el zoom, etc.