https://community.esri.com/people/EPolle_TensingInternational/blog/2020/03/24/arcgis-javascript-with-uk-data-table-of-content
Nastavení x, y a úrovně přiblížení v url pro zachování zobrazení mapy
Když přiblížíte na určité místo na mapě, někdy byste chtěli toto zobrazení mapy zachovat, např. abyste ho mohli sdílet s někým jiným. Proto jsme hledali způsob, jak získat x, y a úroveň přiblížení z parametrů vyhledávání v naší url. Ale nejenže chceme být schopni číst hodnoty z dotazovacího řetězce (tj. vše za otazníkem), chceme je také umět nastavit a měnit kdykoli se změní zobrazení mapy, tj. když uživatel posouvá a přibližuje mapu.
Níže je popis funkčnosti, kterou používáme k získání souřadnic x a y (v British National Grid, zaokrouhlených na celý metr) a k úpravě url.<\/SPAN>
URLSearchParams a History.replaceState()
Rozhraní URLSearchParams definuje pomocné metody pro práci s dotazovacím řetězcem URL. V níže uvedeném příkladu používáme následující metody tohoto rozhraní:
- Metoda has() určuje, zda parametr se specifikovaným názvem existuje
- Metoda get() vrací (první) hodnotu spojenou s daným parametrem vyhledávání
- Metoda set() nastavuje hodnotu spojenou s daným parametrem vyhledávání. A velmi důležité: pokud parametr vyhledávání ještě neexistuje (což může být zpočátku případ), tato metoda jej vytvoří.
Metoda History.replaceState() upravuje aktuální položku historie. Tato metoda je obzvláště užitečná, když chcete aktualizovat URL aktuální položky historie v reakci na nějakou uživatelskou akci, např. zmíněné posouvání a přibližování.
A takto to funguje:
Pokud zadáte url bez jakýchkoli parametrů, začnete ve výchozím zobrazení mapy. Ale jak uvidíte, výchozí parametry jsou ihned přidány do adresního řádku:
https://twiav.nl/en/arcgis/javascript/arcgis_javascript_with_uk_data_url_parameters.htm
A jakmile začnete přibližovat a posouvat, tyto parametry se upraví pokaždé, když se zobrazení stane „stacionárním“ (používáme reactiveUtils ke kontrole stavu zobrazení, zda je stacionární nebo ne),
Tímto způsobem můžete přiblížit na konkrétní místo a zkopírovat url, abyste zajistili sdílení právě tohoto zobrazení mapy.
Když kliknete na níže uvedený odkaz, okamžitě skončíte ve Steòrnabhagh (nebo Stornoway v angličtině, používáme zde Web Map GB Cartographic Local Names), na ostrově Lewis and Harris v Outer Hebrides:
https://twiav.nl/en/arcgis/javascript/arcgis_javascript_with_uk_data_url_parameters.htm?x=143956&y=932940&l=12
Přejeme šťastné kódování!
Kód
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript s UK daty - URL Parametry: x, y a úroveň přiblížení</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) { // Detekce funkce (URLSearchParams není podporováno v Internet Exploreru)
var url = new URL(document.URL);
var search_params = url.searchParams;
// získat searchparams pokud jsou v url zadány x, y a l
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, hostováno EsriUKContent, viz: 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,
// výchozí pohled domova musí být definován (tvrdě zakódován), protože jinak by tento home závisel na hodnotách x, y a l v 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();
});
// upravit url s novými souřadnicemi a úrovní přiblížení jako searchparams
function modifySearchParams() {
if ('URLSearchParams' in window) { // Detekce funkce (URLSearchParams není podporováno v Internet Exploreru)
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(); // změnit vlastnost search hlavní url
new_url = url.toString(); // nový řetězec url
history.replaceState(null, '', new_url);
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
