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

1512
0
12-10-2020 05:30 PM
Labels (1)

マップの座標を取得 (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 ファイルに JimuMapViewComponentJimuMapViewjimu ライブラリから追加します。

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. マウスが指す緯度経度のプロパティを表示するには、マウスポインタの状態を追跡する必要があります。widget.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 CodeGitHub に公開されていますので、こちらも併せて参照していただければと思います。

 

関連リンク

スターター ウィジェットの作成 (ArcGIS Experience Builder)

Create a starter widget

Get map coordinates

Add layers to a map

ArcGIS Experience Builder (Sample Code)

arcgis-experience-builder-sdk-resources (Esri GitHub)

 

Labels (1)
Tags (1)
Version history
Revision #:
1 of 1
Last update:
‎12-10-2020 05:30 PM
Updated by: