Het is met OpenLayers redelijk eenvoudig om OpenStreetMap als kaartlaag toe te voegen. Je maakt een nieuwe TileLayer aan en voegt daaraan OSM toe als bron. De standaardprojectie van OSM is EPSG:3857, het WGS84/Pseudo-Mercator coördinaatsysteem dat door bijna alle online map tools wordt gebruikt. Maar nu willen wij OpenStreetMap als laag toevoegen aan onze applicatie met Nederlandse kaartlagen. Dus in RD/EPSG:28992.
PROJ4JS
De herprojectie naar EPSG:28992 doen we met PROJ4JS. Dus we voegen via npm proj4 toe aan ons project
npm install proj4
en we importeren proj4 in onze module
import proj4 from 'proj4';
import {get as getProjection} from 'ol/proj';
Vervolgens voegen we de definitie van EPSG:28992 toe
proj4.defs(
'EPSG:28992',
'+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-1.8703473836068,4.0812 +no_defs'
);
en we bepalen de extent, het geografisch bereik, van de projectie. (De Tile Matrix Set voor het Rijksdriehoeksstelsel (Amersfoort / RD New)/ EPSG:28992, met als id NetherlandsRDNewQuad, is vastgesteld door Geonovum. Zie: TileMatrixSetRD.md.)
const RD_TILE_MATRIX_SET_EXTENT = [-285401.92, 22598.08, 595401.92, 903401.92];
Als laatste stap maken we deze niet-ingebouwde projectie, die nu gedefinieerd is met proj4, beschikbaar in OpenLayers:
register(proj4);
const RD_PROJECTION = getProjection('EPSG:28992');
RD_PROJECTION.setExtent(RD_TILE_MATRIX_SET_EXTENT);
Toepassen op OpenStreetMap
En nu kunnen we deze projectie als optie toepassen op onze OSM laag:
const openStreetMapLayer = new TileLayer({
title: 'OpenStreetMap',
type: 'base',
source: new OSM({
projection: RD_PROJECTION,
})
});
En, zie je dat: omdat we een bereik hebben meegegeven aan onze projectie, wordt de weergave van OpenStreetMap beperkt tot een ruim gebied rond Nederland. We zien een stuk Verenigd Koninkrijk, Frankrijk en Duitsland, een deel van Scandinavië, en België en Luxemburg natuurlijk. Maar niet meer. Daarmee wordt voorkomen dat de hele wereld geprojecteerd wordt in RD. Heb je dat weleens gezien? Het slaat nergens op, en het ziet er raar uit, zo'n verwrongen wereld...
Je kunt het gedefinieerde bereik ook nog toepassen op de View, zodat de gebruiker niet (per ongeluk of expres) buiten dit gebied kan zoomen of pannen.
Hiermee voeg je dus een extra basiskaart toe aan je applicatie.
Meer weten en/of zelf uitproberen?
Er is een volledig werkend voorbeeld - met broncode - beschikbaar waarin deze herprojectie van OpenStreetMap gedemonstreerd wordt:
- de broncode staat op Codeberg: osm-rd (in een repo met demo projecten)
- de viewer met het resultaat staat elders op deze site: OpenLayers demo - OpenStreetMap in RD