技術 Tips 集
ArcGIS Experience Builder (Developer Edition)
チュートリアル
マップの座標を取得

マップの座標を取得

出典：ArcGIS Experience Builder - Guide - Get map coordinates

概要

学習内容：カスタム ウィジェットでマップの緯度と経度、縮尺、ズーム レベルを表示する方法

ArcGIS Experience Builder 標準のマップ ウィジェットには、ArcGIS Maps SDK for JavaScript の View インスタンスが含まれています。View はマップと対話し、位置情報を取得する方法を提供します。View のプロパティとイベント ハンドラーを使用して、マップ画面上の任意のポイントの位置に関する現在の空間参照の情報、緯度と経度、縮尺、ズーム レベルを確認することができます。確認した情報は、カスタム ウィジェットに表示したり、地球上の他の場所に移動したり、エクスペリエンスの開始時にマップの初期表示範囲を設定したりするために使用できます。

このチュートリアルでは、マップ ウィジェットにアクセスし、カスタム ウィジェットでマウス カーソルが地図上にある時の緯度と経度を表示します。

前提条件

ArcGIS Experience Builder のインストール ガイドを参照して、ArcGIS Experience Builder (Developer Edition) のダウンロード、インストール、設定を行います。

ステップ

スターター ウィジェットの入手

  1. スターター ウィジェット テンプレートをこちらからダウンロードします。
    すでに、スターター ウィジェットの作成チュートリアルを完了している場合は、それを使用して開始できます。
    /client/your-extensions/widgets 内のウィジェット フォルダーをコピーしてください。
  2. 手順 1 でテンプレートをダウンロードした場合は ArcGIS Experience Builder フォルダー内で、zip ファイルを以下のパスに展開してください。
    /client/your-extensions/widgets

