Sich mit der JavaScript API 4.0 vertraut machen

Noah Sager

<\/HEAD>Da die ArcGIS API for JavaScript 4.0 nun seit einigen Wochen veröffentlicht wurde<\/A><\/STRONG>, ist dies eine ausgezeichnete Gelegenheit, einige der neuen Syntax und Funktionen zu erkunden. Dieser Blog führt durch eine Beispiel-3D-Anwendung mit Fokus auf das Search-Widget. Sie können dem Beispielcode aus dem Esri Developer Support GitHub Repository<\/A><\/STRONG> folgen und die gehostete Beispielanwendung hier ausführen: Live ansehen<\/A><\/STRONG>.

Funktional betrachtet zeigt die App eine 3D-Karte mit vier Widgets: Search, Zoom, Compass und Attribution. Standardmäßig enthält die View die letzten drei Widgets, wie in der Dokumentation<\/A><\/STRONG> beschrieben. Wenn Sie mit den Änderungen in 4.x nicht vertraut sind: Alle Mapping-Apps enthalten eine Karte und eine View. Die Karte hält die Daten, und die View enthält die Visualisierungsinformationen für diese Daten. Anders gesagt, die Karte ist das Motiv, und die View ist die Kamera; komplett mit Filtern, Modi und Einstellungen. Alle 2D-Apps haben MapViews, und 3D-Apps haben SceneViews (Hinweis: Der Begriff „scene“ bezeichnet drei Dimensionen in ArcGIS). Dasselbe gilt für Karten von ArcGIS Online und Portal for ArcGIS: Ein WebMap ist 2D, und ein WebScene ist 3D.

<\/A>

2D-Karte + 3D-Szene<\/P><\/DIV>

Sie können einen Ort im Search-Widget eingeben und entweder ein Ergebnis aus den Dropdown-Vorschlägen auswählen oder Enter auf der Tastatur drücken, um zum ersten Ort in der Liste zu springen. Die View zoomt zu diesem Ort und platziert ein Bildmarkierungssymbol auf der Karte. Wenn Sie die Developer Tools im Webbrowser öffnen, sehen Sie hilfreiche Konsolenprotokollmeldungen, die den Fortschritt des Search-Widgets anzeigen.

Im Code gibt es viele hilfreiche Kommentare, die die Funktionalität beschreiben, mit Links zu Referenzen für weitere Informationen. Die Konstruktoren Map und SceneView sind vielleicht neu, aber sehr einfach zu verstehen. Worauf ich hier eingehen möchte, sind zwei Dinge: das

SearchViewModel<\/A><\/STRONG> (beginnend bei Zeile 88) und das view.ui<\/A><\/STRONG> (beginnend bei Zeile 117).

Eine der großartigen Funktionen von 4.0 ist die Trennung von Styling und Geschäftslogik. Das bedeutet, dass Widgets eine View und ein ViewModel haben. Die View ist das Widget selbst und kümmert sich um die Anzeige des Widgets, während das ViewModel die Eigenschaften und Konfigurationen verwaltet. Ich sollte erwähnen, dass wir das ViewModel nicht verwenden müssen, wenn wir nicht wollen, da die ViewModel-Eigenschaften auch an die Widget-View gebunden sind. Dies wurde aus Gründen der Einfachheit gemacht. Als Beispiel betrachten wir das Search-Widget im Code:

<\/A>

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

Der eigentliche Widget-Konstruktor wurde verwendet, um das Widget zu benennen und die Sichtbarkeit auf true zu setzen (Standard ist ohnehin true). Das SearchViewModel verwaltet alle Konfigurationen, die gesetzt wurden, um das Benutzererlebnis und die Schnittstelle so anzupassen, wie ich es brauchte (siehe Beispiel für Kommentare). Was an diesem ViewModel-System interessant ist, ist dass es vom Widget-Konstruktor getrennt ist, wodurch es jetzt viel einfacher ist, Geschäftslogik zwischen Widgets und Codebasen zu teilen. Hier sind weitere Informationen zum

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

Der zweite interessante Aspekt von 4.0, den ich hier bespreche, ist wie wir das Search-Widget zur App hinzufügen. Schauen wir uns den Codeausschnitt aus Version 4.0 und aus Version 3.x an. Aktuell können wir das Widget direkt zur Benutzeroberfläche der View hinzufügen, ohne ein separates div-Element zu erstellen. Dies ist ein effizienter (und ich würde sagen eleganter) Workflow.

<\/A>

Search Widget hinzufügen in Version 4.0<\/P><\/DIV>

In den Versionen 3.x müssen wir ein div-Element erstellen, dieses beim Erstellen des Widgets referenzieren sowie es erneut innerhalb des HTML body-Tags referenzieren.

<\\/A>

Search Widget hinzufügen in Version 3.x<\\/P><\\/DIV>

Für weitere Informationen zum Hinzufügen von Widgets zur View können Sie diese

Dokumentation<\\/A><\\/STRONG> konsultieren.

Zusammenfassend ist die ArcGIS API for JavaScript ein leistungsstarkes Produkt, das die Kraft von GIS direkt in Ihrem Webbrowser nutzt. Wenn Sie mit früheren Versionen der API gearbeitet haben, kann Ihnen das Übergang zu Version 4.x<\\/A> <\\/STRONG>-Hilfedokument den Einstieg erleichtern. Und wenn Sie ganz neu sind, können Sie mit dem Discover 4.x Guide<\\/A><\\/STRONG> beginnen. Es wird noch viel mehr kommen, während wir weiterhin Funktionalität und Großartigkeit zur JavaScript API 4.x hinzufügen. Viel Spaß beim Programmieren!

---

Noah S. - SDK Readiness Lead<\\/EM> \n \n \n \n<\\/BODY><\\/HTML>