nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ArcGIS JavaScript Tutorial - watchUtils: přidávejte Compass Widget pouze v případě potřeby

Egge-Jan_Pollé

<\/HEAD>

<\/A>https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2020\/06\/14\/tutorial-arcgis-api-for-javascript-4x-table-of-contents<\/A><\/P>

watchUtils: přidávejte Compass Widget pouze když je potřeba<\/H2><\/P>Obecně jsou mapy orientovány na sever. Toto je široce používaná konvence v kartografii. A totéž platí pro většinu webových map. S ArcGIS API pro JavaScript 4.x je však možné mapu na obrazovce otočit.<\/P><\/P>Uživatel může mapu (nebo spíše pohled) otočit dvěma způsoby:<\/P>pravé kliknutí + tažení<\/CODE> myší<\/LI><LI>stisknutím kláves <CODE>A<\/CODE> a <CODE>D<\/CODE><\/LI><\/OL><\/P>Vy jako vývojář můžete také použít programatickou navigaci úpravou <A href="https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-views-MapView.html#rotation" rel="nofollow noopener noreferrer" target="_blank">MapView.rotation<\/A><\/P><\/P>Pro umožnění uživateli resetovat orientaci kompasu na 0 (tj. se severem nahoře v pohledu) musíte do pohledu přidat <A href="https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Compass.html" rel="nofollow noopener noreferrer" target="_blank">Compass<\/A> widget. Tento widget ukazuje, kde je sever vzhledem k aktuální rotaci pohledu. Kliknutím na widget se pohled otočí zpět na sever (heading = 0).<\/P><\/P>Tedy, dá se říci, že tento Compass widget potřebujete pouze tehdy, když mapa není orientována na sever. Nebo jinak řečeno: většinu času Compass widget není potřeba, protože mapa je "správně" orientována.<\/P><\/P>V níže uvedeném příkladu přidáváme Compass pouze tehdy, když uživatel otočí mapu (ať už náhodou nebo záměrně). A ve chvíli, kdy je orientace kompasu resetována na 0, widget opět odstraníme.<\/P><\/P>K ověření orientace pohledu používáme <A class="link-titled" href="https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-core-watchUtils.html" title="https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference/esri-core-watchUtils.html" rel="nofollow noopener noreferrer" target="_blank">watchUtils <\/> <\/> takto:<\/> <PRE class="lia-code-sample line-numbers language-none"><CODE>watchUtils.whenTrue(view, "stationary", function() {\n if (view.rotation == 0) {\n view.ui.remove(compassWidget);\n } else {\n view.ui.add(compassWidget, "top-left");\n }\n})‍‍‍‍‍‍‍<\/> Níže najdete celý kód tohoto příkladu a můžete si ho prohlédnout živě:<\/> ArcGIS JavaScript Tutorial - Přidání Compass Widget pouze když je potřeba<\/> <\/> <html>\n <head>\n <meta charset=\"utf-8\" \/>\n <meta name=\"viewport\" content=\"initial-scale=1,maximum-scale=1,user-scalable=no\" \/>\n <title>ArcGIS JavaScript Tutorial - Přidání Compass Widget pouze když je potřeba<\title>\n <link rel=\"stylesheet\" href=\"https:\/\/js.arcgis.com\/4.15/esri/themes/light/main.css\" \/>\n <script src=\"https:\/\/js.arcgis.com\/4.15/\"><\script>\n <style>\n html, body, #viewDiv {\n padding: 0;\n margin: 0;\n height: 100%;\n width: 100%;\n }\n </style>\n <script>\n require([\n \"esri/Map\",\n \"esri/views/MapView\",\n \"esri/widgets/Compass\",\n \"esri/core/watchUtils\"\n ], function(Map class="punctuation token">, MapView, Compass, watchUtils) { var mapa = new Map({ basemap: "national-geographic" }); var pohled = new MapView({ container: "viewDiv", scale: 500000, center: [26.26, 39.17], rotation: 45, map: mapa }); var compassWidget = new Compass({ view: pohled }); // Sledujte vlastnost "stationary" pohledu, zda se stane pravdivou, abyste zkontrolovali rotaci // Pokud je rotace rovna 0 (tj. mapa je orientována na sever), odeberte widget kompasu, // jinak tento widget přidejte watchUtils.whenTrue(pohled, "stationary", function() { if (pohled.rotation == 0){ pohled.ui.remove(compassWidget ) ; } else } { pohled.</pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan></pan>

Najděte více příspěvků označených jako

Komentáře

There are no comments yet

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Nový zde? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.