マップウィジェット—ArcGIS Experience Builder

マップウィジェットでは、2D および 3D の地理情報を表示できます。マップで [ズーム]、[現在地]、[検索]、[計測] などのツールを有効化できます。

例

このウィジェットを使用して、次のようなアプリの設計要件をサポートします。

2D および 3D のマップの比較を示す必要がある場合、 2 つのマップウィジェットを追加し、トリガーとアクションを作成して、いずれかのマップを操作したときにビューを同期できます。
マップ上のフィーチャをクリックして、フィーチャ情報ウィジェットにレコードを表示します。
マップ上のフィーチャのクリックに応じてリストウィジェットをフィルター処理する要件があります。

使用上の注意

1 つのマップを表示することも、2 つのマップを切り替えるオプションを含めることもできます。複数のマップウィジェットを追加することで、アプリに複数のマップを含めることができます。

マップウィジェットでは、Web マップや Web シーンなどのデータソースが必要です。ツールを含めた場合、このツールは、デザインモードと最終アプリの両方でウィジェットにサイズに基づいてマップ上に自動的に配置されます。

ヒント:

複数のレイヤーを含む Web マップまたは Web シーンがあり、マップウィジェットごとにデフォルトで表示するレイヤーを指定したい場合は、[データ] タブで同じ Web マップまたは Web シーンを複数回追加し、マップまたはシーンのコピーごとに異なるサブレイヤーを非表示にし、各コピーを異なるマップウィジェットに接続できます。

1 つのマップからレイヤーの表示設定を構成し、それを別のマップウィジェットで使用する方法の詳細

設定

マップウィジェットには次の設定があります。

[マップの選択] - Web マップおよび Web シーンのデータソースを追加します。
[初期表示] - ウィジェットに読み込まれたときのマップの初期表示位置を設定します。
- [デフォルト] - Web マップまたは Web シーンで設定されたマップの配置を使用します。
- [カスタム] - マップのカスタム位置を作成して、初期表示を変更します。
[ツール] - ユーザーがマップを操作するためのツールを含めます。
- [ズーム] - マップを拡大縮小します。
- [ホーム] - マップの初期表示位置 (範囲) にマップをズームします。
- [ナビゲーション] - マップ画面移動/回転ツールを含めます。これらのツールは、マップウィジェットで 3D Web シーンを表示している場合に表示されます。
- [現在地] - ユーザーの現在位置を表示します。
- [コンパス] - 2D マップまたは 3D マップの現在のビューに対してどちらが北かを示します。
- [検索] - 組織またはポータルのジオコーディングサービスに基づいて場所を検索します。ポップアップをオンにした場合、検索結果のポップアップが表示されます。
- [レイヤー] - マップに含まれるレイヤーとシンボルをリスト形式で表示し、それらのオン/オフを切り替える機能を提供します。
- [背景地図] - ベースマップのギャラリーを表示します。
- [計測] - 面積と距離を計測するための計測ツールを含めます。計測ツールではスナップが使用され、ポインターはマップ上のフィーチャにスナップします。計測中に、Ctrl キーを押したままにすることで、スナップを一時的にオフにすることができます。
- [全画面] - 画面全体を使用してマップを表示します。
- [縮尺記号] - メートル法またはメートル法以外の単位を表示し、さまざまな座標系に動的に対応する縮尺記号をマップ上に含めます。
- [選択] - さまざまな選択ツールおよび選択モードを使用して、マップ上のフィーチャを選択します。ユーザーは以下の選択ツールを使用し、描画されたポリゴン内に完全に含まれる、または部分的に含まれるフィーチャを選択できます。
  - [四角形] - クリックおよびドラッグし、フィーチャに四角形を描画します。
  - [なげなわ] - マップをクリックしてポリゴンの頂点を作成するか、ポインターを使って描画し、フリーハンドで図形を作成します。ダブルクリックするとポリゴンが閉じ、そこに含まれるフィーチャが選択されます。
  - [円] - クリックおよびドラッグし、フィーチャに円を描画します。
  - [ライン] - マップをクリックして、ラインの頂点を作成します。ダブルクリックするとラインが終了し、交差するフィーチャが選択されます。
  - [ポイント] - マップをクリックしてポイントを配置し、交差するフィーチャを選択します。
  次の 4 つの方法で、複数のフィーチャを選択できます。
  - 新しい選択ツールで描画するたびに、フィーチャの選択セットを作成します。これがデフォルトです。
  - 現在の選択セットに追加します (Shift キーを押しながら描画する)。
  - 現在の選択セットからフィーチャを削除します (Windows の場合は、Ctrl キーを押しながら描画。Mac の場合は、Cmd キーを押しながら描画)。
  - 現在の選択セットからフィーチャを選択します (Windows の場合は、Ctrl + Shift キーを押しながら描画。Mac の場合は、Cmd + Shift キーを押しながら描画)。
  ユーザーが選択を行ったら、選択ツールアイコンは進行状況アイコンになります。多数のフィーチャを選択すると、選択のプロセスに長い時間がかかることがあります。ユーザーは進行状況ボタンをクリックし、選択のプロセスを停止できます。