ウィジェット名の変更

  1. ArcGIS Experience Builder の client フォルダーで npm start が実行されたターミナルがある場合、ctrl + c を押してスクリプトを停止します。
  2. ファイル ブラウザーで Experience Builder が展開されたフォルダーに移動します。
  3. Experience Builder フォルダー内で以下のパスを開きます。
    /client/your-extensions/widgets
  4. widgets フォルダー内で、starter-widget フォルダーの名前を get-map-coordinates に変更します。
  5. 新しく名前を変更した get-map-coordinates フォルダー内で、manifest.json ファイルをコード エディターで開きます。
  6. コード エディターで、name プロパティを get-map-coordinates に変更します。 manifest.json の name プロパティがウィジェットのフォルダー名と一致することが重要です。この時点で、ウィジェットの説明、作成者など manifest.json ファイル内の他のメタデータも更新できます。
{
   // *** 更新 ***
   // "name": "starter-widget",
   "name": "get-map-coordinates",
   "type": "widget",
   "version": "1.17.0",
   ・・・
  1. manifest.json の version プロパティの後に jimu-arcgis 依存関係を追加します。これを宣言することで、ウィジェット内で ArcGIS Maps SDK for JavaScript モジュールを使用できるようになります。
{
   "name": "get-map-coordinates",
   "type": "widget",
   "version": "1.17.0",
   // *** 追加 ***
   "dependency": ["jimu-arcgis"],

設定パネルの実装

設定パネルを実装することで、エクスペリエンスの作成者がウィジェットをカスタマイズできるようになります。設定パネルは、ArcGIS Experience Builder でウィジェットが選択された時に右側のサイド バーに表示されます。パネルを作成するには、React コンポーネントを作成します。

  1. ウィジェットのルート フォルダーに、空のオブジェクトを含む config.json ファイルを作成します。
    後で、ウィジェットの設定値を保存するために、このオブジェクトにウィジェットの構成パラメーターを追加できます。
{}
  1. src フォルダーに、setting という名前のフォルダーを作成します。
  2. setting フォルダー内に、setting.tsx ファイルを作成します。
  3. setting/setting.tsx ファイルを開き、以下の import 文を記述します。
import { React } from 'jimu-core'
import { type AllWidgetSettingProps } from 'jimu-for-builder'
  1. コンポーネントを実装するためのコードを追加します。
const Setting = (props: AllWidgetSettingProps<any>) => {
  return <div className="widget-setting-demo">ここはスターター ウィジェットの設定パネルです</div>
}

export default Setting
  1. ArcGIS Experience Builder の client フォルダーで npm start が実行されたターミナルがある場合、ctrl + c を押してスクリプトを停止します。その後、client フォルダーで npm start スクリプトを開始します。

マップ ビューのデータ ソースを選択できるようにする

ArcGIS Experience Builder では、ページに複数のマップ ウィジェットを配置することができます。そのため、カスタム ウィジェットには、作成者が使用するマップ ウィジェットを選択するためのセクションが必要です。

  1. setting/setting.tsx ファイルに、jimu ライブラリーから MapWidgetSelector モジュールを記述します。
import { MapWidgetSelector } from 'jimu-ui/advanced/setting-components'
  1. コンポーネント内で onMapWidgetSelected 関数を定義します。
// *** 追加 ***
const onMapWidgetSelected = (useMapWidgetIds: string[]) => {
  props.onSettingChange({
    id: props.id,
    useMapWidgetIds: useMapWidgetIds
  })
}

return <div className="widget-setting-demo">ここはスターター ウィジェットの設定パネルです</div>;
  1. return() 文内に、MapWidgetSelector を表すタグを追加します。
return (
  <div className="widget-setting-demo">
    <MapWidgetSelector useMapWidgetIds={props.useMapWidgetIds} onSelect={onMapWidgetSelected} />
  </div>
)

マップにアクセスする

これまでのステップでは、設定パネルに機能を追加し、マップ ウィジェットを選択できるようになりました。Map オブジェクトは JimuMapViewComponent を使用してアクセスできます。

  1. widget.tsx ファイルに、jimu-arcgis ライブラリーから JimuMapViewComponent と JimuMapView の型を追加し、React 変数をデストラクチャリング (分割代入) して getState import にアクセスします。
import { React, type AllWidgetProps } from 'jimu-core'
/** 追加 **/
import { JimuMapViewComponent, type JimuMapView } from 'jimu-arcgis'
const { useState } = React
  1. マウスの位置の緯度と経度のプロパティを表示するには、マウス ポインターの状態を追跡する必要があります。これにはコンポーネント内で、useState() を使用し state として追跡できるように設定します。
const { useState } = React

const Widget = (props: AllWidgetProps<any>) => {
  // *** 追加 ***//
  const [latitude, setLatitude] = useState<string>('')
  const [longitude, setLongitude] = useState<string>('')

  return (
  1. return 文で、JimuMapViewComponent を JSX マークアップに追加します。
    追加されたコードの最初の 2 行 ({props.useMapWidgetIds &&...)は、JSX で条件を使用する方法です。これは基本的に「エクスペリエンス作成者が設定パネルで有効なマップ ウィジェットを選択した場合にのみ JimuMapViewComponent を追加する」という意味です。
return (
  <div className="widget-starter jimu-widget">
    {props.useMapWidgetIds && props.useMapWidgetIds.length === 1 && (
      <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={activeViewChangeHandler} />
    )}
  </div>
)
  1. widget.tsx の上部に、次のステップで使用する Point クラスをインポートします。
import Point from 'esri/geometry/Point'
  1. useState コマンドのすぐ下に activeViewChangeHandler 関数を定義します。この関数は、マップが準備完了した時に一度だけ呼び出されます。この関数内で、pointer-move イベントがトリガーされる度に緯度と経度の state を更新するリスナーを設定します。
    マウスの x 座標と y 座標を使用して Point オブジェクトを作成し、view.toMap() 関数を使用して座標を地理座標に変換します。緯度と経度の state を設定して、座標値を表示します。
/** 追加 **/
const activeViewChangeHandler = (jmv: JimuMapView) => {
  if (jmv) {
    // ポインターが移動したら、ポインターの位置を取得し、Point オブジェクトを作成
    // view.toMap() 関数を使用してジオメトリを取り出し、state を更新
    jmv.view.on('pointer-move', (evt) => {
      const point: Point = jmv.view.toMap({
        x: evt.x,
        y: evt.y
      })
      setLatitude(point.latitude.toFixed(3))
      setLongitude(point.longitude.toFixed(3))
    })
  }
}

緯度と経度の座標を表示する

コンポーネントの state に緯度と経度が保存されたので、関数コンポーネントから返される JSX に値を簡単に表示できます。

  1. return() 文内で (先ほど配置した JimuMapViewComponent のすぐ後に)、緯度と経度を表示するための JSX を追加します。
return (
  <div className="widget-starter jimu-widget">
    {props.useMapWidgetIds && props.useMapWidgetIds.length === 1 && (
      <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={activeViewChangeHandler} />
    )}
    {/* *** 追加 *** */}
    <p>
      緯度 / 経度: {latitude} {longitude}
    </p>
  </div>
);

ウィジェットのテスト

コードの変更が完了したら、ArcGIS Experience Builder を実行してエクスペリエンスを表示することでウィジェットをテストできます。

  1. Web ブラウザーで、Experience Builder にアクセスします。
    例：https://localhost:3001
    Experience Builder タブが開かなかった場合は、https://localhost:3001 にアクセスしてください。「無効な SSL 証明書」の問題が発生した場合は「続行」をクリックします。
  2. Experience Builder で [新規作成] をクリックして新しいエクスペリエンス ページを作成します。
  3. [空白のスクロール] の [作成] ボタンをクリックします。
  4. [ウィジェットの挿入] パネルが開きます。そこから、マップ ウィジェットと新しく作成した「Get Map Coordinates」ウィジェットをエクスペリエンスにドラッグします。
    作成したウィジェットには無効を示すアイコンが表示されているかもしれませんが、まだアイコンを作成していないため、それは問題ありません。
  5. ウィジェットの設定パネルで、マップを選択するドロップダウンから「Map」を選択します。
  6. Experience Builder のツールバーで [保存] をクリックし、[プレビュー] をクリックすると、カスタム ウィジェットとマップを含むエクスペリエンスが新しいブラウザー タブで開きます。マップ上にマウスを移動させると、カーソルの位置の緯度と経度が表示されます。
スターター ウィジェットの作成マップにレイヤーを追加