Example of smooth tile transitions when changing the dimension of a WMTS layer.
Demonstrates smooth reloading of layers when changing a dimension continuously. The demonstration layer is a global sea-level computation (flooding computation from SCALGO, underlying data from CGIAR-CSI SRTM) where cells that are flooded if the sea-level rises to more than x m are colored blue. The user selects the sea-level dimension using a slider.
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {getTopLeft, getWidth} from 'ol/extent.js';
import TileLayer from 'ol/layer/Tile.js';
import {get as getProjection} from 'ol/proj.js';
import OSM from 'ol/source/OSM.js';
import WMTS from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
// create the WMTS tile grid in the google projection
const projection = getProjection('EPSG:3857');
const tileSizePixels = 256;
const tileSizeMtrs = getWidth(projection.getExtent()) / tileSizePixels;
const matrixIds = [];
const resolutions = [];
for (let i = 0; i <= 14; i++) {
matrixIds[i] = i;
resolutions[i] = tileSizeMtrs / Math.pow(2, i);
}
const tileGrid = new WMTSTileGrid({
origin: getTopLeft(projection.getExtent()),
resolutions: resolutions,
matrixIds: matrixIds,
});
const scalgoToken = 'CC5BF28A7D96B320C7DFBFD1236B5BEB';
const wmtsSource = new WMTS({
url: 'https://ts2.scalgo.com/olpatch/wmts?token=' + scalgoToken,
layer: 'SRTM_4_1:SRTM_4_1_flooded_sealevels',
format: 'image/png',
matrixSet: 'EPSG:3857',
attributions: [
'<a href="https://scalgo.com" target="_blank">SCALGO</a>',
'<a href="https://cgiarcsi.community/data/' +
'srtm-90m-digital-elevation-database-v4-1"' +
' target="_blank">CGIAR-CSI SRTM</a>',
],
tileGrid: tileGrid,
style: 'default',
dimensions: {
'threshold': 100,
},
});
const map = new Map({
target: 'map',
view: new View({
projection: projection,
center: [-9871995, 3566245],
zoom: 6,
}),
layers: [
new TileLayer({
source: new OSM(),
}),
new TileLayer({
opacity: 0.5,
source: wmtsSource,
}),
],
});
const slider = document.getElementById('slider');
const updateSourceDimension = function () {
wmtsSource.updateDimensions({'threshold': slider.value});
document.getElementById('theinfo').innerHTML = slider.value + ' meters';
};
slider.addEventListener('input', updateSourceDimension);
updateSourceDimension();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WMTS Tile Transitions</title>
<link rel="stylesheet" href="node_modules/ol/ol.css">
<style>
.map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<label>
Sea-level
<input id="slider" type="range" value="10" max="100" min="-1">
</label>
<span id="theinfo"></span>
<script type="module" src="main.js"></script>
</body>
</html>
{
"name": "wmts-dimensions",
"dependencies": {
"ol": "10.4.0"
},
"devDependencies": {
"vite": "^3.2.3"
},
"scripts": {
"start": "vite",
"build": "vite build"
}
}