- [範囲の移動] - ユーザーが実行時に訪問した範囲を前後に移動します。
- 概観図 - 展開可能な差し込みマップを追加します。概観図はメインマップの小型版であり、メインマップの範囲を表すロケーター四角形が表示されています。ロケーター四角形をクリックしてドラッグすると、メインマップがその新しい位置にズームします。このツールは小画面レイアウトでは表示されません。
[ツールレイアウト] - 大画面および中画面のデバイスでのマップツールのレイアウトを選択します。
注意:
マップウィジェットでは、ウィジェットが中画面および小画面のデバイスに対応しやすいよう、ウィジェットの高さに応じてツールを自動的に非表示にします。たとえば、マップウィジェットの高さが 465 ピクセルよりも小さい場合、計測ツールと場所検索ツールはウィジェットの設定でオンになっていても、小画面および中画面デバイスでは表示されません。ウィジェットの高さが小さくなるにつれ、表示されるツール数も少なくなります。最後まで表示されるのは、全画面、検索、ズーム、縮尺記号、コンパスツールです。
オプション
- [フィーチャの選択色] - マップ内で選択したフィーチャのハイライト色と透過表示を変更します。ハイライトの塗りつぶしとアウトラインをカスタマイズできます。
- [スクロールズームの有効化] - マウスホイールによるズーム、タッチスクリーンでの 1 本指でのマップ画面移動を有効にします。
- [ポップアップの有効化] - マップ上のポップアップを有効化します。アプリにフィーチャ情報ウィジェットも含まれている場合、この設定をオフにすることが望ましいです。データソースに関連データがあり、Map Viewer のポップアップで関連レコードを構成する場合、Experience Builder のポップアップで関連レコードを表示することができます。
  - [フィーチャ選択時にポップアップを表示] - ユーザーが別のウィジェット (テーブルウィジェットやリストウィジェットなど) でマップフィーチャを選択したときに、マップ上にポップアップを表示します。
  - ポップアップのドッキング - デフォルトで、ポップアップをドッキングします。ポップアップを、マップウィジェットのフレーム内の 6 つのアンカーポイントのいずれかに構成して表示することができます。この設定にかかわらず、ユーザーは実行時にポップアップウィンドウで [ドッキング] または [ドッキング解除] をクリックして、ポップアップが表示される場所を変更できます。
- [シーンの品質モード] (Web シーン向け) - 視覚効果と読み込み効率のバランスをとることで、Web シーンの品質をコントロールします。
  - [低] - データの負荷を低減して、パフォーマンス、安定性、速度を向上します。
  - [中] - パフォーマンスと品質を同等に最適化します。
  - [高] - 水の反射など、視覚化の品質を向上します。
[クライアントサイドクエリの有効化] - これらの切り替えボタンをオンにすると、アプリ内のウィジェットはクライアントサイドクエリを使用して Web マップのデータを操作します。複数のマップウィジェットに同じ Web マップを接続する場合は、Web マップに対してクライアントサイドクエリを一度オンにするだけで済みます。
注意:
Web シーンは、クライアントサイドクエリをサポートしていません。

