OpenAI で ArcGIS Web アプリを強化する
私はコーディングの経験とキャリアを重ねるにつれて (そして正直に言うと、人生を通じて)、学んだことと知っていることを結びつける楽しい方法を常に探しています。最近では、地図アプリケーションに 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 マップが画面上に表示されるようになります。機能はズームとパンに限定されているので、続けてみましょう!
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 をここに示します。
結論
これらの手順に従って、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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1657
14
1415
52
1309
25
1257
29
1229
24
javascriptの分解：それが何をするのか、なぜそれが重要なのか
Apr 09, 2025 am 12:07 AM
JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。
JavaScriptの進化：現在の傾向と将来の見通し
Apr 10, 2025 am 09:33 AM
JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。
JavaScriptエンジン：実装の比較
Apr 13, 2025 am 12:05 AM
さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。
JavaScript：Web言語の汎用性の調査
Apr 11, 2025 am 12:01 AM
JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。
Python vs. JavaScript：学習曲線と使いやすさ
Apr 16, 2025 am 12:12 AM
Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）
Apr 11, 2025 am 08:22 AM
この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します
C/CからJavaScriptへ：すべてがどのように機能するか
Apr 14, 2025 am 12:05 AM
C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。
JavaScriptをインストールするにはどうすればよいですか？
Apr 05, 2025 am 12:16 AM
JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1）ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2）node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。
