Enkelt WMTS-kart
var projection = ol.proj.get('EPSG:32632');
//http://www.statkart.no/Kart/Gratis-kartdata/Cache-tjenester/
var extent = [-2000000, 3500000, 3545984, 9045984];
var matrixIds = new Array(18);
for (i = 0; i < 18; i = i + 1) {
matrixIds[i] = "EPSG:32632:" + i;
}
//http://wms.geonorge.no/kr/koordsys_res.txt
var resolutions = [
21664, 10832, 5416,
2708, 1354, 677,
338.5, 169.25, 84.625,
42.3125, 21.15625, 10.578125, 5.2890625,
2.64453125, 1.322265625, 0.6611328125,
0.33056640625, 0.165283203125
];
var attribution = new ol.Attribution({
'html': '<a href="http://kartverket.no">Kartverket</a>'
});
//http://opencache.statkart.no/gatekeeper/gk/gk.open_wmts?
//version=1.0.0&service=wmts&request=getcapabilities
var topo2 = new ol.layer.Tile({
extent: extent,
source: new ol.source.WMTS({
attributions: [attribution],
url: 'http://opencache.statkart.no/gatekeeper/gk/gk.open_wmts?',
layer: 'topo2',
matrixSet: 'EPSG:32632',
format: 'image/png',
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(extent),
resolutions: resolutions,
matrixIds: matrixIds
})
})
});
var map = new ol.Map({
layers: [topo2],
target: 'map',
view: new ol.View({
center: [596950, 6731800],
zoom: 16
})
});<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
<style>
#map {
height: 600px;
width: 600px;
}
</style>
<title>WMTS med topo2</title>
</head>
<body>
<div id="map"></div>
<script src="http://openlayers.org/en/v3.0.0/build/ol-debug.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js"></script>
<script src="http://epsg.io/32632.js" type="text/javascript"></script>
<script src="wmts-enkel.js" type="text/javascript"></script>
</body>
</html>
WMTS med knapper for å slå av og på lag
var ots = function() {
var i;
var projection = ol.proj.get('EPSG:32632');
//http://www.statkart.no/Kart/Gratis-kartdata/Cache-tjenester/
var extent = [-2000000, 3500000, 3545984, 9045984];
var kmlFiles = [
'OTS_Karidalen_3_3_km.kml',
'OTS_Karidalen_2_km.kml'
];
var kmlLayers = [];
for (i = 0; i < kmlFiles.length; i = i + 1) {
kmlLayers[i] = new ol.layer.Vector({
source: new ol.source.KML({
projection: projection,
url: kmlFiles[i],
}),
visible: false
});
}
var matrixIds = new Array(18);
for (i = 0; i < 18; i = i + 1) {
matrixIds[i] = "EPSG:32632:" + i;
}
//http://wms.geonorge.no/kr/koordsys_res.txt
var resolutions = [
21664, 10832, 5416,
2708, 1354, 677,
338.5, 169.25, 84.625,
42.3125, 21.15625, 10.578125, 5.2890625,
2.64453125, 1.322265625, 0.6611328125,
0.33056640625, 0.165283203125
];
var attribution = new ol.Attribution({
'html': '<a href="http://kartverket.no">Kartverket</a>'
});
//http://opencache.statkart.no/gatekeeper/gk/gk.open_wmts?
//Version=1.0.0&service=wmts&request=getcapabilities
var topo2 = new ol.layer.Tile({
extent: extent,
source: new ol.source.WMTS({
attributions: [attribution],
url: 'http://opencache.statkart.no/gatekeeper/gk/gk.open_wmts?',
layer: 'topo2',
matrixSet: 'EPSG:32632',
format: 'image/png',
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(extent),
resolutions: resolutions,
matrixIds: matrixIds
})
})
});
var map = new ol.Map({
layers: [topo2, kmlLayers[0], kmlLayers[1]],
target: 'map',
view: new ol.View({
center: [596950, 6731800],
zoom: 16
})
});
var toggleVisibility = function(layer) {
if (layer.getVisible()) {
layer.setVisible(false)
} else {
layer.setVisible(true)
};
};
var toggleTopo2 = function() {toggleVisibility(topo2)};
var toggle3_3km = function() {toggleVisibility(kmlLayers[0])};
var toggle2km = function() {toggleVisibility(kmlLayers[1])};
return {
toggleTopo2: toggleTopo2,
toggle3_3km: toggle3_3km,
toggle2km: toggle2km,
};
}();Avansert javascript-kode:
Her har jeg brukt et triks, kalt "The revealing module pattern" for å unngå at javascript-variablene blir globale. Trikset ligger i første og siste linje som gjør at hele denne fila blir "gjemt" inne i ots-variabelen. I tillegg så gjør return-setningen noen funksjoner tilgjengelig utenfor modulen. Se hvordan de er brukt i html-fila.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
<style>
#map {
height: 600px;
width: 800px;
margin: 20px;
}
</style>
<title>WMTS med KML og av/på-knapper for lag</title>
</head>
<body>
<div data-role="main" class="ui-content">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" id="topo2" class="ui-btn">Norgeskart</a>
<a href="#" id="3_3km" class="ui-btn">3,3 km</a>
<a href="#" id="2km" class="ui-btn">2 km</a>
</div>
</div>
<div id="map"></div>
<script src="http://openlayers.org/en/v3.0.0/build/ol-debug.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js"></script>
<script src="http://epsg.io/32632.js" type="text/javascript"></script>
<script src="buttons.js" type="text/javascript"></script>
<script>
$('#topo2').click(function() {ots.toggleTopo2()});
$('#3_3km').click(function() {ots.toggle3_3km()});
$('#2km').click(function() {ots.toggle2km()});
</script>
</body>
</html>
Her er javascript-biblioteket jQuery Mobile brukt for å få siden tilpasset bruk på mobiltelefoner og nettbrett.
Se kartet her >>>
Referanser
Kartverkets cache-tjenester:
kartverket.no/Kart/Gratis-kartdata/Cache-tjenester
WMTS-spesifikasjonen fra OGC/ISO:
www.opengeospatial.org/standards/wmts