OpenLayers La carte
Pour créer une carte basée sur OpenLayers :
- centrée sur Paris : longitude
2.35
, latitude48.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);