ArcGIS Maps SDK for JavaScript でお手軽 地図 AI アプリケーション開発
はじめに
ArcGIS Maps SDK for JavaScript バージョン 5.0 における AI コンポーネント パッケージ（以下、AI コンポーネント）のベータ版がリリースされました。 このパッケージには、開発者がエージェント型マッピング アプリケーションを構築するための一連のコンポーネントが含まれています。エージェント型マッピング アプリケーションは、ユーザーが自然言語クエリーを使用して Web マップ内のデータを操作し、探索できるチャット インターフェースを提供します。これにより、エンド ユーザーは、シンプルで使いやすい UX を通じて Web マップと対話できるようになります。 今回は、この AI コンポーネントを使ったエージェント型マッピング アプリケーションの作成の手順と実際に利用できるエージェントについてご紹介します。
今回使用するもの
- ArcGIS Maps SDK for JavaScript 5.0
- データ
- 令和 7 年度仙台市熊出没情報
- 全国市区町村界データ 2025（宮城県のみ抜粋）
事前準備
現在 AI コンポーネントは、特定の条件を満たした Web マップでのみ動作します。その条件を満たすための準備について触れていきます。
利用するフィーチャ サービスのメタデータを設定する
Web マップ上に表示するフィーチャ サービスには、メタデータを設定する必要があります。 メタデータは、アイテムを説明する情報です。 メタデータがあることで、そのアイテムをよく知らない人でも、理解しやすくなります。 これは、AI がデータを解釈する際にも用いられています。特にエージェントは、ユーザーの入力に対して、その入力とともにレイヤーのメタデータを大規模言語モデル （LLM）に送信します。メタデータがあることで、どのレイヤーやフィールドを対象とするべきかをエージェントが探索しやすくなります。
ArcGIS では、ポータル上のアイテム情報のメタデータとフィールド情報のメタデータを作成、編集できます。 ArcGIS で提供される AI エージェントは、これらのメタデータが設定されていることを前提として設計されており、 AI コンポーネントが操作などを行う対象は、メタデータが設定されているフィーチャ サービスのみとなります。
メタデータの編集方法に関しては、ArcGIS ブログの「 AI 時代の GIS データ設計: メタデータが “答え” を決める」をご参考ください。 今回使用する「令和 7 年度仙台市熊出没情報」と「宮城県市区町村界」に アイテム情報、フィールド情報のメタデータをそれぞれ設定すると下図のようになります。
上記で設定したフィーチャ サービスをレイヤーとして追加した Web マップを作成します。 Map Viewer で作成した Web マップが下図です。
Web マップに埋め込みを生成する
上記で作成した Web マップは、このままだと AI コンポーネントでは利用することができません。 これは、AI コンポーネントで使用する LLM の応答精度を向上させるため、Web マップには、Web マップ アイテムのリソースとしてベクトルが埋め込まれている必要があるからです。 Web マップにおけるベクトル埋め込みとは、Web マップ内のすべてのフィーチャ レイヤーのレイヤー名やフィールド情報のメタデータをベクトル形式で表現するものです。これを実行することにより、AI エージェントは、LLM に情報を送信する前に、ユーザーの自然言語クエリーに最も関連性の高いレイヤーやフィールドを特定することができます。これは、レイヤーやフィールドの数が多い Web マップにおいて特に重要であり、エージェントの応答精度を向上させます。
実際に設定する手順としては、Web マップ のアイテム ページを開き、設定タブから「AI ベクトル埋め込みの管理」の欄までスクロールします。 「埋め込みの生成」をクリックすると埋め込みが生成され、AI エージェントでこの Web マップを利用できるようになります。
次からは、いよいよ AI コンポーネントについて深掘りしていきます。 まずは AI コンポーネントの要となる arcgis-assistant コンポーネントについて紹介します。
arcgis-assistant コンポーネントについて
AI コンポーネントによるエージェント型マッピング アプリケーションの中核となるのが、arcgis-assistant コンポーネントです。このコンポーネントは、Web マップを操作するためのチャット インターフェースを提供します。ただし、単体では動作せず、1 つ以上のエージェントを登録して初めて、Web マップを操作できます。このコンポーネントの主な役割は 2 つあります。1 つ目は、LLM で自然言語入力を処理し、プレーン テキストの応答を生成することです。2 つ目は、ほかのエージェントを介して、Web マップと連携するツールやアクションを実行し、その結果に基づいて応答を生成することです。そのため、arcgis-assistant を利用するには、実行対象となるエージェントの登録が必要です。
各 AI エージェントの役割
現在、AI コンポーネントでは 3 つのエージェントを利用することができます。 下記に各エージェントについてまとめます。
ナビゲーション エージェント
ナビゲーション エージェントは、場所移動に関する質問に対応しています。この場所移動には、住所や地名、レイヤーの範囲、レイヤー内のフィーチャ、Web マップのブックマーク、または座標への移動やズームが含まれます。
データ探索 エージェント
データ探索 エージェントは、Web マップ上に表示されているレイヤーの操作に対応しています。 フィーチャの検索、フィルタリング、統計情報の取得（件数・平均・最大値・最小値など）、空間的な近接関係の評価などを行ってくれます。
ヘルプ エージェント
ヘルプ エージェントは、アシスタントの機能や登録されているエージェントに関する案内をしてくれます。 また、Web マップに含まれるデータに関する質問にも回答してくれます。
エージェント型マッピング アプリケーションを作ってみよう
ここまでご紹介した AI コンポーネントですが、Web コンポーネントで利用可能になっているので、 実装は、以下のコードのみでエージェント型マッピング アプリケーションを作成できます。
下記の html 内の webmap-id には、レイヤーごとにメタデータの設定をし、ベクトル埋め込みをした Web マップの アイテム ID をいれてください。
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>令和 7 年度仙台市熊出没マップ | ArcGIS Maps SDK for JavaScript</title>
<!-- CDN から ArcGIS Maps SDK for JavaScript を取得 -->
<script type="module" src="https://js.arcgis.com/5.0/"></script>
</head>
<body>
<calcite-shell>
<!—- webmap-id を変更する -->
<arcgis-map id="map" item-id="<webmap-id>">
<arcgis-zoom slot="top-left"></arcgis-zoom>
<arcgis-expand slot="top-left">
<arcgis-legend></arcgis-legend>
</arcgis-expand>
</arcgis-map>
<calcite-shell-panel slot="panel-end" width="l" id="assistant-panel">
<calcite-panel>
<arcgis-assistant
log-enabled
copy-enabled
reference-element="#map"
heading="仙台市熊出没マップ"
description="令和 7 年度の仙台市のクマ目撃情報と宮城県の市区町村界のマップです">
<!--ナビゲーション エージェント コンポーネント -->
<arcgis-assistant-navigation-agent></arcgis-assistant-navigation-agent>
<!-- データ探索 エージェント コンポーネント -->
<arcgis-assistant-data-exploration-agent></arcgis-assistant-data-exploration-agent>
<!-- ヘルプ エージェント コンポーネント -->
<arcgis-assistant-help-agent></arcgis-assistant-help-agent>
</arcgis-assistant>
</calcite-panel>
</calcite-shell-panel>
</calcite-shell>
</body>
</html>
AI が Web マップの情報を元に動くかどうか実際に試してみましょう。レイヤーとして利用しているフィーチャ サービスの属性情報も指定して、下記のプロンプトを入力してみます。
10 月の青葉区における熊の目撃情報を教えてください
|
実行した結果は、以下の動画の通りです。
入力したプロンプトに従って、Web マップにフィルターが適用され、青葉区にズームされました。
おわりに
ここまでの通り、設定さえすれば、簡単にエージェント型マッピング アプリケーションを作成することができました。 今回ご紹介したエージェント以外の機能を自分で作成したいという方は、カスタム エージェントの作成にチャレンジしてみてください。 カスタム エージェントを追加することで、より多機能なエージェント型マッピング アプリケーションを作成することができます。ぜひ、 お手元のデータをご準備の上、近未来の GIS アプリケーションをご体験ください。
参考リンク