クライアントサイドクエリの利点は、サーバーでの要求が減り、アプリのパフォーマンスが向上することです。クライアントサイドクエリを使用すると、サーバーに対するネットワークリクエストの数が大幅に減少します。さらに、クライアントサイドクエリは、サーバーサイドクエリよりも高速です。フィーチャを選択してチャートを更新するなどのデータ関連タスクは、高速に実行されます。
クライアントサイドクエリの欠点は、マップ範囲を変更したときに、マップフィーチャの読み込みに時間がかかることです。
注意:
サーバーに負荷のかかる可能性がある一般的な Experience Builder アプリの構成は、現在のマップ範囲に基づいて更新されるリストウィジェットです。
サーバーの負荷のかけすぎを避けるために、[範囲の変更] トリガーと [データレコードのフィルター] メッセージアクションを使用するようにマップウィジェットを構成する場合は、クライアントサイドクエリをオンにすることをお勧めします。これは、多数のユーザーがアプリに同時にアクセスすると想定される場合は特に重要です。
注意:
クライアントサイドクエリの既知の制限については、ArcGIS Maps SDK for JavaScript のドキュメントをご参照ください。

操作オプション

マップウィジェットは、ウィジェットの設定で [アクション] タブのトリガーの設定をサポートしています。 2 つのマップウィジェットを同期するには、両ウィジェットに [範囲の変更] トリガーを追加し、別のマップをそれぞれのターゲットとして選択して、[画面移動] アクションおよび [ズーム] アクションを選択します。 Web マップの場合、[ズーム] 同期には、マップの回転動作が含まれます。 Web シーンの場合、回転と傾斜の動作が含まれます。

注意:

マップウィジェットに [ズーム] アクションと [画面移動] アクションの両方が構成されている場合、[ズーム] アクションの方が [画面移動] よりも優先されます。つまり、ユーザーがマップの画面移動とズームを同時に行った場合、[画面移動] アクションは無視されます。

マップが他のウィジェットを操作するトリガーとメッセージアクションも設定できます。たとえば、リストウィジェットがマップ上に表示されるフィーチャのみを示すアクショントリガーを追加できます。マップウィジェットは、ポップアップに表示され、ユーザーがデータのエクスポートや、テーブルのレコードの表示などを行うためのデータアクションもサポートしています。トリガー、メッセージアクション、データアクションは、ウィジェットの設定の [アクション] タブで定義および管理されます。マップウィジェットでサポートされるアクションの詳細については、「ウィジェットへのアクションの追加」をご参照ください。

URL パラメーター

