https://community.esri.com/people/EPolle_TensingInternational/blog/2020/03/24/arcgis-javascript-with-uk-data-table-of-content
Establecer x, y y nivel de zoom en la url para conservar la vista del mapa
Cuando haces zoom en una ubicación particular en un mapa, a veces deseas poder conservar esa vista del mapa, por ejemplo, para compartirla con otra persona. Por eso estábamos buscando una manera de obtener la x, y y el nivel de zoom desde los parámetros de búsqueda en nuestra url. Pero no solo queremos poder leer los valores de la cadena de consulta (es decir, todo lo que está detrás del signo de interrogación), también queremos poder establecerlos y modificarlos cada vez que la vista del mapa cambie, es decir, cuando el usuario se desplace y haga zoom en el mapa.
A continuación se describe la funcionalidad que usamos para capturar las coordenadas x e y (en British National Grid, redondeadas al metro completo) y para modificar la url.<\/SPAN>
URLSearchParams y History.replaceState()
La interfaz URLSearchParams define métodos utilitarios para trabajar con la cadena de consulta de una URL. En el ejemplo a continuación usamos los siguientes métodos de esta interfaz:
- El método has() indica si existe un parámetro con el nombre especificado
- El método get() devuelve el valor (primero) asociado al parámetro de búsqueda dado
- El método set() establece el valor asociado con un parámetro de búsqueda dado. Y muy importante: si el parámetro de búsqueda aún no existe (lo cual podría ser el caso inicialmente), este método creará el parámetro de búsqueda.
El método History.replaceState() modifica la entrada actual del historial. Este método es particularmente útil cuando quieres actualizar la URL de la entrada actual del historial en respuesta a alguna acción del usuario, por ejemplo, el desplazamiento y zoom mencionados antes.
Y así es como funciona:
Si proporcionas la url sin ningún parámetro, comenzarás en la vista predeterminada del mapa. Pero como verás, los parámetros predeterminados se añaden inmediatamente a la barra de direcciones:
https://twiav.nl/en/arcgis/javascript/arcgis_javascript_with_uk_data_url_parameters.htm
Y tan pronto como comienzas a hacer zoom y desplazarte, estos parámetros se ajustarán cada vez que la vista se vuelva "estacionaria" (usamos reactiveUtils para verificar el estado de la vista, si está estacionaria o no),
De esta manera, puedes hacer zoom en un lugar particular y copiar la url para asegurarte de compartir exactamente esa vista del mapa.
Si haces clic en el enlace a continuación terminarás inmediatamente en Steòrnabhagh (o Stornoway en inglés, estamos usando el Web Map GB Cartographic Local Names aquí), en la isla de Lewis and Harris en las Hébridas Exteriores:
https://twiav.nl/en/arcgis/javascript/arcgis_javascript_with_uk_data_url_parameters.htm?x=143956&y=932940&l=12
¡Feliz codificación!
El código
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript con datos del Reino Unido - Parámetros URL: x, y y nivel 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) { // Detección de función (URLSearchParams no es compatible con Internet Explorer)
var url = new URL(document.URL);
var search_params = url.searchParams;
// obtener searchparams si x, y y l están proporcionados en 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, alojado por EsriUKContent, ver: 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,
// el punto de vista del home necesita ser definido (codificado) porque de otro modo este home depende de los valores x, y y l en los 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();
});
// modificar url con nuevas coordenadas y nivel de zoom como searchparams
function modifySearchParams() {
if ('URLSearchParams' in window) { // Detección de función (URLSearchParams no es compatible con 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(); // cambiar la propiedad search de la url principal
new_url = url.toString(); // la nueva cadena url
history.replaceState(null, '', new_url);
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
