ArcGIS で始める Web マップアプリ開発　レイヤー表示編

はじめに

「ArcGIS で始める Web マップアプリ開発」のシリーズ記事では、はじめてマップアプリ開発を行う方に向けて、ArcGIS Maps SDK for JavaScript を使用した Web マップアプリ開発の流れをシリーズで連載しています。

第 2 回目となる今回は、マップへのレイヤーの追加、レイヤーの表示 / 非表示の切り替えについて紹介します。

前回の記事と同様にソースコードは ESRIジャパンの GitHub で公開しています。Web アプリ開発の実行環境をお持ちでない方は、CodePen を使用して、Web ブラウザー上でコードの入力・編集、アプリの実行を試すこともできます。

今回の記事の最終的なアプリケーションは次のようなイメージになりますが、記事は手順を追って進められるよう、大きく 2 つの構成に分けて記載しています。

まずは前半で基本的な手順をご理解いただき、余裕がある方は、後半へ読み進めてください。

前半：マップに 2 種類のレイヤーを表示
後半：レイヤーの表示状態の制御、レイヤーへのズーム

完成版イメージ

前半：マップに 2 種類のレイヤーを表示

レイヤー（Layer）はマップ（Map）の最も基本的な構成要素で、位置情報を表現するグラフィックやイメージのデータの集まりです。

そのうち、FeatureLayer や GraphicsLayer などのベクターレイヤーは、それぞれのフィーチャにジオメトリーと属性を持っているのが特徴で、それらの情報をまとめた Graphic オブジェクトとして、ブラウザーの描画に使用されます。これらのベクターレイヤーに対してデータをクエリーしたり、解析を行ったりする GIS 的な操作を、今後の記事の中でも取りあげていきます。

また、背景地図としても利用できるレイヤーとして、キャッシュイメージタイルを扱う TileLayer、WebTileLayer などのクラスもあります。TileLayer は ArcGIS サーバーにホストされているサービスが対象です。一方、WebTileLayer は ArcGIS 以外にホストされている XYZ 形式のタイル、例えば国土地理院などのタイルを扱うことができるクラスです。

その他にも、ArcGIS Maps SDK for JavaScript で扱うことが可能なレイヤーはまだまだありますので、興味がある方はリファレンスのLayer クラスをご参照ください。

それでは、上記で簡単にご紹介した FeatureLayer と WebTileLayer の 2 種類のレイヤーを表示してみましょう。

1．マップの表示

マップを表示するまでのステップは、前回の記事と同様のためここでは省略します。前回の記事ではなくコードを参照したい方は、ESRI ジャパンの GitHub よりご参照ください。

2．WebTileLayer、FeatureLayer の表示

ステップ 1 で記載した <arcgis-map> タグの下に WebTileLayer と FeatureLayer のインスタンスを作成するコードを追加します。そのためには、WebTileLayer クラスと FeatureLayer クラスのモジュールをインポートします。

<!-- WebTileLayer と FeatureLayer のインスタンスを作成 -->
<script type="module">
  const [WebTileLayer, FeatureLayer] = await $arcgis.import([
    "@arcgis/core/layers/WebTileLayer",
    "@arcgis/core/layers/FeatureLayer",
  ]);

続けて、WebTileLayer と FeatureLayer のインスタンスを作成します。

本記事では WebTileLayer として国土地理院が提供している地理院タイルを利用します。urlTemplate プロパティには、元データでは url に /{z}/{x}/{y}.png として定義されているものを読み換えて、/{level}/{col}/{row}.png のように指定します。

FeatureLayer としては、地価公示データと全国市区町村界データを使用します。url プロパティは、ArcGIS Enterprise、ArcGIS Online などのリソースの REST エンドポイントの url を指定します。

const gsipaleLyr = new WebTileLayer({
// urlTemplate を記述
　　urlTemplate:"https://cyberjapandata.gsi.go.jp/xyz/pale/{level}/{col}/{row}.png", 
 });
const landpriceLyr = new FeatureLayer({
// url を記述
　　url:"https://services.arcgis.com/wlVTGRSYTzAbjjiC/ArcGIS/rest/services/LandPrice/FeatureServer", 
 });
const cityareaLyr = new FeatureLayer({
// url を記述　　
　　url:"https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/municipalityboundaries2021/FeatureServer", 
  });

3. レイヤーに追加のプロパティを設定

レイヤーに url 以外の追加のプロパティを設定します。

const gsipaleLyr = new WebTileLayer({
  urlTemplate:"https://cyberjapandata.gsi.go.jp/xyz/pale/{level}/{col}/{row}.png",
  //その他プロパティを記述
  id:"gsipale",
  opacity:0.9,
  copyright:"地理院タイル（淡色地図）",
  title: "地理院タイル-淡色地図(WebTileLayer)",
  visible: false // デフォルトが非表示状態となるよう設定
  });

const landpriceLyr = new FeatureLayer({
  url:"https://services.arcgis.com/wlVTGRSYTzAbjjiC/ArcGIS/rest/services/LandPrice/FeatureServer",
  //その他プロパティを記述
  id: "landprice",
  opacity: 0.8,
  title: "八王子市の地価公示(FeatureLayer)",
  // 八王子市のみを表示するよう行政区域コードのフィルターを定義
  definitionExpression: "L01_022 = '13201'"
  });

const cityareaLyr = new FeatureLayer({
  url:"https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/ZENKOKU_CITY_view/FeatureServer",
  //その他プロパティを記述
  id: "cityarea",
  title: "全国市区町村界(FeatureLayer)",
  opacity: 0.5,
  // landpriceLyr と同様にフィルターを定義
  definitionExpression: "CITY = '八王子市'"
  });

追加可能なプロパティとしては、id、minScale、maxScale、opacity や visible などがありますが、本記事では、WebTileLayer には id、opacity、copyright、title、visible を設定し、FeatureLayer には id、opacity、title、definitionExpression を設定しています。

id ：レイヤーの一意識別子で、アプリケーションの別の部分で参照できるようにするために設定します。開発者が直接指定しない場合は、レイヤーのインスタンスが作成されたときに自動的に生成されます。
opacity ：レイヤーの透過状態のプロパティで、他のレイヤーと重ね合わせたときに透過の方が見やすい場合などに設定します。
visible ：レイヤーの表示状態を表し、デフォルトでは true が設定されます。本記事では、初期画面では非表示にしたい WebTileLayer の visible を false に設定しています。
definitionExpression ：八王子市のみの表示となるようにフィルターの定義を追加しています。
title ：レイヤーリスト（後述）上の呼び名を設定します。

なお、definitionExpression で使用するフィールド名は、FeatureLayer に指定している URL のエンドポイント（地価公示レイヤー、市区町村界レイヤー）から確認できます（下記画像における赤枠の名称が該当）。

２－２.png

4．マップにレイヤーを追加

次はマップのインスタンスにレイヤーを追加し表示しますが、マップが無ければレイヤーを描画することができないため、「マップの描画」→「レイヤーの追加」という順序で逐次的に処理する必要があります。

ここでは、arcgisViewOnReady() メソッドを用いて逐次的処理を行います。また、複数レイヤーの追加には map プロパティの addMany() を使用します。

ステップ 3 で記述したコードに続けて、下記を記述します。

// マップにレイヤーを追加
const mapElement = document.querySelector("arcgis-map");
await mapElement.viewOnReady();

  mapElement.map.addMany([gsipaleLyr, cityareaLyr, landpriceLyr]);

これにより、gsipaleLyr は非表示状態、landpriceLyr と cityareaLyr は表示状態で追加されます。

ここまでのステップの段階で、マップを表示してみると次のようになります。

途中段階イメージ

後半：レイヤーの表示状態の制御、レイヤーへのズーム

現在はレイヤーが重なり合った状態である上に、初期画面では世界地図の中に小さくレイヤーが表示されています。重なり合ったレイヤーの制御と、初期画面でレイヤーが大きく表示されるように設定する方法を以下に記載します。

5．レイヤーの表示状態の制御

重なり合ったレイヤーの表示状態を制御するための UI を追加します。ArcGIS Maps SDK for JavaScript では Layer list コンポーネントとしてその機能が提供されています。コンポーネントについては第 7 回目の記事で詳しく記載します。

<arcgis-map> タグの中に <arcgis-layer-list> タグを追記します。

<arcgis-map basemap="topo-vector" center="138, 35.5" zoom="5">
  <!-- レイヤーリストの実装 追加開始 -->
  <arcgis-layer-list slot="top-right"></arcgis-layer-list>
  <!-- 追加終了 -->
</arcgis-map>

なお、ステップ 3 で設定した title プロパティは、レイヤーリストにおける表示名として使用されます。

6．初期画面の設定

次に初期画面でレイヤー周辺を大きく表示します。今回はレイヤー周辺へ向かってだんだんとズームしていくアニメーション表示の機能を実装してみます。

whenLayerView() メソッドで返される Promise では、指定されたレイヤーの作成に対して then() メソッドで指定されている処理が実行されます。catch() メソッドには、レイヤーの作成が失敗した際の処理を指定します。

ステップ 4 で記述したコードの下に下記を記述します。

mapElement.map.addMany([gsipaleLyr, cityareaLyr, landpriceLyr]);

// 初期画面の設定
mapElement.whenLayerView(cityareaLyr) // gsipaleLyr, landpriceLyr でも可
  .then(() => {
    mapElement.goTo({
      // レイヤー周辺の位置とズームレベルを指定
      center: [139.32, 35.65],
      zoom: 12
    });
  }).catch(() => {
    console.error("MapView rejected:", err);
  });

ここまでのステップを終え、マップを表示してみると次のようになります。

(view in My Videos)

おわりに

本記事では、マップへのレイヤーの追加、レイヤーの表示状態の制御機能、および任意の位置へズームする機能についてご紹介しました。

レイヤーには、ここで取り上げていない多くのプロパティがあります。特定のレイヤーに関連するその他のプロパティの詳細については、リファレンスおよびサンプルを参照してください。

今回作成したアプリケーションは以下で動作を確認できます。

https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_sdk/intro_layers/display_layer.htm...

ArcGIS で始める Web マップアプリ開発　レイヤー表示編