出典：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) のダウンロード、インストール、設定を行います。
npm start が実行されたターミナルがある場合、ctrl + c を押してスクリプトを停止します。get-map-coordinates に変更します。name プロパティを get-map-coordinates に変更します。
manifest.json の name プロパティがウィジェットのフォルダー名と一致することが重要です。この時点で、ウィジェットの説明、作成者など manifest.json ファイル内の他のメタデータも更新できます。{
// *** 更新 ***
// "name": "starter-widget",
"name": "get-map-coordinates",
"type": "widget",
"version": "1.16.0",
・・・
version プロパティの後に jimu-arcgis 依存関係を追加します。これを宣言することで、ウィジェット内で ArcGIS Maps SDK for JavaScript モジュールを使用できるようになります。{
"name": "get-map-coordinates",
"type": "widget",
"version": "1.16.0",
// *** 追加 ***
"dependency": ["jimu-arcgis"],
設定パネルを実装することで、エクスペリエンスの作成者がウィジェットをカスタマイズできるようになります。設定パネルは、ArcGIS Experience Builder でウィジェットが選択された時に右側のサイドバーに表示されます。パネルを作成するには、React コンポーネントを作成します。
config.json ファイルを作成します。
後で、ウィジェットの設定値を保存するために、このオブジェクトにウィジェットの構成パラメーターを追加できます。{}
setting.tsx ファイルを作成します。import { React } from 'jimu-core'
import { type AllWidgetSettingProps } from 'jimu-for-builder'
const Setting = (props: AllWidgetSettingProps<any>) => {
return <div className="widget-setting-demo">ここはスターター ウィジェットの設定パネルです</div>
}
export default Setting
npm start が実行されたターミナルがある場合、ctrl + c を押してスクリプトを停止します。その後、client フォルダーで npm start スクリプトを開始します。ArcGIS Experience Builder では、ページに複数のマップ ウィジェットを配置することができます。そのため、カスタム ウィジェットには、作成者が使用するマップ ウィジェットを選択するためのセクションが必要です。
jimu ライブラリから MapWidgetSelector モジュールを記述します。import { MapWidgetSelector } from 'jimu-ui/advanced/setting-components'
// *** 追加 ***
const onMapWidgetSelected = (useMapWidgetIds: string[]) => {
props.onSettingChange({
id: props.id,
useMapWidgetIds: useMapWidgetIds
})
}
return <div className="widget-setting-demo">ここはスターター ウィジェットの設定パネルです</div>;
return (
<div className="widget-setting-demo">
<MapWidgetSelector useMapWidgetIds={props.useMapWidgetIds} onSelect={onMapWidgetSelected} />
</div>
)
これまでのステップでは、設定パネルに機能を追加し、マップ ウィジェットを選択できるようになりました。Map オブジェクトは JimuMapViewComponent を使用してアクセスできます。
jimu-arcgis ライブラリから JimuMapViewComponent と JimuMapView の型を追加し、React 変数をデストラクチャリング (分割代入) して getState import にアクセスします。import { React, type AllWidgetProps } from 'jimu-core'
/** 追加 **/
import { JimuMapViewComponent, type JimuMapView } from 'jimu-arcgis'
const { useState } = React
useState() を使用し state として追跡できるように設定します。const { useState } = React
const Widget = (props: AllWidgetProps<any>) => {
// *** 追加 ***//
const [latitude, setLatitude] = useState<string>('')
const [longitude, setLongitude] = useState<string>('')
return (
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>
)
widget.tsx の上部に、次のステップで使用する Point クラスをインポートします。import Point from 'esri/geometry/Point'
setState コマンドのすぐ下に 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 に値を簡単に表示できます。
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 を実行してエクスペリエンスを表示することでウィジェットをテストできます。