<\/HEAD>
<\/P>
Občas můžete od svých uživatelů dostat zvláštní požadavek na funkce, které by chtěli do aplikace přidat. Mohli by chtít integrovat nějaké bláznivé API<\/EM> nebo pracovat zcela offline<\/EM>, ani jedno z těchto věcí nemusí být považováno za snadné, ale dalo by se to do určité míry zvládnout. Možná chtějí uložit poslední rozsah mapy, když zavřou a znovu otevřou svůj prohlížeč, to můžete udělat<\/A>! Jedna věc, kterou jsem už dříve dělal, je ukládání výběrů, takže když uživatel zavře prohlížeč, může se vrátit do aplikace a poslední položky, které vybral, jsou stále vybrané<\/STRONG>. Nevím, člověče, office people<\/EM>. Ale hej, to můžete udělat!<\/P><\/P>
Krok za krokem<\/H2>Kroky jsou docela jednoduché.<\/P>Vytvořte jedinečný klíč pro uložení výběrů<\/LI>Když je výběr dokončen, uložte výběr<\/LI>Když je výběr vymazán, vymažte úložiště<\/LI>Když aplikace začne, zkontrolujte úložiště nebo uložené výběry a znovu vyberte<\/LI><\/OL><\/P>Jednoduché jako facka!<\/EM><\/P><\/P>Generování jedinečného klíče je jednoduché. Protože localStorage je rozděleno podle domén, vezmu si jen svou poslední polohu a přidám k ní nějaký jedinečný identifikátor. Něco jako toto:<\/P>var key = location.href + '--id-selection';<\/P><\/P>Příliš snadné.<\/EM><\/P><\/P>Pak stačí uložit výběr, když je dokončen. Dostatečně snadné.<\/P>featureLayer
.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW)
.then(function(results) {
var data = results.map(function(x) { return x.toJson(); });
localStorage.setItem(key, JSON.stringify(data));
});<\/PRE><\/P>Co tu vlastně děláme? No, každý Graphic má metodu toJson<\/A>, která vrací obyčejný objekt. Ve skutečnosti je tato metoda rozeseta po celé API (nápověda nápověda, podívej se co s ní ještě můžeš dělat). Takže můžeme projít výsledky a spustit na nich toJson pro získání JSON dat. Pak to můžeme uložit do localStorage poté co ho převedeme na řetězec pomocí stringify<\/><\/> . To je důležité, localStorage pracuje s řetězci. Obyčejné objekty by vypadaly jako "[object Object]", což není užitečné.<\/> <\/>Pak se ujistěte, že pokud někde ve vaší aplikaci dojde k vymazání výběru, odstraníte také položku z localStorage.<\/>on(dom.byId(\"clearSelectionButton\"), \"click\", function () {\n featureLayer.clearSelection();\n localStorage.removeItem(key);\n});<\/><\/>Jednoduché.<\/><\/>A teď ta zajímavá část. Když aplikace začne, chceme zkontrolovat localStorage na uložené výběry. Rád mám jednoduchou pomocnou metodu pro skutečné parsování grafik, takže by to mohlo vypadat nějak takto.<\/>var parseToGraphics = function (str) {\n if (!str) { return undefined; }\n return JSON.parse(str).map(function(x) {\n return new Graphic(x);\n });\n};<\/><\/>Takže JSON.parse dělá opak JSON.stringify. Pokusí se převést řetězcová data na obyčejné JavaScript objekty. Další skvělá vlastnost ArcGIS API for JavaScript je ta, že některé konstruktory přijímají JSON reprezentace toho, co chcete vytvořit. Stejně jako konstruktor Graphic. To vám umožní vytvářet Graphics jako šílenec na Graphics. Pak můžete počkat na načtení FeatureLayer a zkontrolovat localStorage.<\/>featureLayer.on('load', function() {\n var items = parseToGraphics(ls.getItem(key));\n if (items) {\n var q = new Query();\n q.objectIds = items.map(function(x) {\n return x.attributes.OBJECTID;\n });\n featureLayer\n .selectFeatures(q, FeatureLayer.SELECTION_NEW);\n }\n});<\/>A BUM!<\\EM> Právě jste uložili výběry a zobrazili poslední vybrané položky při spuštění aplikace. Můžete vidět ukázku tohoto jsbinu. Musím vás varovat, jsbin se zdá být občas trochu nestabilní pro tuto aplikaci, alespoň na mém počítači, ale funguje to, věřte mi.<\\/><\\/>Proč vůbec ukládat celý Graphic pokud používáte jen ObjectIds?<\\EM> Hej, neříkám vám jak míchat ovesnou kaši. Ale dobrá otázka. Pokud víte jistě, že budete vybírat pouze podle ObjectIds, pak jistě uložte jen ObjectIds. Já rád mám graphics, protože pak mám možnosti. Můžete chtít provést nějakou samostatnou analýzu nebo výběr pomocí uloženého výběru. Nebo možná chcete zobrazit InfoWindow pro první vybranou položku při spuštění aplikace.<\\/>featureLayer.on('load', function() {\n var items = parseToGraphics(ls.getItem(key));\n if (items) {\n var q = new Query();\n q.objectIds = items.map(function(x) {\n return x.attributes.OBJECTID;\n });\n featureLayer\n .selectFeatures(q, FeatureLayer.SELECTION_NEW)\n .then(function() {\n items.map(function(x) {\n x.setInfoTemplate(infoTemplate);\n });\n map.infoWindow.setFeatures(items);\n map.infoWindow.show(items[0].geometry.getCentroid());\n });\n }\n});<\\/>Můžete vidět demo tohoto na jsbinu. Tento příklad potřebuje ještě trochu práce, ale chápete to. Obvykle to používám k zobrazení obsahu Popup v jiné části aplikace synchronizované s mapou.<\\/><\\/>Tím že uložíte Graphic máte alespoň nějaké možnosti věcí s kterými si můžete hrát. Ale pokud víte že nepotřebujete všechno toto, pak jistě optimalizujte a ukládejte jen ObjectIds.<\\/><\\/>Zachraňte svět<\\H2>Nebojte se tedy experimentovat s localStorage nebo jinými formami úložiště pro uchování dat ve vaší aplikaci. Bavte se tím a tvořte skvělé aplikace.<\\/><\\/>Pro více tipů a triků geodev navštivte můj blog.<\\/><\\/>