A high-performance, feature-packed library for all your mapping needs.
Map er objektet som kobler sammen HTML-koden og javascript-koden. Map-objektet må ha en egenskap (property), target, som peker inn i HTML-koden via en id- eller class-attributt. Dette angir hvor på siden kartet skal plasseres. Kartets størrelse angis ved hjelp av CSS-kode.
<div id="map"></div>
<script>
const map = new ol.Map({target: 'map'});
</script>
Se nærmere beskrivelse av Map-objektet i API-dokumentasjonen, generell del, og i den detaljerte beskrivelsen av ol.Map.
Map-objektet må også inneholde informasjon om view (parallell til dataframe i ArcGIS), og layers.
Det er mange muligheter for å legge til egenskaper og funksjonalitet til Map-objektet. Se under options i beskrivelsen. Blant annet, så er knappene for zoom knyttet til Map-objektet via egne kontroll-objekter (controls). De viktigste kontrollene er satt opp som standard-kontroller.
Det finnes også et sett med standard-interaksjoner, som angir hva som skjer hvis man dobbeltklikker i kartet, f.eks. Se ol.interaction.defaults.
View-objektet har ansvar for hvordan kartet skal tegnes opp. View’et trenger derfor å ha informasjon om projeksjon, senter-koordinater, oppløsning og zoom.
Hvis projeksjon ikke er satt, vil standardprojeksjonen EPSG:3857 brukes (Web Mercator). NB: Dette er ikke det samme som standardprojeksjonen i ArcMap, som er EPSG:4326 .
View’et har en standard zoomFactor på 2. Det vil si at målestokken fordobles eller halveres for hvert klikk på en av zoom-knappene.
Målestokken avhenger av resolution-verdien. Den angir hvor mange meter (eller rettere, koordinatsystem-enheter) hver pixel dekker i virkeligheten/terrenget. Zoom-nivåene kan begrenses ved hjelp av maxResolution og minResolution, eller ved bruk av maxZoom og minZoom. Se nærmere beskrivelse av disse egenskapene under ol.View
map.setView(new ol.View({
center: [0, 0],
zoom: 2
}));
Source-objektet angir ulike tjeneste-baserte datakilder for kartet. Egenskapene for objektet er bl.a. URL for tjenesten og eventuelle parametre:
const osmSource = new ol.source.OSM();
A layer is a visual representation of data from a source. OpenLayers has three basic types of layers: ol.layer.Tile, ol.layer.Image and ol.layer.Vector.
Vi bruker ol.layer.Tile for WMS-kart. Den viktigste og som regel eneste egenskap som må settes på Layer-objektet er source. En egenskap som kan settes er extent. Den kan brukes til å begrense hvilket område kartet skal tegnes for. Den angir et rektangel som senter-koordinaten må være innenfor for at kartet skal tegnes opp.
const osmLayer = new ol.layer.Tile({source: osmSource});
map.addLayer(osmLayer);
const topo = new ol.layer.Tile({
extent: extentKartverketWMS25832,
source: new ol.source.TileWMS({
attributions: [attribution],
url: 'https://wms.geonorge.no/skwms1/wms.topo?',
params: {
'LAYERS': 'topo',
'STYLES': 'default'
},
})
});
Kode-eksemplet nedenfor er fra Quick Start-siden hos Open Layers, og tilpasset versjon 6.15.1.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
Kan du beskrive hva som er forskjellen på denne versjonen og den ovenfor?
<script>
const map = new ol.Map({});
const layer = new ol.layer.Tile({});
const source = new ol.source.OSM();
const view = new ol.View({});
map.setLayerGroup(layer);
map.setView(view);
map.setTarget('map');
layer.setSource(source);
view.setCenter([0, 0]);
view.setZoom(2);
</script>
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css"
type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
const extentKartverketWMS25832 = [234068, 6338450, 1351516, 8051673];
const projection = new ol.proj.Projection({
code: 'EPSG:25832',
extent: extentKartverketWMS25832
});
const topo = new ol.layer.Tile({
extent: extentKartverketWMS25832,
source: new ol.source.TileWMS({
url: 'https://wms.geonorge.no/skwms1/wms.topo?',
params: {
'LAYERS': 'topo',
'STYLES': 'default'
},
})
});
const map = new ol.Map({
layers: [topo],
target: 'map',
view: new ol.View({
projection: projection,
center: [591500, 6740500],
zoom: 12
})
});
</script>
</body>
</html>
NB: Ikke gå inn på dette før du har prøvd å løse oppgavene selv
NTNU 09.01.2021 Sverre Stikbakke
NTNU 10.02.2021 Lagt til løsningsforslag
NTNU 12.03.2025 Oppdatert OpenLayers-versjon