首頁 >web前端 >js教程 >使用 OpenAI 增強您的 ArcGIS Web 應用程式

使用 OpenAI 增強您的 ArcGIS Web 應用程式

DDD原創: 2025-01-02 17:52:07551瀏覽

隨著我在編碼經驗和職業生涯中的進步（老實說，在我的一生中），我一直在尋找有趣的方法來將我學到的知識與我所知道的聯繫起來。最近，我一直在為希望在地圖應用程式中添加一些人工智慧的 Web 開發人員創建一個影片系列。我很高興測試不同的人工智慧庫並向開發人員展示在他們的應用程式中實現這些庫是多麼容易。

今天，我將指導您完成一個教程，該教程展示瞭如何使用最少的程式碼產生有關位置的見解。我們將使用 OpenAI API 以及 ArcGIS Maps SDK for JavaScript 和現代 Web 元件方法。這是一種向 Web 應用程式添加強大的地圖功能的簡單且聲明性的方法。如果您不熟悉這些工具，請不要擔心 - 我將指導您完成每個步驟。

AI ArcGIS JS SDK 專案設置

首先，我們將使用簡單的 HTML、CSS 和 JS 設定。在 Visual Studio Code 中，我將建立 HTML、CSS 和 JS 檔案。在 HTML 中，我將使用 ! 輸入基本 HTML 設定的捷徑。我還會確保鏈接我的 CSS 和 JS 文件。這是目前為止的樣子：

    <!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 設定

由於我使用的是 ArcGIS Maps SDK for JS 元件，因此我需要透過 CDN 新增幾個函式庫 — Calcite 元件和 ArcGIS JS SDK。為了簡單起見，我們使用 CDN，但對於大型生產應用程序，建議使用 npm。

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

在使用 ArcGIS 地圖樣式之前，我將使用 ArcGIS API 金鑰設定驗證。 注意：切勿在前端公開暴露您的 API 金鑰。在生產環境中，您應該使用後端伺服器來安全地處理 API 請求和管理金鑰。現在，為了簡單起見，我將在 HTML 檔案中將其包含在所有其他腳本標記之上。

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

現在，我可以使用自訂元素來表示地圖，並根據自己的喜好設定底圖、中心（經度、緯度）和縮放屬性。

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

最終 HTML 檔案應如下所示：

    <!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 設定

現在，進入 CSS。我們將首先定位 html、body 和 arcgis-map 元素。由於我希望我的地圖佔據整個頁面，因此我將確保沒有預先定義的填充或邊距，並且它佔據頁面高度和寬度的 100%。

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

此時，您將能夠在螢幕上看到您的 ArcGIS JS 地圖。功能僅限於縮放和平移，所以讓我們繼續！

Enhance Your ArcGIS Web App with OpenAI

JS設定

現在，進入有趣的部分 - 讓我們的地圖與 OpenAI 互動！首先，我們需要定義用於身份驗證的 OpenAI API 金鑰。您需要擁有 OpenAI 帳戶才能獲得它。之後，我們將透過從 DOM 中選擇自訂元素並將其指派給 arcgisMap 變數來取得地圖。這讓我們能夠以程式方式操作地圖。

    <!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>

說到與我們的地圖交互，我們將繼續向其添加一個事件偵聽器。我們將捕獲 arcgisViewClick 事件，該事件會在使用者點擊地圖上的任意位置時觸發。這將幫助我們獲取點擊的位置並將其發送到 OpenAI API。

使用者點擊後，我們將從事件詳細資料中提取地圖座標（mapPoint）並將其儲存在 params 物件中。這為我們提供了用戶點擊的位置（經度、緯度）。我們還將使用 outFields: "*" 來請求單擊的功能的所有屬性（您可以根據您的需求對其進行細化）。

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

現在，讓我們繼續取得 OpenAI 的回應。首先，我們使用 params.location 中的經度和緯度定義將傳送到 API 的提示。接下來，我們將從回應中解構選擇數組。這是 OpenAI 將根據我們的提示儲存生成的內容的地方。然後，我們將使用 fetch() 呼叫 OpenAI API，向聊天/完成端點發送 POST 請求。標頭包括 Content-Type: application/json 來指示我們正在傳送和接收 JSON，以及使用不記名令牌進行驗證的授權。

在正文中，我們指定模型（我在這裡選擇 gpt-4o 模型）。然後，我們將在訊息欄位中傳遞具有「使用者」角色的提示，表明這是使用者輸入。發出請求後，我們使用await取得回應並呼叫.json()來解析它。

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

最後，我們使用 arcgisMap.popup.open() 在點擊的位置顯示彈出視窗。經度和緯度是從 params.location 設定的，標題是您選擇的任何內容。內容設定為 AI 生成的choices[0].message.content 文本，在地圖上顯示事實。

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

最終應用程式的實際應用

一切設定完畢後，該應用程式現在允許使用者點擊地圖上的任意位置。根據他們的點擊，它將坐標發送到 OpenAI API。 API 產生有關該位置的相關事實，然後將其顯示在地圖上的彈出視窗中。但不要就此止步 — 享受其中的樂趣！ 您可以輕鬆變更傳送到 OpenAI 的提示。例如，您可以要求提供一個可怕的事實？、一個有趣的事實？，甚至要求它包含表情符號！？

這裡有一個包含完整程式碼的 CodePen，供您參考。

Enhance Your ArcGIS Web App with OpenAI

結論

透過遵循這些步驟，我們成功創建了一個人工智慧驅動的地圖應用程式。以下是我們所做工作的快速回顧：

透過 CDN 使用 ArcGIS Maps SDK for JavaScript Web Components 設定地圖。
使用 OpenAI API 根據點擊位置產生動態內容。
在地圖上的彈出視窗中顯示該內容。

透過這種方法，您已經看到將 AI 和地圖工具整合到您的 Web 應用程式中是多麼容易。關鍵要點是，它確實需要最少的設定和程式碼來建立功能強大的應用程序，將即時用戶互動與人工智慧見解相結合。

因此，無論您是在增強地圖專案還是在探索使用人工智慧的新方法，我希望我今天對您有所啟發。我很高興看到你未來的任何創作，所以請在這裡或在我的社交媒體上與我分享。我很想看看你的作品！

本文由 Esri 開發者倡導者 Courtney Yatteau 撰寫。本文所表達的觀點僅代表 Courtney 的觀點，不一定代表其雇主的觀點、策略或意見。如果您有任何回饋，請隨時按讚和/或評論。此外，如果您有任何問題或意見希望私下發送，您可以透過 LinkedIn、X、Bluesky、或電子郵件聯繫 Courtney。如果您正在考慮轉行、希望進入科技領域，或者對在 Esri 工作的感覺感到好奇，那麼請繼續關注未來的貼文！您也可以查看 Esri 的職業頁面或此影片以了解更多資訊。

以上是使用 OpenAI 增強您的 ArcGIS Web 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何阻止 HTML 按鈕提交表單？下一篇：如何阻止 HTML 按鈕提交表單？

看更多