Aan de slag met ArcGIS JavaScript - Toon cursorlocatie

Egge-Jan_Pollé · ‎05-12-2019

pointer-move event

In een eerdere oefening hebben we een web applicatie gemaakt met een Nederlandse basiskaart. geprojecteerd in het Nederlandse coördinaatsysteem, het RD-stelsel.

Het doel van de oefening hier is om de muisbeweging te volgen en de coördinaten van de cursorlocatie op het scherm te tonen.

Dit doen we door een pointer-move event handler in te stellen op de MapView en de X- en Y-coördinaten die we terugkrijgen uit te lezen.

dojo/dom

In deze applicatie maken we gebruik van de dojo/dom module uit de Dojo Toolkit, die onder water door de ArcGIS API for JavaScript gebruikt wordt. Dit stelt ons in staat om DOM-elementen aan de hand van hun ID ("byId") te benaderen om de X- en Y-waarden te actualiseren.

In eerste instantie vullen we de X- en Y-coördinaten met de waarden van het center van de kaart, omdat er dan immers per definitie nog geen muisbeweging heeft plaatsgevonden.

De volleidge broncode van de web applicatie staat hieronder. Deze kun je naar een text editor kopiëren (bijvoorbeeld Notepad++) om er vervolgens zelf mee te experimenteren.

Let op:

Het Nederlandse RD-stelsel is alleen geldig voor het Nederlandse grondgebied. De basiskaart die we gebruiken laat echter ook delen van omringende landen zien.

Om geen incorrecte RD-coördinaten te laten zien, lezen we de X en de Y alleen uit als de X tussen de 10 en 290 kilometer ligt èn de Y tussen de 300 en 620 kilometer. Zo niet, dan tonen we de waarde "Niet van toepassing".

Klik hier om de applicatie in actie te zien.

Broncode

<!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 - Toon cursorlocatie</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    #coordinates {
      padding: 15px;
      background: white;
      color: black;
	  border: black;
	  font-family: sans-serif;
	  font-size: 1.2em;
    }
  </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/geometry/Point",
        "esri/views/MapView",
        "dojo/dom",
        "dojo/domReady!"
      ], function(Map, Point, MapView, dom) {

      var map = new Map({
        basemap: {
          portalItem: {
            id: "7aea6fa913a94176a1074edb40690318" // Basiskaart van Esri Nederland: Topo RD
          }
        }
      });
      
	  var rdOrigin = new Point({
	    x: 155000,
	    y: 463000,
	    spatialReference: 28992
	  });
      
	  var view = new MapView({
	    spatialReference: 28992, 
	    container: "viewDiv",
	    map: map,
	    center: rdOrigin,
	    zoom: 3
	  });
	  
	  // Voeg de div met de coördinaten toe aan het kaartscherm
	  view.ui.add("coordinates", "bottom-left");

      // Vul in eerste instantie de coördinaten van het center van de kaart in, afgerond op millimeters
	  // en opgemaakt met scheidingstekens voor decimalen en duizendtallen
	  dom.byId("rdxcoord").innerHTML = "X = " + view.center.x.toLocaleString(undefined, {minimumFractionDigits: 3, maximumFractionDigits: 3}) + " m";
	  dom.byId("rdycoord").innerHTML = "Y = " + view.center.y.toLocaleString(undefined, {minimumFractionDigits: 3, maximumFractionDigits: 3}) + " m";

      function showCoordinates(evt) {
        var point = view.toMap({x: evt.x, y: evt.y});
        // Toon de RD-coördinaten als dat relevant is
		// Het Nederlandse RD-stelsel is alleen geldig voor het Nederlandse grondgebied, dus als de cursor te ver buiten Nederland komt,
		// dan zijn RD-coördinaten "Niet van toepassing". Daarbij gelden de volgende grenswaarden voor de X- en de Y-coördinaten:
		if ( point.x < 10000 || point.x > 290000 || point.y < 300000 || point.y > 620000) {
          dom.byId("rdxcoord").innerHTML = "X = Niet van toepassing";
          dom.byId("rdycoord").innerHTML = "Y = Niet van toepassing";
		} else {
          dom.byId("rdxcoord").innerHTML = "X = " + point.x.toLocaleString(undefined, {minimumFractionDigits: 3, maximumFractionDigits: 3}) + " m";
          dom.byId("rdycoord").innerHTML = "Y = " + point.y.toLocaleString(undefined, {minimumFractionDigits: 3, maximumFractionDigits: 3}) + " m";
		}
      }

      view.when(function(){
        // Luister - nadat de kaart geladen is - naar muisbewegingen om de coördinaten af te vangen
        view.on("pointer-move", showCoordinates);
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
  <div id="coordinates">
    <span id="coordtitle">Cursorlocaie (in RD):</span><br>
    <span id="rdxcoord"></span><br>
    <span id="rdycoord"></span>
  </div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