Comfortabel worden met JavaScript API 4.0

Noah Sager

<\/HEAD>Nu de ArcGIS API for JavaScript 4.0 al een paar weken uitgebracht is<\/A><\/STRONG>, is dit een uitstekende gelegenheid om enkele van de nieuwe syntaxis en functionaliteiten door te nemen. Deze blog behandelt een voorbeeld van een 3D-applicatie met de nadruk op de Search widget. Je kunt meedoen met de voorbeeldcode uit de Esri Developer Support GitHub repository<\/A><\/STRONG>, en hier het gehoste voorbeeld uitvoeren: Bekijk het Live<\/A><\/STRONG>.

Functioneel toont de app een 3D-kaart met vier widgets: Search, Zoom, Compass en Attribution. Standaard bevat de View de laatste drie widgets, zoals beschreven in de documentatie<\/A><\/STRONG>. Als je niet bekend bent met de 4.x wijzigingen, bevatten alle mapping-apps een map en een view. De map bevat de data, en de view bevat de visualisatie-informatie voor die data. Met andere woorden, de map is het onderwerp, en de view is de camera; compleet met filters, modi en instellingen. Alle 2D-apps hebben MapViews, en 3D-apps hebben SceneViews (let op: de term 'scene' duidt op drie dimensies binnen ArcGIS). Hetzelfde geldt voor kaarten van ArcGIS Online en Portal for ArcGIS: een WebMap is 2D, en een WebScene is 3D.

<\/A>

2D kaart + 3D scene<\/P><\/DIV>

Je kunt een locatie invoeren in de Search widget en ofwel een resultaat selecteren uit de dropdownsuggesties, of op Enter drukken op het toetsenbord om naar de eerste plaats in de lijst te gaan. De view zoomt dan naar die locatie en plaatst een picture marker symbool op de kaart. Als je Developer Tools opent in de webbrowser, zie je enkele nuttige console logberichten die de voortgang van de Search widget aangeven.

In de code staan veel nuttige opmerkingen die de functionaliteit beschrijven, met links naar referenties voor meer informatie. De Map en SceneView constructors zijn misschien nieuw, maar ze zijn heel eenvoudig. Waar ik me hier op wil richten zijn twee dingen: het

SearchViewModel<\/A><\/STRONG> (beginnend bij regel 88), en het view.ui<\/A><\/STRONG> (beginnend bij regel 117).

Een van de geweldige functies van 4.0 is het scheiden van styling en businesslogica. Dit betekent dat widgets een view en een ViewModel hebben. De view is de widget zelf en verzorgt het weergeven van de widget, terwijl het ViewModel verantwoordelijk is voor eigenschappen en configuraties. Ik moet vermelden dat we het ViewModel niet hoeven te gebruiken als we dat niet willen omdat de ViewModel-eigenschappen ook gekoppeld zijn aan de widget view. Dit is gedaan voor eenvoud. Als voorbeeld bekijken we de Search widget in de code:

<\/A>

Search Widget en SearchViewModel<\/P><\/DIV>

De daadwerkelijke widget constructor werd gebruikt om de widget te benoemen en zichtbaarheid op true te zetten (standaard is dit toch al true). Het SearchViewModel regelt alle configuraties die zijn ingesteld om de gebruikerservaring en interface aan te passen zoals ik nodig had (zie het voorbeeld voor opmerkingen). Wat interessant is aan dit ViewModel-systeem is dat omdat het gescheiden is van de widget constructor, het nu veel makkelijker is om businesslogica te delen tussen widgets en codebases. Hier is meer informatie over het

SearchViewModel<\/A><\/STRONG>.

Het tweede interessante aspect van 4.0 dat ik hier bespreek is hoe we de Search widget aan de app toevoegen. Laten we kijken naar het codefragment uit versie 4.0 en uit versie 3.x. Momenteel kunnen we de widget direct toevoegen aan de user interface van de view zonder een aparte div-element te maken. Dit is een efficiënte (en durf ik te zeggen, elegante) workflow.

<\/>\/>

Voeg Search Widget toe in versie 4.0<\/>\/><\/>\/><\/>\/><\/>\/><\/>\/><\/>\/><\/>\/><\/>\/><\/>\/><\/>\/><\/>\/><\/>\/>

Bij versies van \u003cstrong3e3.x3c/strong3e moeten we een div-element maken, verwijzen naar die div wanneer we de widget maken, \u00a0en er opnieuw naar verwijzen binnen het HTML body-tag.

3ca href=\u0022https://community.esri.com/servlet/JiveServlet/download/58719-189082/addSearchWidget3.png22>3cimg style=\u0022margin:5px5px0;padding10pxbox-shadow11p33p#999999;background:none repeat scroll00#F5F5F5;22 class=\u0022jive-image22 alt=\u0022addSearchWidget3.png22 width=282 height=364 src=\u0022https://us.v-cdn.net/6038851/uploads/legacyfs/online/388406_addSearchWidget3.png22 /3e3c/a>3cp style=\u0022color:#888;font-size12pmargin5p22> Voeg Search Widget toe in versie \u003cstrong3e3.x3c/strong3e3c/p>3c/div>

Voor meer informatie over het toevoegen van widgets aan de view kun je deze

documentatie raadplegen.

Samenvattend is de ArcGIS API for JavaScript een krachtig product dat gebruikmaakt van GIS direct in je webbrowser. Als je eerder met oudere versies van deze API hebt gewerkt, kan het lezen van het Overstappen naar versie \u003cstrong>4.x-hulpartikel je op weg helpen. En als je helemaal nieuw bent, kun je beginnen met de Ontdek versie \u003cstrong>4.x-gids. Er komt nog veel meer aan terwijl we blijven werken aan extra functionaliteit en geweldige features voor JavaScript API versie \u003cstrong>x. Veel programmeerplezier!

---

Noah S. - SDK Readiness Lead



<//BODY>