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; } } }

Erstellen Sie benutzerdefinierte Widgets für Ihre Web-App... eine Einführung

RiccardoKlinger2

<\/HEAD>

Die Arbeit mit einem GIS führt manchmal zu recht komplexen Workflows, Modellen und so weiter. Der nächste Schritt könnte sein: Wie kann man diese Werkzeuge teilen, damit andere Parteien und Personen damit arbeiten können? Es gibt mehrere Ansätze, dies zu tun:<\/P>

Geoverarbeitung als Web-Tool veröffentlichen.<\/LI>
ArcGIS JavaScript API<\/LI>
Widgets für den Web AppBuilder<\/LI><\/UL>
In diesem Blogbeitrag möchte ich den letzten Ansatz beschreiben und ein anpassbares Widget für den Web AppBuilder erstellen.<\/P>
Web AppBuilder Dev Edition<\/H3>Sie fragen sich vielleicht, warum Sie die Web AppBuilder Dev Edition<\/A> (kurz: WAB) benötigen? Da wir ein Widget erstellen werden, ist es immer gut, die Lösung vor der Veröffentlichung als benutzerdefinierte Anwendung auf AGOL zu testen. Mit der Web AppBuilder Dev Edition können wir Vorlagen-Widgets verwenden und die Widgets lokal auf einem Server (oder einer Ressource mit einer ordentlichen Domain...) testen.<\/P>
WAB läuft auf
Node.js<\/A>, ist aber momentan nur für Windows verfügbar.<\/P>
Sobald es entpackt und mit Ihrem ArcGIS-Konto konfiguriert ist (Verbindung mit Portal for ArcGIS herstellen, eine App in Ihrem Portal erstellen, die App bei Ihrem Portal registrieren), sind Sie startklar:<\/P>
<\/P>
<\/P>
Befolgen Sie die Schritte im
Abschnitt "Erste Schritte"<\/A>.<\/P>
Der Zweck des Widgets<\/H3>Für diese Einführung möchte ich ein Widget erstellen, das sowohl den Maßstab als auch die aktuelle Zoomstufe einer Karte anzeigt. Natürlich ist es eine Art Erweiterung des Standard Scalebar Widgets. Daher werde ich zuerst den eigenständigen Weg zeigen und später die Erweiterung des Standard Scalebar Widgets beschreiben, um dasselbe zu tun: Nicht nur die Skalierungsleiste anzeigen, sondern auch die Zoomstufe sowie den Maßstab der zugrundeliegenden Karte anzeigen.<\/P>Die Struktur eines Widgets<\/H3>Ein Widget besteht aus mehreren Dateien, die unten beschrieben sind:<\/P>Die JavaScript-Datei, die die Widget-Funktion definiert (Widget.js<\/EM>)<\/LI>Die Template-Datei, die die Benutzeroberfläche des Widgets definiert (Widget.html<\/EM>)<\/LI>Die Konfigurationsdatei des Widgets (config.json<\/EM>)<\/LI>Die Manifest-Datei des Widgets, die für die Veröffentlichung benötigt wird (manifest.json<\/EM>)<\/LI>Die i18n<\/A>-Strings-Datei des Widgets zur Internationalisierung von Strings falls benötigt (nls\/strings.js<\/EM>)<\/LI>Die Style-Datei des Widgets, falls Sie ein anspruchsvoller Typ sind und gerne abgerundete Ränder, Hintergrundbilder, Schieberegler und Kreise mögen (css\/style.css<\/EM>)<\/LI><\/UL>Am Ende sollte die Struktur Ihres Widgets ungefähr so aussehen:<\/P><\/P>Wie Sie vielleicht bemerkt haben, enthält die Struktur auch einen Ordner namens setting.<\EM> Da wir das Verhalten unseres Widgets anpassen möchten, müssen wir einige Einstellungen definieren und mit ihnen interagieren.<\/P>Der Code<\/H3>Lassen Sie uns die Dateien durchgehen. Wir werden dem Benutzer erlauben zu definieren, ob er oder sie den Maßstab, die Zoomstufe oder beides sehen möchte. Dies wird in der setting.html gemacht.<\/P>Die Setting.html \/ Setting.js<\/H4>Dazu zeigen wir zwei Kontrollkästchen an. Da ich es gerne ganz einfach mag (und es nicht geschafft habe, die dijit-Kontrollkästchen zum Laufen zu bringen 😉<\span>) verwenden wir HTML-Eingabe-Kontrollkästchen:<\P><<\SPAN>div<\SPAN>   <<\SPAN>div<\SPAN> class<\SPAN>="title<\SPAN>" Zoom Level Info<\div>   <div class=\"row\">     <input type=\"checkbox\" id=\"ZoomSetCheckbox\"><\input>     Zoom Info anzeigen<\p>   <\div>   <div class=\"row\">     <input type=\"checkbox\" id=\"ScaleSetCheckbox\"><\input>     Ungefähren Maßstab anzeigen<\p>   <\div> <div> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍Da dies jedoch ein Widget ist und wir die Standardeinstellungen in einer Konfigurationsdatei namens config.json<\EM> speichern möchten, müssen wir das setting.html<\EM>-File mit der Konfigurationsdatei verbinden mittels die settings.js <\/EM>Datei.<\/P>Daher werden wir nicht nur die IDs der Buttons verwenden (jedes Widget könnte Elemente mit identischen IDs haben...), sondern auch Daten-Connectoren:<\/P><<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN>   <<\/SPAN>div<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>title"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>Zoom Level Info<\/<\/span>div<\/span>><\/span><\/span>   <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>row"<\/span><\/span>><\/span><\/span>     <<\/span>input<\/span> type<\/span>=<\/span>"<\/span>checkbox<sp an class="punctuation token">"<\/span><\/span> id<\/ span> = < \/ span > " < \/ span > ZoomSetCheckbox " < \/ span > < \/ span > &gt ; < \/ span > < \/ span ><\/< \/ span > input < \/ span >>< \/ span >< \/ span >     style = " display : inline " >Show Zoom Info< sp an cl ass= "token tag" >< sp an cl ass= "p un ctuation toke n" ><\/< \/ sp an > p>< \/ sp an >< \/ sp an >   < sp an cl ass= "token tag" >< sp an cl ass= "token tag" >< sp an cl ass= "p un ctuation toke n" ><\/< \/ sp an > div>< \/ sp an >< \/ sp an >   < sp an cl ass= "token tag" >< sp an cl ass= "token tag" >< sp an cl ass= "p un ctuation toke n" ><divclass</sp an>=<sp an cla ss = " attr-value tok en "> class="punctuation token">(<\/SPAN>config)<\/SPAN>{<\/SPAN>\n               this<\/SPAN>.<\/SPAN>config =<\/SPAN> config;<\/SPAN>\n               this<\/SPAN>.<\/SPAN>ZoomSetCheckbox.<\/SPAN>checked =<\/SPAN> config.<\/SPAN>settings.<\/SPAN>ZoomSetCheckbox;<\/SPAN>\n               this<\/SPAN>.<\/SPAN>ScaleSetCheckbox.<\/SPAN>checked =<\/SPAN> config.<\/SPAN>settings.<\/SPAN>ScaleSetCheckbox;<\/SPAN>\n               console.<\/SPAN>log<\/SPAN>(<\/SPAN>"Einstellungen aus Datei gelesen: "<\/SPAN>)<\/SPAN>;<\/SPAN>\n               console.<\/SPAN>log<\/SPAN>(<\/SPAN>config)<\/SPAN>;<\/SPAN>\n         \n   },\n getConfig:function(){\n settings = this.config.settings;\n if (this.ZoomSetCheckbox) {\n settings.ZoomSetCheckbox = this.ZoomSetCheckbox.checked;\n }\n if (this.ScaleSetCheckbox) {\n settings.ScaleSetCheckbox = this.ScaleSetCheckbox.checked;\n }\n this.config.settings = settings;\n console.log("Einstellungen in Datei geschrieben: " + settings);\n console.log(this.config);\n return this.config;\n},\n}\);\n}\);\n‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ </ code > </ pre > Dies liest die Zustände der Schaltfläche (this.XXXSetCheckbox) und schreibt sie in die config für jede App, in der sie verwendet wird, und liest die Konfiguration entsprechend den verwendeten Einstellungen. <h4 id = "toc-hId-1555079577" id = "toc-hId-1555079577" > Die Widget.html / Widget.js </h4 > Wie wir die Einstellungen im obigen Absatz behandelt haben, konzentrieren wir uns auf den Hauptcode in der Widget.html und Widget.js . Wir zeigen nur zwei Zeilen im Widget: Eine Zeile für den Zoom-Level, eine für die Skalierung. Daher ist die Datei Widget.html sehr kurz und besteht aus 2 Zeilen: <pre class = "lia-code-sample line-numbers language-none" ><code >< div class=" ZoomLeveLInfo "> \n & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ;<div data-dojo-attach-point=\"zoomInfoDiv\">Zoom Level: </div> \n & nbsp ; & nbsp ; & nbsp ; & nbsp ;<div data-dojo-attach-point=\"scaleInfoDiv\">Ungefähre Skalierung: "<\/SPAN><\/SPAN> data-dojo-attach-point<\/SPAN>=<\/SPAN>"<\/SPAN>scaleInfo"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN><\/<\/SPAN>p<\/SPAN>><\/SPAN><\/SPAN><\/<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN>\n<\/<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN>\n‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN><\/SPAN><\/CODE><\/PRE>Sie können einen ähnlichen Ansatz wie in der Setting.html<\/EM> sehen: Wir verwenden data-dojo-attach-points, um auf das div-Element zuzugreifen und den Inhalt dieses div zu ändern. Wir könnten dies inline machen, aber wir halten uns an die Struktur und definieren den JavaScript-Teil in der Widget.js.<\/EM><\/P><PRE class="lia-code-sample line-numbers language-none"><CODE>define<\/SPAN>(<\/SPAN>[<\/SPAN>\n    'dojo\/_base\declare'<\/SPAN>,<\/SPAN>\n    'dojo\/_base\lang'<\/SPAN>,<\/SPAN>\n    'jimu\/_BaseWidget'<\/SPAN>,<\/SPAN>\n    'dojo\/_on'<\/SPAN>,<\/SPAN> // da wir das div ändern, wenn die Karte verschoben wird "on.extent-change"<\/SPAN>\n    'esri\/_map'<\/SPAN> // da wir mit der Karte interagieren<\/Span>\n\n   function(declare, lang, BaseWidget, on, Map) {\n     return declare([BaseWidget], {\n          baseClass: 'jimu-widget-zoomlevelinfo',\n          postCreate: function(\n              this.inherited(arguments\n              this.own(on(1000<\/SPAN>)<\/SPAN>*<\/SPAN>1000<\/SPAN> ;<\/SPAN>\n               }<\/SPAN> sonst<\/SPAN> {<\/SPAN>\n                    dojo.<\/SPAN>destroy<\/SPAN>(<\/SPAN>dies<\/SPAN>.<\/SPAN>scaleInfoDiv)<\/SPAN>;<\/SPAN>\n               }<\/SPAN>\n          }<\/SPAN>\n     }<\/SPAN>)<\/SPAN>;<\/SPAN>\n}<\/SPAN>)<\/SPAN>;<\/SPAN>\n‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/Span><Span‍\/<Span‍\/<Span‍\/<Span‍\/<Span‍\/<Span‍\/<Span‍\/<Span‍\/<Span‍\/<Span‍\/<Span‍\/<Span‍\/<Span‍\/<Span‍\/<Span‍\/<Span‍\/<Span‍\/<Span‍\/<Span‍\/<\/span><\/CODE><\/PRE><H3 id="toc-hId--800563879" id="toc-hId--800563879">Die Manifest.json<\/H3>Um die neue benutzerdefinierte App in einer Web-App zu implementieren, müssen wir eine Datei namens manifest.json.<\/EM> Diese Datei enthält die grundlegenden Informationen über den Namen und die Haupteinstellungen:<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE>{\n  "name": "ZoomLevelInfo",\n  "platform": "HTML",\n  "version": "2.8",\n  "wabVersion": "2.8",\n  "author": "Esri Deutschland GmbH \/ Riccardo Klinger",\n  "description": "Dies ist ein Widget, um Maßstab und Zoomstufe der zugrunde liegenden Karte anzuzeigen.",\n  "copyright": "",\n  "license": "http:\/\/www.apache.org\/licenses\/LICENSE-2.0",\n  "properties": {\n    "inPanel": false, \/\/ da es außerhalb des Panels ist\n    "hasUIFile": true, \/\/ wir haben eine Einstellungs-UI-Datei\n    "supportMultiInstance": falseb4 \/\/ wir erlauben nur eine Instanz des Widgets.\n  } \n}&lt<EMOJI_34&gt><\/span>&lt<EMOJI_35&gt><\/span>&lt<EMOJI_36&gt><\/span>&lt<EMOJI_37&gt><\/span>&lt<EMOJI_38&gt><\/span>&lt<EMOJI_39&gt><\/span>&lt<EMOJI_40&gt><\/span>&lt<EMOJI_41&gt><\/span>&lt<EMOJI_42&gt><\/span>&lt<EMOJI_43&gt><\/span>&lt<EMOJI_44&gt><\/span>&lt<EMOJI_45&gt><\/span>&lt<EMOJI_46&gt><\/span>&lt<EMOJI_47&gt><\/span>&lt<EMOJI_48&gt><\/span>Jetzt können wir das Widget testen.<\/P>Testen des Widgets<\/H3>Da wir das Hauptwidget erstellt haben, sollten wir es jetzt in unserer WAB Developer-Installation testen. Platzieren Sie dazu den gesamten Ordner (in unserem Fall ZoomLevelInfo) im Client-Widget-Ordner des WAB (in meinem Fall "C:\WebAppBuilderForArcGIS\client\stemapp\widgets").<\/P>Für den Test starten Sie den Web AppBuilder neu und erstellen eine neue Anwendung:<\/P>Das Widget ist jetzt Teil des Web AppBuilders und kann als Widget ausgewählt werden:<\/P>Hosting des Widgets<\/H3>Wenn Ihre Tests erfolgreich waren, können Sie das Widget auf einem Server hosten und es in ArcGIS Online oder Ihrer ArcGIS Enterprise (>10.5) Umgebung als benutzerdefiniertes Widget implementieren. Wenn Sie das Portal besitzen, möchten Sie möglicherweise auch den Ordner innerhalb des WAB des Portals hinzufügen (in meinem Fall "C:\Program Files\ArcGIS\Portal\apps\webappbuilder\stemapp\widgets").<\/P>Beispiel herunterladen<\/H3>Wenn Sie das Beispiel verwenden möchten, nutzen Sie github hier. Oder laden Sie es direkt unten herunter.<\/P>

Finde mehr Beiträge mit dem Tag

Technologie

Kommentare

There are no comments yet

Nehmen Sie an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registrieren Sie ein kostenloses Konto.

Schnellzugriffe

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