Community

Map コンポーネントと JavaScript プログラミング

358
0
2 weeks ago
Labels (1)
Labels:

Map コンポーネントと JavaScript プログラミング

はじめに

先日リリースされた ArcGIS Maps SDK for JavaScript 4.30 で、これまでベータ版として提供されていた ArcGIS Maps SDK コンポーネントの Map コンポーネントが、ついに正式版としてリリースされました。

Map コンポーネントについては、この ArcGIS 開発者コミュニティでも何度かご紹介していますが（ ArcGIS Maps SDK コンポーネントで Web アプリを構築、ArcGIS Maps SDK コンポーネントの Map コンポーネントについて）、よりプログラミングに焦点を当てた、少し実践的な内容としてご紹介します。

ArcGIS Maps SDK コンポーネントについて

今回ご紹介する Map コンポーネントは ArcGIS Maps SDK コンポーネントの一種で、ArcGIS Maps SDK for JavaScript に用意された様々な機能を Web コンポーネントとしてパッケージ化したものです。標準的な地図機能を提供する Map コンポーネントの他に、Web マップで設定されたグラフを表示する  Charts コンポーネント（β版）と ArcGIS Arcade の構文チェックが行えるエディタを作成可能な Coding コンポーネントが提供されています。

先ほどご紹介したようにこれらの機能は Web コンポーネントとして提供されているため、カスタム DOM 要素として HTML の body タグ内に以下のように記述するだけで、必要な機能を実装することができます。

 

<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"></arcgis-map>

 

mapComponents_image_00.png

HTML の記述のみで機能を追加できるため、React や Vue といったフレームワーク上で ArcGIS Maps SDK for JavaScript の機能を組み込みやすくなるほか、プログラマーでない方でも比較的簡単に地図アプリケーションを作成することができるようになっています。

Map コンポーネントを使用したアプリケーションの作成

