OpenLayers La carte

Pour créer une carte basée sur OpenLayers :

centrée sur Paris : longitude 2.35, latitude 48.85
utilisant un élément HTML avec id="map"

Un élément HTML + chargement des librairies (CSS + JS)

<div id="map"></div>

<!-- OpenLayers -->
<link rel="stylesheet" href="https://unpkg.com/ol/ol.css">
<script src="https://unpkg.com/ol/dist/ol.js"></script>

En CSS, une hauteur à la carte

#map {
    height: 500px;
}

Initialisation d’une carte Openlayers

new ol.Map({
    target: 'map',
    view: new ol.View({
        center: ol.proj.fromLonLat([2.35, 48.85]),
        zoom: 13,
    }),
});

Ce que l’on note :

utilise des classes classiques (new ol.Map par exemple)
la vue est un objet de type ol.View
la projection par défaut est EPSG:3857, donc besoin de ol.proj.fromLonLat pour transformer des coordonnées. De plus, il est possible d’utiliser d’autres projections.
l’ordre des coordonnées est longitude/latitude

Info

Openlayers peut être modulaire, et donc ne télécharger que ce qui est utile (mais cela nécessite une étape de build). Les imports JS (import { Map } from 'ol') permettent alors d’utiliser les classes sans le préfixe ol. Les exemples de la documentation sont basés sur ce mécanisme.

Les projections#

Pour rappel, on manipule par défaut des coordonnées en EPSG:3857. Il est possible de modifier la projection de la vue, mais il faut alors faire attention au fond de carte, qui sera reprojeté.

Vue en EPSG:4326

new ol.Map({
    target: 'map',
    view: new ol.View({
        projection: 'EPSG:4326',
        center: ol.proj.fromLonLat([2.35, 48.85]),
        zoom: 13,
    }),
});

Plus simple, et depuis OpenLayers V6, on peut forcer l’utilisation de coordonnées géographiques pour l’ensemble des traitements (voir doc pour plus de détails) avec ol.proj.useGeographic()

Utilisation de coordonnées en 4326

ol.proj.useGeographic();

new ol.Map({
    target: 'map',
    view: new ol.View({
        center: [2.35, 48.85], // plus besoin de transformer
        zoom: 13,
    }),
});

Pour les autres cas, il faut donc transformer les coordonnées des objets que l’on manipule.

Transformation d’un point depuis et vers des coordonnées géographiques

// par défaut en EPSG:3857
ol.proj.fromLonLat([2.35, 48.85]);
ol.proj.toLonLat([261600.80336, 6249447.75279]);

// ou en choisissant une autre projection
ol.proj.fromLonLat([2.35, 48.85], 'EPSG:2154');

Transformation d’une géométrie

geom.transform("EPSG:xxxx", "EPSG:xxxx");

Lorsque l’on travaille avec des données GeoJSON (qui sont en EPSG:4326), une classe spécifique peut être utile :

Format GeoJSON

// récupération de l’objet format
let format = new ol.format.GeoJSON({ featureProjection: 'EPSG:3857' });

// lit les données
format.readFeature(geojson);
format.readGeometry(geojson.geometry);

// écrit les données
format.writeFeature(feature);
format.writeGeometry(feature.geometry);