出典：ArcGIS Experience Builder - Tutorials - Add layers to a map
学習内容：カスタムウィジェットからマップにレイヤーを追加する方法
ArcGIS Experience Builder のマップ ウィジェットは、ロードするように構成されている Web マップに基づいてレイヤーを自動的にロードします。ワークフローによっては、ウィジェットとのユーザー インタラクションに基づいてマップに動的にレイヤーを追加するカスタム ウィジェットが必要な場合があります。
このチュートリアルでは、マップにフィーチャ レイヤーを追加するためのボタンをウィジェットに追加します。
スターター ウィジェットのテンプレートをこちらからダウンロードします。 すでにスターター ウィジェットの作成チュートリアルを完了している場合は、それを使用して開始できます。client/your-extensions/widgets 内のウィジェット フォルダーをコピーしてください。
手順 1 でテンプレートをダウンロードした場合は ArcGIS Experience Builder フォルダー内で、zip ファイルを以下のパスに展開してください。
/client/your-extensions/widgets
npm start が実行されたターミナルがある場合、ctrl + c を押してスクリプトを停止します。add-layers-to-a-map に変更します。name プロパティを add-layers-to-a-map に変更します。manifest.json の name プロパティがウィジェットのフォルダー名と一致することが重要です。この時点で、ウィジェットの説明、作成者など manifest.json ファイル内の他のメタデータも更新できます。 {
// *** 更新 ***
// "name": "starter-widget",
"name": "add-layers-to-a-map",
"type": "widget",
"version": "1.16.0",
version プロパティの後に、jimu-arcgis の依存関係を追加します。 これを宣言することで、ウィジェット内で ArcGIS Maps SDK for JavaScript モジュールを使用できるようになります。{
"name": "add-layers-to-a-map",
"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 [jimuMapView, setJimuMapView] = useState<JimuMapView>()
return (
return 文で、JimuMapViewComponent を JSX マークアップに追加します。{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>
)
setState コマンドのすぐ下に activeViewChangeHandler 関数を定義します。 この関数は、マップの準備ができたときに一度だけ呼び出され、この関数で jimuMapView の状態を更新します。/** 追加 **/
const activeViewChangeHandler = (jmv: JimuMapView) => {
if (jmv) {
setJimuMapView(jmv)
}
}
クリックするとレイヤーをマップに追加するボタンをウィジェットの UI に追加します。
form と input タグ要素を追加します。return (
<div className="widget-starter jimu-widget">
{props.useMapWidgetIds && props.useMapWidgetIds.length === 1 && (
<JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={activeViewChangeHandler} />
)}
{/* *** ADD: *** */}
<form onSubmit={formSubmit}>
<div>
<button>Add Layer</button>
</div>
</form>
</div>
)
formSubmit という名前の新しい関数を作成します。 この関数はユーザーが Add Layer ボタンをクリックした時に呼び出されます。evt.preventDefault は、フォームが送信された際にページをリロードしないようにします。ボタンをクリックしたとき、マップにレイヤーを追加します。
widget.tsx ファイルの先頭で、 FeatureLayer クラスをインポートします。import FeatureLayer from 'esri/layers/FeatureLayer'
formSubmit 関数の内に、Trailheads（ポイント）のフィーチャ レイヤーを作成し、そのレイヤーをマップに追加するコードを追加します。jimuMapView.view は MapView のインスタンスのため、ここで使用する add() メソッドのように、MapView で定義されているメソッドやプロパティも使うことができます。const formSubmit = (evt) => {
evt.preventDefault()
// *** 追加 ***
// 新しい FeatureLayer を作成
const layer = new FeatureLayer({
url: 'https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0'
})
// マップにレイヤーを追加 (Experience Builder の JimuMapView データ・ソースからアクセスできます。)
jimuMapView.view.map.add(layer)
}
コードの変更が完了したら、ArcGIS Experience Builder を実行してエクスペリエンスを表示することでウィジェットをテストできます。
eb1be6543e304b4d81ed55439c412c2c を検索します。検索結果をクリックして選択し、[終了]をクリックします。 (この Web マップには意図的に操作するレイヤーがないことに注意してください。)