https://community.esri.com/people/EPolle_TensingInternational/blog/2020/03/24/arcgis-javascript-with-uk-data-table-of-content
Festlegen von x, y und Zoomstufe in der URL, um die Kartenansicht beizubehalten
Wenn Sie auf einer Karte an einem bestimmten Ort hineinzoomen, möchten Sie manchmal diese Kartenansicht beibehalten, z. B. um sie mit jemand anderem zu teilen. Deshalb suchten wir nach einer Möglichkeit, die x-, y-Koordinaten und die Zoomstufe aus den Suchparametern in unserer URL zu erhalten. Aber wir wollen nicht nur die Werte aus dem Query-String (also alles hinter dem Fragezeichen) lesen können, sondern auch diese setzen und ändern können, wann immer sich die Kartenansicht ändert, also wenn der Benutzer auf der Karte schwenkt und zoomt.
Unten ist eine Beschreibung der Funktionalität, die wir verwenden, um die x- und y-Koordinaten (im British National Grid, auf volle Meter gerundet) zu erfassen und die URL zu ändern.<\/SPAN>
URLSearchParams und History.replaceState()
Die URLSearchParams-Schnittstelle definiert Hilfsmethoden zur Arbeit mit dem Query-String einer URL. Im folgenden Beispiel verwenden wir die folgenden Methoden dieser Schnittstelle:
- Die has()-Methode zeigt an, ob ein Parameter mit dem angegebenen Namen existiert
- Die get()-Methode gibt den (ersten) Wert zurück, der mit dem angegebenen Suchparameter verknüpft ist
- Die set()-Methode setzt den Wert, der mit einem gegebenen Suchparameter verknüpft ist. Und sehr wichtig: Wenn der Suchparameter noch nicht existiert (was anfangs der Fall sein kann), wird dieser durch diese Methode erstellt.
Die History.replaceState()-Methode ändert den aktuellen Eintrag im Verlauf. Diese Methode ist besonders nützlich, wenn Sie die URL des aktuellen Verlaufs-Eintrags als Reaktion auf eine Benutzeraktion aktualisieren möchten, z. B. das zuvor erwähnte Schwenken und Zoomen.
Und so funktioniert es:
Wenn Sie die URL ohne Parameter angeben, starten Sie in der Standard-Kartenansicht. Aber wie Sie sehen werden, werden die Standardparameter sofort in die Adressleiste eingefügt:
https://twiav.nl/en/arcgis/javascript/arcgis_javascript_with_uk_data_url_parameters.htm
Und sobald Sie anfangen zu zoomen und zu schwenken, werden diese Parameter jedes Mal angepasst, wenn die Ansicht "stationär" wird (wir verwenden reactiveUtils, um den Zustand der Ansicht zu prüfen, stationär oder nicht),
So können Sie auf einen bestimmten Punkt zoomen und die URL kopieren, um genau diese Kartenansicht zu teilen.
Wenn Sie auf den untenstehenden Link klicken, landen Sie sofort in Steòrnabhagh (oder Stornoway auf Englisch, wir verwenden hier die Web Map GB Cartographic Local Names), auf der Insel Lewis and Harris in den Äußeren Hebriden:
https://twiav.nl/en/arcgis/javascript/arcgis_javascript_with_uk_data_url_parameters.htm?x=143956&y=932940&l=12
Viel Spaß beim Programmieren!
Der Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript mit UK-Daten - URL-Parameter: x, y und Zoomstufe</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/css/main.css">
<script src="https://js.arcgis.com/4.29/"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView",
"esri/widgets/Home",
"esri/Viewpoint",
"esri/core/reactiveUtils"
], function(Map, Point, MapView, Home, Viewpoint, reactiveUtils) {
var sr = 27700;
var xCoordHome = 500000;
var yCoordHome = 500000;
var zoomLevelHome = 5;
var scaleHome = 4612360;
var xCoord = xCoordHome;
var yCoord = yCoordHome;
var zoomLevel = zoomLevelHome;
if ('URLSearchParams' in window) { // Feature-Erkennung (URLSearchParams wird von Internet Explorer nicht unterstützt)
var url = new URL(document.URL);
var search_params = url.searchParams;
// Suchparameter abrufen, wenn x, y und l in der URL vorhanden sind
if(search_params.has('x') && search_params.has('y') && search_params.has('l')) {
var xCoord = parseInt(search_params.get('x'));
var yCoord = parseInt(search_params.get('y'));
var zoomLevel = parseInt(search_params.get('l'));
}
};
var map = new Map({
basemap: {
portalItem: {
id: "5b9d5ac7e17f402a9111f1ca2c22bf56"
// GB Cartographic Local Names, gehostet von EsriUKContent, siehe: https://www.arcgis.com/home/item.html?id=5b9d5ac7e17f402a9111f1ca2c22bf56
}
}
});
var view = new MapView({
spatialReference: sr,
container: "viewDiv",
map: map,
center: new Point({x: xCoord, y: yCoord, spatialReference: sr}),
zoom: zoomLevel
});
var home = new Home({
view: view,
// Der Viewpoint für Home muss definiert werden (hartkodiert), da sonst dieses Home von den Werten x, y und l in den Suchparametern abhängt
viewpoint: new Viewpoint({targetGeometry: new Point({x: xCoordHome, y: yCoordHome, spatialReference: sr}), scale: scaleHome})
});
view.ui.add(home, "top-left")
reactiveUtils.when(
() => view?.stationary === true,
() => {
modifySearchParams();
});
// URL mit neuen Koordinaten und Zoomstufe als Suchparameter ändern
function modifySearchParams() {
if ('URLSearchParams' in window) { // Feature-Erkennung (URLSearchParams wird von Internet Explorer nicht unterstützt)
xCoordNew = parseInt(view.center.x);
yCoordNew = parseInt(view.center.y);
zoomLevelNew = view.zoom;
search_params.set('x', xCoordNew);
search_params.set('y', yCoordNew);
search_params.set('l', zoomLevelNew);
url.search = search_params.toString(); // Eigenschaft search der Haupt-URL ändern
new_url = url.toString(); // neue URL-Zeichenkette
history.replaceState(null, '', new_url);
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
