https://community.esri.com/people/EPolle_TensingInternational/blog/2020/03/24/arcgis-javascript-with-uk-data-table-of-content
Definindo x, y e nível de zoom na url para manter a visualização do mapa
Quando você dá zoom em um local específico no mapa, às vezes deseja poder manter essa visualização do mapa, por exemplo, para compartilhá-la com outra pessoa. É por isso que estávamos procurando uma maneira de obter o x, y e o nível de zoom dos parâmetros de pesquisa na nossa url. Mas não queremos apenas ser capazes de ler os valores da string de consulta (ou seja, tudo que vem depois do ponto de interrogação), também queremos poder defini-los e modificá-los sempre que a visualização do mapa mudar, ou seja, quando o usuário mover e der zoom no mapa.
Abaixo está uma descrição da funcionalidade que usamos para capturar as coordenadas x e y (na British National Grid, arredondadas para o metro inteiro) e para modificar a url.<\/SPAN>
URLSearchParams e History.replaceState()
A interface URLSearchParams define métodos utilitários para trabalhar com a string de consulta de uma URL. No exemplo abaixo usamos os seguintes métodos desta interface:
- O método has() indica se um parâmetro com o nome especificado existe
- O método get() retorna o valor (primeiro) associado ao parâmetro de pesquisa dado
- O método set() define o valor associado a um parâmetro de pesquisa dado. E muito importante: se o parâmetro de pesquisa ainda não existir (o que pode ser o caso inicialmente), este método criará o parâmetro de pesquisa.
O método History.replaceState() modifica a entrada atual do histórico. Este método é particularmente útil quando você quer atualizar a URL da entrada atual do histórico em resposta a alguma ação do usuário, por exemplo, o movimento e zoom mencionados anteriormente.
E é assim que funciona:
Se você fornecer a url sem quaisquer parâmetros, você começará na visualização padrão do mapa. Mas como verá, os parâmetros padrão são adicionados imediatamente à barra de endereços:
https://twiav.nl/en/arcgis/javascript/arcgis_javascript_with_uk_data_url_parameters.htm
E assim que você começar a dar zoom e mover pelo mapa, esses parâmetros serão ajustados toda vez que a visualização ficar "estacionária" (usamos reactiveUtils para verificar o estado da visualização, estacionária ou não),
Dessa forma, você pode dar zoom em um local específico e copiar a url para garantir que compartilhe exatamente essa visualização do mapa.
Se você clicar no link abaixo, irá imediatamente parar em Steòrnabhagh (ou Stornoway em inglês, estamos usando o Web Map GB Cartographic Local Names aqui), na ilha de Lewis and Harris nas Outer Hebrides:
https://twiav.nl/en/arcgis/javascript/arcgis_javascript_with_uk_data_url_parameters.htm?x=143956&y=932940&l=12
Feliz codificação!
O 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 com dados do Reino Unido - Parâmetros da URL: x, y e nível 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) { // Detecção de recurso (URLSearchParams não é suportado pelo Internet Explorer)
var url = new URL(document.URL);
var search_params = url.searchParams;
// obter searchparams se x, y e l forem fornecidos na 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, hospedado por EsriUKContent, veja: 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,
// viewpoint da home precisa ser definido (codificado) porque caso contrário esta home depende dos valores x, y e l nos 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 com novas coords e nível de zoom como searchparams
function modifySearchParams() {
if ('URLSearchParams' in window) { // Detecção de recurso (URLSearchParams não é suportado pelo 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(); // alterar a propriedade search da url principal
new_url = url.toString(); // a nova string da url
history.replaceState(null, '', new_url);
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