次のサブセクションでは、マップ関連の URL パラメーターについて説明します。 URL ステータスの管理の下にある設定を使用すると、ユーザーがマップウィジェットを操作したときに、これらのパラメーターが URL に表示されます。マップウィジェットのすべてのパラメーターは、ハッシュマーク (#) の後に続きます。複数のパラメーターを含めるには、これらをアンパサンド (&) で区切る必要があります。

注意:

マップウィジェットの「center」、「scale」、「rotation」パラメーターは、Web マップでのみ使用できます。Web シーンでは使用できません。

マップウィジェットの初回読み込み時の Web マップまたは Web シーンの定義

マップウィジェットに複数の Web マップまたは Web シーンが含まれている場合、アプリが読み込まれたときにアクティブになる Web マップまたは Web シーンを指定するには、「active_datasource_id」の後に目的のアイテムのデータソース ID を続けます。以下に例を示します。

https://experience.arcgis.com/experience/<AppId>#<mapWidgetID>=active_datasource_id:<dataSourceId>

https://experience.arcgis.com/experience/<AppId>#map_1=active_datasource_id:dataSource_4

マップの中央配置

特定の位置をマップの中心にするには、「center」の後に目的の座標と、目的の座標系の Well-Known ID (WKID) を続けます。以下に例を示します。

https://experience.arcgis.com/experience/<AppId>#<mapWidgetID>=center:<x,y,wkid>

https://experience.arcgis.com/experience/<AppId>#map_1=center:-10373125.398783844%2C4598516.55871741%2C102100

マップ縮尺の定義

マップ縮尺を定義するには、「scale」の後に縮尺の値を続けます。以下に例を示します。

https://experience.arcgis.com/experience/<AppId>#<mapWidgetID>=scale:<scaleValue>

https://experience.arcgis.com/experience/<AppId>#map_1=scale:19257701.0800833

マップの回転の定義

マップの回転を定義するには、rotation の後に回転角度を続けます。以下に例を示します。

https://experience.arcgis.com/experience/<AppId>#<mapWidgetID>=rotation:<rotationValue>

https://experience.arcgis.com/experience/<AppId>#map_1=rotation:45

マップの観測点の定義

マップの観測点 (マップまたはシーンを表示する位置またはカメラ位置) を定義するには、viewpoint を使用します。マップウィジェットに複数のマップまたはシーンが含まれている場合、viewpoint パラメーターはそのすべてに影響します。

観測点とそのプロパティは、通常は、次の例に示すような JSON 形式で記述されます。

 {
  "rotation": 0,
  "scale": 19966005.903731048,
  "targetGeometry": {
    "spatialReference": {
      "latestWkid": 3857,
      "wkid": 102100
    },
    "x": -9870655.016044471,
    "y": 4724533.527708739
  }
}

URL を使用して特定の観測点を定義するには、通常は JSON 形式で記述されるプロパティをすべて URL にエンコードする必要があります。例を以下に示します。

https://experience.arcgis.com/experience/<AppId>#map_1=viewpoint:%7B"rotation"%3A0%2C"scale"%3A24387741.012671936%2C"targetGeometry"%3A%7B"spatialReference"%3A%7B"latestWkid"%3A3857%2C"wkid"%3A102100%7D%2C"x"%3A-10078461.002935613%2C"y"%3A4523117.553838721%7D%7D

注意:

「center」、「scale」、「rotation」パラメーターは viewpoint パラメーターよりも優先度が高く、Web マップに関連する複数のパラメーターが使用される場合は、viewpoint パラメーターをオーバーライドします。

注意:

メッセージアクションによるマップ範囲の変更は、URL パラメーターによる範囲の変更よりも優先度が高くなります。たとえば、上記の URL パラメーターを使用し、マップウィジェットを定義済みの範囲に開こうとしたときに、マップウィジェットが [レコード選択の変更] トリガー、[画面移動] または [ズーム] メッセージアクションのターゲットとしても構成されている場合、メッセージアクションに関連付けられた範囲が、URL パラメーターで設定した範囲よりも優先されます。

マップレイヤーの可視性の定義

マップのレイヤーの可視性を定義するには、「layer_visibility」を使用します。

レイヤーの可視性は、通常は、次の例に示すような JSON 形式で記述されます。

 {
  "widget_1-dataSource_1": {
    "widget_1-dataSource_1-187938b7328-layer-2": false
  },
  "widget_1-dataSource_4": {
    "widget_1-dataSource_4-18a690b433a-layer-4": false
  }
}

URL を使用して、マップのレイヤーを表示したり非表示にしたりするには、「layer_visibility」パラメーターの後に続くすべての情報を URL にエンコードする必要があります。例を以下に示します。

https://experience.arcgis.com/experience/<AppId>#map_1=layer_visibility:%7B%22widget_1-dataSource_1%22%3A%7B%22widget_1-dataSource_1-187938b7328-layer-2%22%3Afalse%7D%2C%22widget_1-dataSource_4%22%3A%7B%22widget_1-dataSource_4-18a690b433a-layer-4%22%3Afalse%7D%7D

選択したフィーチャにズーム

フィーチャを選択すると、アプリの URL に data_s パラメーターが表示されます。現在、「zoom_to_selection=true」パラメーターを使用して、マップ上で選択した 1 つのフィーチャにズームできます。以下に例を示します。

https://experience.arcgis.com/experience/<AppId>/#data_s=id:<data source ID>:<OBJECTID>&zoom_to_selection=true

https://experience.arcgis.com/experience/<AppId>/#data_s=id%3AdataSource_1-csv_905%3A77&zoom_to_selection=true

このトピックへのフィードバック

例