https://community.esri.com/people/EPolle_TensingInternational/blog/2020/03/24/arcgis-javascript-with-uk-data-table-of-content
Définir x, y et le niveau de zoom dans l'url pour conserver la vue de la carte
Lorsque vous effectuez un zoom sur un emplacement particulier d'une carte, vous souhaitez parfois pouvoir conserver cette vue de la carte, par exemple pour la partager avec quelqu'un d'autre. C'est pourquoi nous cherchions un moyen d'obtenir les valeurs x, y et le niveau de zoom à partir des paramètres de recherche dans notre url. Mais nous ne voulons pas seulement pouvoir lire les valeurs depuis la chaîne de requête (c'est-à-dire tout ce qui se trouve après le point d'interrogation), nous voulons aussi pouvoir les définir, et les modifier chaque fois que la vue de la carte change, c'est-à-dire lorsque l'utilisateur déplace et zoome sur la carte.
Ci-dessous une description de la fonctionnalité que nous utilisons pour récupérer les coordonnées x et y (dans British National Grid, arrondies au mètre entier) et pour modifier l'url.<\/SPAN>
URLSearchParams et History.replaceState()
L'interface URLSearchParams définit des méthodes utilitaires pour travailler avec la chaîne de requête d'une URL. Dans l'exemple ci-dessous, nous utilisons les méthodes suivantes de cette interface :
- La méthode has() indique si un paramètre avec le nom spécifié existe
- La méthode get() retourne la (première) valeur associée au paramètre de recherche donné
- La méthode set() définit la valeur associée à un paramètre de recherche donné. Et très important : si le paramètre de recherche n'existe pas encore (ce qui peut être le cas initialement), cette méthode créera le paramètre de recherche.
La méthode History.replaceState() modifie l'entrée actuelle de l'historique. Cette méthode est particulièrement utile lorsque vous souhaitez mettre à jour l'URL de l'entrée actuelle de l'historique en réponse à une action utilisateur, par exemple le déplacement et le zoom mentionnés précédemment.
Et voici comment cela fonctionne :
Si vous fournissez l'url sans aucun paramètre, vous commencerez à la vue par défaut de la carte. Mais comme vous le verrez, les paramètres par défaut sont ajoutés immédiatement à la barre d'adresse :
https://twiav.nl/en/arcgis/javascript/arcgis_javascript_with_uk_data_url_parameters.htm
Et dès que vous commencez à zoomer et déplacer la carte, ces paramètres seront ajustés chaque fois que la vue devient "stationary" (nous utilisons reactiveUtils pour vérifier l'état de la vue, stationary ou non),
De cette façon, vous pouvez zoomer sur un endroit particulier et copier l'url pour vous assurer de partager exactement cette vue de la carte.
Si vous cliquez sur le lien ci-dessous, vous arriverez immédiatement à Steòrnabhagh (ou Stornoway en anglais, nous utilisons ici la Web Map GB Cartographic Local Names), sur l'île de Lewis and Harris dans les Hébrides extérieures :
https://twiav.nl/en/arcgis/javascript/arcgis_javascript_with_uk_data_url_parameters.htm?x=143956&y=932940&l=12
Bon codage !
Le 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 avec données UK - Paramètres URL : x, y et niveau de zoom</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) { // Détection des fonctionnalités (URLSearchParams n'est pas supporté par Internet Explorer)
var url = new URL(document.URL);
var search_params = url.searchParams;
// obtenir searchparams si x, y et l sont fournis dans l'url
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, hébergé par EsriUKContent, voir : 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,
// le point de vue du home doit être défini (codé en dur) car sinon ce home dépend des valeurs x, y et l dans les searchparams
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();
});
// modifier l'url avec les nouvelles coordonnées et niveau de zoom comme searchparams
function modifySearchParams() {
if ('URLSearchParams' in window) { // Détection des fonctionnalités (URLSearchParams n'est pas supporté par Internet Explorer)
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(); // changer la propriété search de l'url principale
new_url = url.toString(); // la nouvelle chaîne url
history.replaceState(null, '', new_url);
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
