ホームページ >ウェブフロントエンド >jsチュートリアル >OpenAI で ArcGIS Web アプリを強化する

OpenAI で ArcGIS Web アプリを強化する

DDDオリジナル: 2025-01-02 17:52:07552ブラウズ

私はコーディングの経験とキャリアを重ねるにつれて (そして正直に言うと、人生を通じて)、学んだことと知っていることを結びつける楽しい方法を常に探しています。最近では、地図アプリケーションに AI を少し追加したいと考えている Web 開発者向けのビデオシリーズを作成しています。さまざまな AI ライブラリをテストし、これらをアプリに実装することがいかに簡単かを開発者に示すのは楽しかったです。

今日は、最小限のコードで場所に関する分析情報を生成する方法を示すチュートリアルをご案内します。最新の Web コンポーネントアプローチを使用して、OpenAI API を ArcGIS Maps SDK for JavaScript と併用します。これは、強力なマッピング機能を 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のセットアップ

JS コンポーネントに ArcGIS Maps SDK を使用しているため、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 リクエストを送信します。ヘッダーには、JSON を送受信していることを示す Content-Type: application/json と、認証用の Bearer トークンによる Authorization が含まれています。

本文では、モデルを指定します (ここでは gpt-4o モデルを選択しています)。次に、「ユーザー」ロールを使用してメッセージフィールドにプロンプトを渡し、それがユーザー入力であることを示します。リクエストを行った後、 await を使用してレスポンスを取得し、.json() を呼び出してそれを解析します。

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

最後に、arcgisMap.popup.open() を使用して、クリックされた場所にポップアップを表示します。経度と緯度はparams.locationから設定され、タイトルは任意です。コンテンツは、choices[0].message.content から AI が生成したテキストに設定され、地図上に事実が表示されます。

    <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

結論

これらの手順に従って、AI を活用した地図アプリケーションを作成することに成功しました。これまでに行ったことを簡単に要約します:

CDN 経由で ArcGIS Maps SDK for JavaScript Web Components を使用してマップを設定します。
OpenAI API を使用して、クリックされた場所に基づいて動的コンテンツを生成しました。
そのコンテンツを地図上のポップアップに表示しました。

このアプローチを使用すると、AI とマッピングツールを Web アプリケーションに統合することがいかに簡単であるかがわかりました。重要な点は、リアルタイムのユーザーインタラクションと AI の洞察を組み合わせた強力なアプリケーションを構築するには、最小限のセットアップとコードしか必要としないということです。

マッピングプロジェクトを強化している場合でも、AI の新しい使用方法を模索している場合でも、今日の私があなたにインスピレーションを与えられれば幸いです。今後あなたが作る作品があればぜひ見てみたいので、ここまたは私のソーシャルで私と共有してください。あなたの作品をぜひ見てみたいです!

この記事は、Esri の開発者擁護者 Courtney Yatteau によって書かれました。この記事で表明された意見はコートニーのみによるものであり、必ずしも彼女の雇用主の見解、戦略、意見を表すものではありません。ご意見がございましたら、お気軽に「いいね」やコメントをお願いいたします。さらに、非公開で送信したい質問やコメントがある場合は、LinkedIn、X、Bluesky、、または電子メールを通じてコートニーに問い合わせることができます。転職を検討している方、テクノロジー業界への就職を検討している方、Esri で働くのがどのようなものなのか興味がある方は、今後の投稿にご期待ください。詳細については、Esri の採用情報ページまたはこのビデオをご覧ください。

以上がOpenAI で ArcGIS Web アプリを強化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML ボタンによるフォームの送信を停止するにはどうすればよいですか?次の記事：HTML ボタンによるフォームの送信を停止するにはどうすればよいですか?

続きを見る