Aan de slag met ArcGIS JavaScript - Wijzigingen bijhouden
Watch
Het is mogelijk om met de ArcGIS API for JavaScript te reageren op een verandering in de eigenschap van een instance. Dit kun je doen door dergelijke wijzigingen bij te houden (of te bewaken) met de watch() method.
In het voorbeeld hieronder houden we op deze manier de schaal van de view in de gaten. Dit doen wij in dit voorbeeld om te bepalen welke basiskaart getoond moet worden. Op verzoek van de eindgebruikers tonen we bij een kleine schaal een rustige basiskaart (Topo RD van Esri Nederland), terwijl we op grote schaal een basiskaart met meer detail laten zien (Open Topo van Jan-Willem van Aalst, die ook door Esri Nederland wordt aangeboden). De grens voor het wisselen van de basiskaart is gelegd bij schaal 1:20.000.
Dus elke keer als de gebruiker in- of uitzoomt wordt de schaal gecheckt, en zodra de schaal groter is dan 1:20:000 wordt de Open Topo basiskaart getoond. (Let op: scale geeft het schaalgetal terug, en hoe groter het schaalgetal, hoe kleiner de schaal! Dus zodra het schaalgetal groter is dan 20.000 wordt de Topo RD basiskaart getoond.)
De volledige code staat hieronder en hier kun je het voorbeeld in actie zien.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Aan de slag met ArcGIS JavaScript - Wijzigingen bijhouden</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"esri/Basemap",
"esri/geometry/Point",
"esri/views/MapView"
], function(Map, Basemap, Point, MapView) {
var topo_RD_EsriNL = new Basemap({portalItem: {id: "7aea6fa913a94176a1074edb40690318"}}); //Topo RD
var open_Topo_RD_EsriNL = new Basemap({portalItem: {id: "0698b71eb7cf47898086d072e574ac32"}}); //Open Topo RD
var map = new Map({
basemap: topo_RD_EsriNL
});
var rdOrigin = new Point({
x: 155000,
y: 463000,
spatialReference: 28992
});
var view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: rdOrigin,
zoom: 3
});
// watch handler: the callback fires each time the scale of the view changes
var handle = view.watch('scale', function(newScale) {
console.log("Scale: ", newScale);
console.log("Basemap: ", map.basemap.title);
if (newScale > 20000) {
map.basemap = topo_RD_EsriNL;
} else {
map.basemap = open_Topo_RD_EsriNL;
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>