マップの座標を取得 (ArcGIS Experience Builder)

はじめに

前回の記事ではウィジェットの基本実装の方法を学習する手段の第一歩として、ArcGIS Experience Builderを使用したチュートリアル、Create a starter widget のサンプルを翻訳して紹介しました。本記事ではチュートリアルの Get map coordinates のサンプルの解説を翻訳して紹介します。

ArcGIS Experience Builder のすぐに使用できるマップウィジェットには、ArcGIS API for JavaScript のビューのインスタンスが含まれています。View は、マップとの対話的な操作や、マップの位置に関する情報を取得する方法を提供します。View のプロパティとイベントハンドラを使用すると、マップまたは画面上の任意のポイントの空間参照情報や緯度、経度、縮尺、ズームレベルを取得することができます。これらの取得した情報を使って、カスタムウィジェットに表示したり、他の場所を検索したり、エクスペリエンスの開始時のマップの初期範囲を設定したりできます。

このチュートリアルでは、マップウィジェットにアクセスし、カスタムウィジェット内にマップの緯度、経度、縮尺、ズームレベルを表示します。

インストール

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

ステップ

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

1. スターターウィジェットテンプレートをこちらからダウンロードします。

スターターウィジェットの作成のチュートリアルをすでに完了している場合は、続きから始めることができます。/client/your-extensions/widgets 内のウィジェットフォルダを複製します。

2. ArcGIS Experience Builder フォルダで、zip を次のパスに解凍します。

　/client/your-extensions/widgets

ウィジェット名の変更

3. client フォルダで npm start が実行されている場合はターミナルで ctrl + c を押して、スクリプトを停止します。

4. エクスプローラーなどで ArcGIS Experience Builder を解凍したフォルダに移動します。

5. ArcGIS Experience Builderフォルダで、次のパスを展開します。

　/client/your-extensions/widgets

6. widgets フォルダで starter-widget フォルダの名前を get-map-coordinates に変更します。

7. 名前を変更した get-map-coordinates フォルダの manifest.json ファイルを開きます。

8. コードエディターなどで neme プロパティを get-map-coordinates に変更します。

manifest.json の name プロパティがウィジェットのフォルダ名と一致することが重要です。