それでは、Map コンポーネントを使用した Web アプリケーションを作成してみましょう。Map コンポーネントで使用できるタグや使用方法の詳細は Map コンポーネント ストーリー ブックをご参照ください。今回は以下のような HTML を作成しました。

 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map コンポーネント デモ</title>

    <style>
      /* HTML 各要素の範囲を指定 */
      html, body, arcgis-map {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

    <!-- ArcGIS Maps SDK for JavaScript および Map コンポーネントの読み込み -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.30/"></script>
    <script type="module" src="https://js.arcgis.com/map-components/4.30/arcgis-map-components.esm.js"></script>

  </head>
  <body>
    <!-- arcgis-map 要素の作成 -->
    <arcgis-map item-id="ab8dbdfe81f94fa4ac4e13fc46330211">

      <!-- arcgis-map 内に用意するウィジェットの配置 -->
      <!-- 凡例ウィジェット (マップの右上に配置) -->
      <arcgis-legend position="top-right"></arcgis-legend>

      <!-- レイヤー リスト ウィジェット (マップの右上に配置し、パネルの押下で展開するように設定) -->
      <arcgis-expand position="top-right">
        <arcgis-layer-list />
      </arcgis-expand>

    </arcgis-map>

    <!-- ビジネス ロジックを定義する JavaScript ファイルの参照 -->
    <script src="./js/main.js"></script>
  </body>
</html>

 

mapComponents_image_01.png

いくつか HTML 内の記述で注目したいポイントをご紹介します。

 

<!-- ArcGIS Maps SDK for JavaScript および Map コンポーネントの読み込み -->
<link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.30/"></script>
<script type="module" src="https://js.arcgis.com/map-components/4.30/arcgis-map-components.esm.js"></script>

 

Map コンポーネントを使用したアプリケーションを作成するには、HTML の head タグ内に ArcGIS Maps SDK for JavaScript および Map コンポーネントの参照を記述します。記述方法の詳細は ArcGIS Maps SDK for JavaScript の開発の手順 (CDN) を参照してください。

 

 

<!-- arcgis-map 要素の作成 -->
<arcgis-map item-id="ab8dbdfe81f94fa4ac4e13fc46330211">
  ・・・
</arcgis-map>

 

<arcgis-map> タグを用いて地図画面を作成します。item-id 属性には ArcGIS Online または Portal for ArcGIS で作成した Web マップの ID を設定します。Web マップの ID は対象の Web マップのアイテムの詳細ページの URL などから確認できる 32 文字の文字列です。ここでは ESRIジャパンより公開している「全国市区町村界マップ」を使用しています。

Portal for ArcGIS の Web マップを参照する場合は、JavaScript コード内で ArcGIS Maps SDK for JavaScript の esriConfig.portalUrl プロパティを設定する必要があります。

 

esriConfig.portalUrl = "https://portal.domain.com/webAdaptor";

 

 

 

<!-- 凡例ウィジェット (マップの右上に配置) -->
<arcgis-legend position="top-right"></arcgis-legend>

<!-- レイヤー リスト ウィジェット (マップの右上に配置し、パネルの押下で展開するように設定) -->
<arcgis-expand position="top-right">
  <arcgis-layer-list />
</arcgis-expand>

 

<arcgis-legend> タグを用いて凡例ウィジェットを、<arcgis-layer-list> タグを用いてレイヤー リスト ウィジェットをマップ画面内に配置します。各ウィジェットは position 属性を使ってマップ画面内のどこに配置するかを決めることができるほか、<arcgis-expand> タグと組み合わせることで、クリック可能なボタンとしてウィジェットを配置することもできます。

 

 

<!-- ビジネス ロジックを定義する JavaScript ファイルの参照 -->
<script src="./js/main.js"></script>

 

アプリケーションが参照する独自の JavaScript ファイルです。本アプリケーションではここで参照しているファイルに独自の JavaScript ロジックを記述していきます。

JavaScript を使ってロジックをカスタマイズ

ここまでは HTML の記述のみでアプリケーションを作成していましたが、JavaScript を使うことで Map コンポーネントによって作られた要素を ArcGIS Maps SDK for JavaScript のクラスとして扱い、独自のロジックを持ったアプリケーションとしてカスタマイズすることができます。

これまでに作成していたアプリケーションに追加する形で、HTML で参照する JavaScript ファイルにカスタムの JavaScript ロジックを記述していきます。まずは JavaScript ファイルに以下のように記述し、JavaScript で操作する <arcgis-map> 要素を取得します。

 

// arcgis-map DOM 要素を取得
const arcgisMap = document.querySelector("arcgis-map");

 

これで arcgisMap 変数として HTML に追加された <arcgis-map> 要素を参照することができました。<arcgis-map> はArcGIS Maps SDK for JavaScript の Map クラスと MapView クラスの持つ情報にアクセスでき、Map クラスの情報は arcgisMap.map プロパティとして、MapView クラスの情報は arcgisMap.view プロパティとして利用することができます。

続いて、<arcgis-map> のクリック イベントをハンドリングし、ユーザーによってクリックされた地点の座標値（経度 / 緯度）を取得してみます。

 

// arcgis-map の arcgisViewClick イベントをハンドリング
arcgisMap.addEventListener("arcgisViewClick", (event) => {

  // arcgis-map の arcgisViewClick イベント
  // CustomEvent として定義され、クリックされた DOM 要素 (event.target) やマップのクリック地点 (event.detail.mapPoint) を取得できる
  console.log(event)
  console.log("経度：" + event.detail.mapPoint.longitude + "/ 緯度：" + event.detail.mapPoint.latitude);

});

 

mapComponents_image_02.png

<arcgis-map> のクリック イベントはカスタム イベントとして arcgisViewClick という名前で定義されています。JavaScript の addEventListener() メソッドを使用して arcgisViewClick イベントの発火をキャッチすることで、<arcgis-map> のクリック時に追加のロジックを組み込むことができます。ここではイベントの情報から <arcgis-map> のクリック地点の座標（mapPoint）を取得し、ブラウザー コンソールに書き出しています。

続いて、これまでに実装したクリック地点の情報を活用して、クリック地点のデータを検索し、<arcgis-map> 上に表示する機能を追加してみます。

まずは処理結果を分かりやすくするため、現在マップに追加されている全国都道府県界データ 2022（都道府県界、市区町村界の 2 レイヤー）を非表示にします。

 

// arcgis-map DOM 要素を取得
const arcgisMap = document.querySelector("arcgis-map");

// ★ 追記 -----
// arcgis-map の arcgisViewReadyChange イベントをハンドリング
arcgisMap.addEventListener("arcgisViewReadyChange", () => {

  // Web マップ内のレイヤーを取得
  const mapLayers = arcgisMap.map.layers;

  // Web マップ内のレイヤーを非表示に設定
  mapLayers.items.forEach(layer => {
    layer.visible = false
  });

});
// ★ 追記終了 -----

 

ここでは <arcgis-map> の arcgisViewReadyChange イベントをキャッチしています。arcgisViewReadyChange イベントは地図画面（MapView）を表示する準備が整ったタイミングで発火します。<arcgis-map> によるマップの作成は非同期に行われるため、JavaScript コードが読み込まれた直後にはまだ準備が整っておらず、変数から取得できる情報も用意されていません。そのため、<arcgis-map> に関する情報の取得や初期化を行いたい場合には、このコードのように arcgisViewReadyChange イベントの発火を待つ必要があります。

arcgisViewReadyChange イベント内では、<arcgis-map> に含まれるすべての操作レイヤーを非表示に設定しています。

ここで非表示にしたレイヤーは、アプリ画面右上のレイヤー リスト ウィジェットから再度表示することができます。

続いて、<arcgis-map> のレイヤーからクリック地点のフィーチャを検索し、グラフィックとして <arcgis-map> に表示する関数を作成します。

 

// クリック地点のフィーチャを検索
const queryClickedFeature = (mapPoint) => {

  // Web マップ内の操作レイヤーを取得
  const mapLayers = arcgisMap.map.layers;

  // クリック地点に含まれるフィーチャを Web マップ内のレイヤーそれぞれで検索
  mapLayers.items.forEach(layer => {

    // 検索条件の設定
    const query = layer.createQuery();
    // 検索結果にジオメトリ情報を含める
    query.returnGeometry = true;
    // 検索位置をマップのクリック地点に設定
    query.geometry = mapPoint;

    // Web マップ内の各レイヤーに対して、用意した検索条件で検索
    layer.queryFeatures(query)
      .then(result => {

        // 検索結果のフィーチャを取得
        const resultFeatures = result.features;

        // 検索結果のフィーチャにシンボルを設定し、Graphic としてマップに表示
        resultFeatures.forEach(resultGraphic => {

          resultGraphic.symbol = {
            type: "simple-fill",
            color: [30, 144, 255, 0.5],
            style: "solid",
            outline: {
              color: "darkgray",
              width: 1
            }
          }

          arcgisMap.view.graphics.add(resultGraphic);

        });

      });

  });

}

 

 

先ほども確認したように、<arcgis-map> からは ArcGIS Maps SDK for JavaScript の Map クラス、MapView クラスの情報にアクセスできます。ここではそれらの情報を活用して、ArcGIS Maps SDK for JavaScript の機能として以下の処理を実装しています。

最後に、作成した関数 (queryClickedFeature) を <arcgis-map> の arcgisViewClick イベントに記述します。

 

// arcgis-map の arcgisViewClick イベントをハンドリング
arcgisMap.addEventListener("arcgisViewClick", (event) => {

  // ★ 追記 ① -----
  // マップに追加された既存のグラフィックを初期化
  arcgisMap.view.graphics.removeAll();
  // 追記終了 -----

  // arcgis-map の arcgisViewClick イベント
  // CustomEvent として定義され、クリックされた DOM 要素 (event.target) やマップのクリック地点 (event.detail.mapPoint) を取得できる
  console.log(event)
  console.log("経度：" + event.detail.mapPoint.longitude + "/ 緯度：" + event.detail.mapPoint.latitude);

  // ★ 追記 ② -----
  // クリック地点のフィーチャ検索を行う関数を呼び出し
  queryClickedFeature(event.detail.mapPoint);
  // 追記終了 -----

});

 

作成したアプリケーションを実行し、動作を確認してみます。

今回記述したコードでは <arcgis-map> に含まれる操作レイヤーすべてに対して、マップのクリック地点のフィーチャを検索する処理を行っています。<arcgis-map> で使用した Web マップには全国都道府県界データ 2022 として都道府県界と市区町村界の 2 レイヤーが含まれているので、クリック地点の都道府県と市区町村が検索結果のフィーチャとして表示されます。

mapComponents_image_03.gif

ここまでのコードで作成したアプリケーションは「Map コンポーネント デモ」として公開しています。動作の確認をしたい方はこちらもご利用ください。

まとめ

今回は ArcGIS Maps SDK for JavaScript 4.30 で正式にリリースされた Map コンポーネントについて、簡単なアプリケーションの作成方法と、プログラミングによる追加のカスタマイズ方法をご紹介しました。今回は Map コンポーネントから取得できる情報のみでプログラミングを行ったため使用しませんでしたが、別途 JavaScript コード内で ArcGIS Maps SDK for JavaScript のモジュールを読み込むことで、SDK によって提供される機能をフルに活用したアプリケーションを構築することも可能です。

従来の ArcGIS Maps SDK for JavaScript によるアプリケーション作成では、UI とそのロジックの多くを JavaScript コード内で記述する必要がありました。Map コンポーネントを始めとした Maps SDK コンポーネントを利用することで、基本的な UI を HTML で記述し、そのロジックを JavaScript で記述するというように、UI とロジックを分離して管理、記述することができるようになります。正式リリースとなりました Map コンポーネント、ぜひ、お試しください。

参考リンク

Labels (1)
Labels:
Tags (1)
0 Kudos
Version history
Last update:
2 weeks ago
Updated by:
Esri Contributor
Contributors