Heim >Web-Frontend >js-Tutorial >Erweitern Sie Ihre ArcGIS-Web-App mit OpenAI

Erweitern Sie Ihre ArcGIS-Web-App mit OpenAI

DDDOriginal: 2025-01-02 17:52:07559Durchsuche

Im Laufe meiner Programmiererfahrungen und meiner Karriere (und, seien wir ehrlich, mein ganzes Leben lang) bin ich ständig auf der Suche nach unterhaltsamen Möglichkeiten, das, was ich lerne, mit dem zu verbinden, was ich weiß. Zuletzt habe ich eine Videoserie für Webentwickler erstellt, die ihren Kartenanwendungen ein wenig KI hinzufügen möchten. Es hat mir Spaß gemacht, verschiedene KI-Bibliotheken zu testen und Entwicklern zu zeigen, wie einfach es sein kann, diese in ihre Apps zu implementieren.

Heute führe ich Sie durch ein Tutorial, das zeigt, wie Sie mit minimalem Code Erkenntnisse über einen Standort generieren. Wir werden die OpenAI-API zusammen mit dem ArcGIS Maps SDK für JavaScript mit dem modernen Webkomponenten-Ansatz verwenden. Dies ist eine einfache und deklarative Möglichkeit, Ihren Web-Apps leistungsstarke Zuordnungsfunktionen hinzuzufügen. Machen Sie sich keine Sorgen, wenn Sie mit einem dieser Tools noch nicht vertraut sind – ich werde Sie durch jeden Schritt führen.

AI ArcGIS JS SDK-Projekteinrichtung

Zu Beginn verwenden wir ein einfaches HTML-, CSS- und JS-Setup. In Visual Studio Code erstelle ich die HTML-, CSS- und JS-Dateien. Im HTML verwende ich das ! Geben Sie eine Verknüpfung für die grundlegende HTML-Einrichtung ein. Ich werde auch darauf achten, meine CSS- und JS-Dateien zu verlinken. So sieht es bisher aus:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="/styles.css" />
        <script src="/scripts.js"></script>
      </head>
      <body>
      </body>
    </html>

HTML-Setup

Da ich das ArcGIS Maps SDK für JS-Komponenten verwende, muss ich über CDN einige Bibliotheken einbinden – Calcite Components und das ArcGIS JS SDK. Der Einfachheit halber verwenden wir CDN, für größere Produktionsanwendungen wird jedoch die Verwendung von npm empfohlen.

    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />
    <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />

    <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>    
    <script src="https://js.arcgis.com/4.31/"></script>
    <script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script>

Bevor ich die ArcGIS-Kartenstile verwende, richte ich die Authentifizierung mit meinem ArcGIS-API-Schlüssel ein. Hinweis: Geben Sie Ihren API-Schlüssel niemals öffentlich im Frontend preis. In einer Produktionsumgebung sollten Sie einen Backend-Server verwenden, um API-Anfragen sicher zu verarbeiten und Schlüssel zu verwalten. Der Einfachheit halber füge ich dies vorerst vor allen anderen Skript-Tags in meine HTML-Datei ein.

    <script>
       var esriConfig = {
         apiKey: "yourKey"
       };
    </script>

Jetzt kann ich das benutzerdefinierte Element verwenden, um die Karte darzustellen und die Grundkarte, die Mitte (Längengrad, Breitengrad) und die Zoomeigenschaften nach meinen Wünschen festzulegen.

    <arcgis-map basemap="arcgis/topographic" center="-77.02, 38.89" zoom="13">
      <arcgis-zoom position="top-left"></arcgis-zoom>
    </arcgis-map>

So sollte die endgültige HTML-Datei aussehen:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>OpenAI + ArcGIS Map</title>

        <script>
          var esriConfig = {
            apiKey: "yourKey"
          };
        </script>

        <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />
        <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />
        <link rel="stylesheet" href="/styles.css" />

        <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>    
        <script src="https://js.arcgis.com/4.31/"></script>
        <script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script>
      </head>
     <body>
        <arcgis-map basemap="arcgis/topographic" center="-77.02, 38.89" zoom="13">
          <arcgis-zoom position="top-left"></arcgis-zoom>
        </arcgis-map>
        <script src="/scripts.js"></script>
     </body>
    </html>

CSS-Setup

Nun zum CSS. Wir beginnen mit der Ausrichtung auf die Elemente „html“, „body“ und „arcgis-map“. Da ich möchte, dass meine Karte die gesamte Seite einnimmt, stelle ich sicher, dass es keine vordefinierten Abstände oder Ränder gibt und dass sie 100 % der Höhe und Breite der Seite einnimmt.

    html,
    body,
    arcgis-map {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

An diesem Punkt können Sie Ihre ArcGIS JS-Karte auf dem Bildschirm sehen. Die Funktionalität ist auf das Zoomen und Schwenken beschränkt, also machen wir weiter!

Enhance Your ArcGIS Web App with OpenAI

JS-Setup

Jetzt kommen wir zum spaßigen Teil: Unsere Karte für die Interaktion mit OpenAI zu sorgen! Zuerst müssen wir unseren OpenAI-API-Schlüssel für die Authentifizierung definieren. Um eines zu erhalten, benötigen Sie ein Konto bei OpenAI. Anschließend greifen wir auf die Karte zu, indem wir das benutzerdefinierte Element aus dem DOM auswählen und es der Variablen arcgisMap zuweisen. Dadurch können wir die Karte programmgesteuert bearbeiten.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="/styles.css" />
        <script src="/scripts.js"></script>
      </head>
      <body>
      </body>
    </html>

Apropos Interaktion mit unserer Karte: Wir werden ihr einen Ereignis-Listener hinzufügen. Wir erfassen das arcgisViewClick-Ereignis, das ausgelöst wird, wenn der Benutzer irgendwo auf die Karte klickt. Dies hilft uns, den angeklickten Ort zu ermitteln und ihn an die OpenAI-API zu senden.

Nachdem der Benutzer geklickt hat, extrahieren wir die Kartenkoordinaten (mapPoint) aus den Ereignisdetails und speichern sie im params-Objekt. Dadurch erhalten wir den Ort (Längengrad, Breitengrad), auf den der Benutzer geklickt hat. Wir verwenden auch outFields: „*“, um alle Attribute für die angeklickte Funktion anzufordern (Sie können dies je nach Bedarf verfeinern).

    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />
    <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />

    <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>    
    <script src="https://js.arcgis.com/4.31/"></script>
    <script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script>

Lassen Sie uns nun damit fortfahren, die Antwort von OpenAI zu erhalten. Zuerst definieren wir die Eingabeaufforderung, die an die API gesendet wird, indem wir den Längen- und Breitengrad aus params.location verwenden. Als Nächstes zerstören wir das Auswahlarray aus der Antwort. Hier speichert OpenAI den generierten Inhalt basierend auf unserer Eingabeaufforderung. Anschließend rufen wir die OpenAI-API mit fetch() auf und senden eine POST-Anfrage an den Chat-/Abschlussendpunkt. Die Header enthalten „Content-Type: application/json“, um anzugeben, dass wir JSON senden und empfangen, sowie „Autorisierung“ mit dem Bearer-Token zur Authentifizierung.

Im Text geben wir das Modell an (ich wähle hier das gpt-4o-Modell). Anschließend übergeben wir die Eingabeaufforderung im Nachrichtenfeld mit der Rolle „Benutzer“, die auf die Benutzereingabe hinweist. Nachdem wir die Anfrage gestellt haben, verwenden wir „await“, um die Antwort abzurufen, und rufen .json() auf, um sie zu analysieren.

    <script>
       var esriConfig = {
         apiKey: "yourKey"
       };
    </script>

Schließlich verwenden wir arcgisMap.popup.open(), um ein Popup an der angeklickten Stelle anzuzeigen. Der Längen- und Breitengrad wird über params.location festgelegt und der Titel ist frei von Ihrer Wahl. Der Inhalt wird auf den von der KI generierten Text aus „choices[0].message.content“ festgelegt, der die Tatsache auf der Karte anzeigt.

    <arcgis-map basemap="arcgis/topographic" center="-77.02, 38.89" zoom="13">
      <arcgis-zoom position="top-left"></arcgis-zoom>
    </arcgis-map>

Endgültige App in Aktion

Sobald alles eingerichtet ist, können Benutzer mit dieser App jetzt überall auf der Karte klicken. Basierend auf ihrem Klick werden die Koordinaten an die OpenAI-API gesendet. Die API generiert einen relevanten Fakt zu diesem Standort, der dann in einem Popup auf der Karte angezeigt wird. Aber hören Sie hier nicht auf – Viel Spaß damit! Sie können die an OpenAI gesendete Eingabeaufforderung ganz einfach ändern. Sie könnten zum Beispiel nach einer gruseligen Tatsache fragen?, nach einer lustigen? oder sogar darum bitten, Emojis einzuschließen! ?

Als Referenz finden Sie hier einen CodePen mit dem vollständigen Code.

Enhance Your ArcGIS Web App with OpenAI

Abschluss

Durch Befolgen dieser Schritte haben wir erfolgreich eine KI-gestützte Kartenanwendung erstellt. Hier ist eine kurze Zusammenfassung dessen, was wir getan haben:

Richten Sie die Karte mit dem ArcGIS Maps SDK für JavaScript-Webkomponenten über CDN ein.
Verwendet die OpenAI-API, um dynamische Inhalte basierend auf angeklickten Orten zu generieren.
Der Inhalt wurde in einem Popup auf der Karte angezeigt.

Mit diesem Ansatz haben Sie gesehen, wie einfach es ist, KI- und Mapping-Tools in Ihre Webanwendungen zu integrieren. Die wichtigste Erkenntnis ist, dass nur minimaler Setup- und Codeaufwand erforderlich ist, um leistungsstarke Anwendungen zu erstellen, die Benutzerinteraktionen in Echtzeit mit KI-Erkenntnissen kombinieren.

Egal, ob Sie Ihre Kartierungsprojekte verbessern oder neue Wege zur Nutzung von KI erkunden, ich hoffe, ich habe Sie heute inspiriert. Ich würde gerne alle zukünftigen Kreationen sehen, die Sie machen, also teilen Sie sie bitte hier oder mit mir in meinen sozialen Netzwerken. Ich würde gerne Ihre Arbeit sehen!

Dieser Artikel wurde von Courtney Yatteau, einer Developer Advocate bei Esri, verfasst. Die in diesem Artikel geäußerten Meinungen stammen ausschließlich von Courtney und spiegeln nicht unbedingt die Ansichten, Strategien oder Meinungen ihres Arbeitgebers wider. Wenn Sie Feedback haben, können Sie es gerne liken und/oder kommentieren. Wenn Sie außerdem Fragen oder Kommentare haben, die Sie lieber privat senden möchten, können Sie Courtney über LinkedIn, X, Bluesky, oder E-Mail kontaktieren. Wenn Sie über einen Karrierewechsel nachdenken, in die Technik einsteigen möchten oder neugierig sind, wie es ist, bei Esri zu arbeiten, dann bleiben Sie auf dem Laufenden über zukünftige Beiträge! Weitere Informationen finden Sie auch auf der Karriereseite von Esri oder in diesem Video.

Das obige ist der detaillierte Inhalt vonErweitern Sie Ihre ArcGIS-Web-App mit OpenAI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie verhindert man, dass HTML-Schaltflächen Formulare senden?Nächster Artikel：Wie verhindert man, dass HTML-Schaltflächen Formulare senden?

In Verbindung stehende Artikel

Mehr sehen