{
   // *** UPDATE ***
   // "name": "starter-widget",
   "name": "get-map-coordinates",
   "type": "widget",
   "version": "1.1.0",

9. manifest.json の version プロパティの後の dependency に jimu-arcgis を追加します。これを宣言することで、ウィジェット内で ArcGIS API for JavaScript のモジュールを使用できるようになります。

{
   "name": "get-map-coordinates",
   "type": "widget",
   "version": "1.1.0",
   // *** ADD ***
   "dependency": "jimu-arcgis",

設定パネルの実装

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

10. ウィジェットのルートフォルダに、空のオブジェクトを含む config.json ファイルを作成します。

後で、ウィジェットの設定パラメーターをこのオブジェクトに追加してウィジェットの設定値を保存することができます。

{}

11. src フォルダ内に、setting という名前で別のフォルダを作成します。

12. setting フォルダ内に setting.tsx ファイルを作成します。

13. setting/setting.tsx ファイルを開き、以下の import 文を記述します。

/** @jsx jsx */
import { React, jsx } from "jimu-core";
import { BaseWidgetSetting, AllWidgetSettingProps } from "jimu-for-builder";

14. BaseWidgetSetting を実装するコードを追加します。

export default class Setting extends BaseWidgetSetting<AllWidgetSettingProps<any>, any> {
  render() {
    return <div className="widget-setting-demo">This is your starter widget setting area!</div>;
  }

15. ターミナルで停止 (ctrl + c) して (該当する場合)、npm start で client フォルダで実行されているスクリプトを再起動します。

マップビューデータソースの選択を有効にする

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

16. setting/setting.tsx ファイルで jimu ライブラリの JimuMapViewSelector をインポートします。

import { JimuMapViewSelector } from "jimu-ui/advanced/setting-components";

17. render 関数の前に onMapWidgetSelected 関数を定義します。

// *** ADD ***
 onMapWidgetSelected = (useMapWidgetIds: string[]) => {
   this.props.onSettingChange({
     id: this.props.id,
     useMapWidgetIds: useMapWidgetIds
   });
 };
 render() {
   return <div className="widget-setting-demo">This is your starter widget setting area!</div>;
 }

18. render 関数の return() 文の中に、JimuMapViewSelector を表すタグを追加します。

render() {
   return <div className="widget-setting-demo">
     <JimuMapViewSelector
       useMapWidgetIds={this.props.useMapWidgetIds}
       onSelect={this.onMapWidgetSelected}
     />
   </div>;
 }

マップにアクセスする

前のステップでは、設定パネルが拡張され、マップウィジェットを選択できるようになりました。マップオブジェクトにアクセスするには、JimuMapViewComponent を使用します。

19. widget.tsx ファイルに JimuMapViewComponent と JimuMapView をjimu ライブラリから追加します。

import { JimuMapViewComponent, JimuMapView } from "jimu-arcgis";

20. render 関数の前にデフォルトの state を設定します。

export default class Widget extends BaseWidget<AllWidgetProps<any>, any> {
 // *** ADD ***//
 state = {
   jimuMapView: null
 };
 render() {

21. JimuMapView のデータソースが変わるたびに state を更新する機能を追加します。

この関数は、次のステップの JimuMapViewComponent 内で呼び出されます。

state = {
 jimuMapView: null
};
// *** ADD ***//
activeViewChangeHandler = (jmv: JimuMapView) => {
  if (jmv) {
    this.setState({
      jimuMapView: jmv
    });
  }
};

22. render 関数で JSX マークアップに JimuMapViewComponent を追加します。

追加したコードの最初の 3 行 ({this.props.hasOwnProperty...) は JSX での条件式の使い方です。これは基本的に「エクスペリエンスが設定パネルで有効なマップウィジェットを選択した場合にのみ、JimuMapViewComponent を追加する」というものです。

render() {
   return (
     <div className="widget-starter jimu-widget">
       {/* *** ADD *** */}
       {this.props.hasOwnProperty("useMapWidgetIds") &&
         this.props.useMapWidgetIds &&
         this.props.useMapWidgetIds.length === 1 && (
           <JimuMapViewComponent
             useMapWidgetIds={this.props.useMapWidgetIds}
             onActiveViewChange={this.activeViewChangeHandler}
           />
         )
       }
     </div>
   );
 }

緯度と経度を追跡する

23. マウスが指す緯度経度のプロパティを表示するには、マウスポインタの状態を追跡する必要があります。ｗidget.tsx ファイルで、state オブジェクトにlatitude プロパティと longitude プロパティを追加します。

state = {
   jimuMapView: null,
   //*** ADD ***//
   latitude: "",
   longitude: ""
 };

24. ファイルの先頭で Point クラスをインポートします。

import Point = require("esri/geometry/Point");

25. setState コマンドのすぐ下にある activeViewChangeHandler 関数で、緯度と経度を取得し、pointer-move イベントが発生するたびに state を更新します。

マウスの入力した x と y の位置を使って Point オブジェクトを作成し、view.toMap() 関数を使って座標に変換します。緯度経度の state を設定して、座標値を表示します。

jmv.view.on("pointer-move", evt => {
   const point: Point = this.state.jimuMapView.view.toMap({
     x: evt.x,
     y: evt.y
   });
   this.setState({
     latitude: point.latitude.toFixed(3),
     longitude: point.longitude.toFixed(3)
   });
 });

緯度経度座標を表示する

コンポーネントの state に緯度と経度があれば、render 関数で値を簡単に表示することができます。

26. render 関数の return() 文 (先ほど配置した JimuMapViewComponent の直後) に、緯度経度を表示するための JSX を追加します。

render() {
   return (
     <div className="widget-starter jimu-widget">
       {this.props.hasOwnProperty("useMapWidgetIds") &&
         this.props.useMapWidgetIds &&
         this.props.useMapWidgetIds.length === 1 && (
           <JimuMapViewComponent
             useMapWidgetIds={this.props.useMapWidgetIds}
             onActiveViewChange={this.activeViewChangeHandler}
           />
         )
       }
       {/* *** ADD *** */}
       <p>Lat/Lon: {this.state.latitude} {this.state.longitude}</p>
     </div>
   );
 }

ウィジェットのテスト

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

27. Web ブラウザでArcGIS Experience Builder を表示します。例：https://localhost:3001

28. ArcGIS Experience Builder で [新規作成] をクリックして、新しいエクスペリエンスページを作成します。

29. 空白のスクロールテンプレートの [作成] をクリックします。

30. [ウィジェットの挿入] をクリックし、[マップ] ウィジェットと新しい [get-map-coordinates] ウィジェットをエクスペリエンスにドラッグします。

31. ウィジェットの設定パネルのドロップダウンリストから [マップ1] を選択します。

32. ArcGIS Experience Builder のツールバーで、[保存] をクリックしてから [プレビュー] をクリックすると、カスタムウィジェットとマップが表示されたエクスペリエンスが新しいブラウザタブで開きます。

おめでとうございます、これで完了です

ArcGIS Experience Builder のプレビューで、マップにカーソルを合わせると、カスタムウィジェットで緯度と経度の値が動的に変化することを確認できます。ウィジェットを完成したウィジェットと比較してみてください。

チャレンジ

ズームレベルと縮尺の追加

緯度経度の右隣に地図のズームレベルと縮尺を追加するにはこちらのサンプルを参照してください。

まとめ

今回は、ArcGIS Experience Builder を使用した Get map coordinates のサンプルを翻訳して紹介しました。次のステップとして Add layers to a map のチュートリアルも併せて参照してください。また、その他にもカスタムウィジェットには、多くのサンプルコードが ArcGIS Experience Builder の Sample Code や GitHub に公開されていますので、こちらも併せて参照していただければと思います。

マップの座標を取得 (ArcGIS Experience Builder)