ArcGIS で始める Web マップアプリ開発　様々な地図表現編

はじめに

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

第 3 回目となる今回は、レイヤーの様々な地図表現についてご紹介します。

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

レイヤーの表現

前回の記事では、マップへのレイヤーの追加、レイヤーの表示状態の制御機能、およびレイヤーの初期表示でのズーム機能を中心にご紹介しました。そして、下図のようなアプリケーションが完成しました。

第 2 回目の記事　完成イメージ

この地図では、地価公示の標準地が「どこにあるか」が地図上に表現されています。今回使用した地価公示レイヤーは各標準地の地価や用途地域の属性値を持っており、シンボルの大きさや色を変更することでこれらの属性値を地図上に表現することができます。

シンボルの大きさや色を変更するためには、シンボルの設定と、レンダラーの作成・適用が必要です。

シンボルの概要

「シンボル」では、塗りつぶしの色や輪郭線の幅、透明度などグラフィックの外観を定義します。ArcGIS Maps SDK for JavaScript では多くのシンボルが用意されています。

シンボルの種類はポイント・ポリライン・ポリゴンといったジオメトリータイプによって異なります。2D マップで使用できるシンボルタイプとジオメトリータイプの関係については次の表をご覧ください。

ジオメトリータイプ	シンボルタイプ
ポイント	SimpleMarkerSymbol, PictureMarkerSymbol, TextSymbol
ポリライン	SimpleLineSymbol, TextSymbol
ポリゴン	SimpleFillSymbol, PictureFillSymbol, SimpleMarkerSymbol, TextSymbol

レンダラーの概要

「レンダラー」はレイヤー内のグラフィックに使用される一連のシンボルを定義します。レンダラーを使用することで、レイヤーが持つ特定の属性に基づいてフィーチャを色やサイズの異なるシンボルで表現することができます。

地図の表現とそれに対応したレンダラーは、たとえば以下のものがあります。

表現のタイプ	レンダラーのタイプ
位置情報のみ	単一レンダラー（SimpleRenderer）
個別値分類	個別値分類レンダラー（UniqueValueRenderer）
数値分類	数値分類レンダラー（ClassBreaksRenderer）
連続カラー/サイズ	可視化変数（visualVariables）を使った単一レンダラー（SimpleRenderer）または個別値分類レンダラー（UniqueValueRenderer）
多変量	可視化変数（visualVariables）を使った単一レンダラー（SimpleRenderer）または個別値分類レンダラー（UniqueValueRenderer）

本記事では、単一、個別値分類、数値分類の3 種類のレンダラーを使用して、前回の記事で使用した地価公示レイヤーを表現してみましょう

レンダラーを適用するステップは大きく分けて次の 3 段階に分けられます。

表示するシンボルを定義する
シンボル定義を使用したレンダラーを定義する
レイヤーにレンダラーを適用する

※ どのレンダラーを使用しても上記のステップは基本的に変わりませんが、それぞれに指定するタイプやプロパティの値があります。

単一レンダラーで表現してみよう

まず最も基本的な「単一レンダラー」を使用します。ここでは、すべてのフィーチャを青い丸で表現した地図を作成します。

1．マップの表示

Map コンポーネントを利用してマップを表示するまでのステップは、これまでの記事でご紹介していますので省略します。

2. シンボルを作成する

地価公示レイヤーの表現に使用するシンボルを作成します。単一レンダラーではすべてのフィーチャを同じシンボルで描画するため、シンボルを 1 つ用意します。

シンボルには、以下のプロパティが含まれます。

type：シンボルのタイプを定義します。単一レンダラーの場合は “simple-marker” と定義します。
size：シンボルの大きさを定義します。単位を指定しない場合は、ポイントが使用されます。
color：シンボルの色を定義します。カラー名や、RGB 値、RGBA 値を使用することができます。
outline：シンボルのアウトラインを定義します。

モジュールのインポート文に続けて、下記のコードを記述します。

// 地価公示レイヤーの単一レンダラーを定義 シンボルの作成
const landpriceLyrSymbol = {
  type: "simple-marker",
  size: 8,
  color: "#0000ff",
  outline: {
    color: "#ffffff",
    width: 1
  }
};

なおここでは、landpriceLyrSymbol は JavaScript オブジェクトとして作成していますが、後の工程では SimpleMarkerSymbol クラスのインスタンスとして使用されています。この時、SimpleMarkerSymbol というクラス名の明示はしておらず、SimpleMarkerSymbol モジュールのインポートもしていません。これは autocast という機能によって、JavaScript オブジェクトを ArcGIS Maps SDK for JavaScript のインスタンスへと自動的に変換しているためで、次の SimpleRenderer などでもこの機能を使用しています。autocast の詳細は、リファレンスをご参照ください。

3. レンダラーを作成する

レンダラーを作成し、ステップ 2 で作成したシンボルを symbol プロパティに渡します。

type：使用するレンダラーのタイプを定義します。単一レンダラーの場合は ”simple” と定義します。
symbol：使用するシンボルを定義します。ここでは、上で作成したシンボル「landpriceLyrSymbol」を渡します。

// レンダラーの定義
const renderer = {
  type: "simple",
  // 上で定義したシンボルを適用
  symbol: landpriceLyrSymbol
};

4. レイヤーにレンダラーを適用する

地価公示レイヤーを読み込む際に、 renderer プロパティにステップ 3 で作成したレンダラーを渡します。

    // 地価公示レイヤーの読み込み
const landpriceLyr = new FeatureLayer({
  url: "https://services.arcgis.com/wlVTGRSYTzAbjjiC/ArcGIS/rest/services/LandPrice/FeatureServer",
  id: "landprice",
  definitionExpression: "L01_022 = '13201'",
  title: "八王子市の地価公示(FeatureLayer)",
  // 上で定義したレンダラーを適用する
  renderer: renderer,
  opacity: 0.3  // 背景が見やすくなるように透明度を設定
});

市区町村界レイヤーの読み込み以降は第 2 回目の記事と同様に記述します。

これで、単一レンダラーの手順は完了です。完成した地図を見てみましょう。

完成した地図からは、地価公示の標準地がどこにあるかがわかります。

単一レンダラー　完成イメージ

個別値分類レンダラーで表現してみよう

次に「個別値分類レンダラー」を使用してみましょう。

個別値分類とは、レイヤーの特定のフィールドを使用し、フィールドの各属性値（個別値）にシンボルを割り当てて分類する方法です。ここでは、建物の前面を走っている道路情報を格納している「前面道路状況」フィールドを用います。前面の道路が「国道」か、「都道」か、それ以外か、によってシンボルの色を変えた地図を作成します。

1. シンボルを作成する

それぞれの個別値に割り当てるシンボルを作成します。各個別値を異なる色で表現するため、シンボルの color プロパティに個別値ごとの色を設定します。

新しいコードファイルを用意し、モジュールのインポート文の下に下記のコードを記述します。

// 国道シンボルを定義
const kokudoSym = {
  type: "simple-marker",
  size: 8,
  color: "red", // 国道、都道、その他、のそれぞれで色を設定
  outline: {
    color: "white",
    width: 1
  }
};
// 都道シンボルを定義
const todoSym = {
  type: "simple-marker",
  size: 8,
  color: "blue",
  outline: {
    color: "white",
    width: 1
  }
};
// その他のシンボルを定義
const otherSym = {
  type: "simple-marker",
  size: 8,
  color: "grey",
  outline: {
    color: "white",
    width: 1
  }
};

2. レンダラーを作成する

レンダラーの uniqueValueInfos プロパティで各属性値と、ステップ 1 で作成したシンボルを紐づけます。

type：レンダラーの種類を定義します。個別値分類レンダラーを使用する際は "unique-value" にします。
field：個別値分類に使用するフィールド名を定義します。
uniqueValueInfos：各個別値と上で作成したシンボルとの関連付けを行います。

value：各個別値を定義します。
symbol：シンボルを定義します。
label：凡例（後述）に表示するラベルを定義します。

defaultSymbol：その他のシンボルを定義します。

// 個別値分類レンダラーを定義
const renderer = {
  type: "unique-value",
  field: "L01_039", // 前面道路状況フィールドを選択
  uniqueValueInfos: [{
      value: "国道",  // 国道のシンボルを定義
      symbol: kokudoSym,
      label: "前面が国道"
  },{
      value: "都道",  // 都道のシンボルを定義
      symbol: todoSym,
      label: "前面が都道"
  }],
  defaultSymbol: otherSym,  // その他のシンボルを定義
  defaultLabel: "その他"
};

3. レイヤーにレンダラーを適用する

地価公示レイヤーの読み込み以降は、単一レイヤーと同様のため省略します。

4. 凡例を表示する

現在下図のように、複数の色のシンボル設定ができました。しかし、何に基づいて色分けされているのかが分からないため、凡例を追加します。

個別値分類はできたが、凡例が無い

ArcGIS Maps SDK for JavaScriptで凡例を実装するには、Legend コンポーネントを使用します。コンポーネントについては第 7 回目の記事で詳しく記載します。

<arcgis-map> タグの中に、<arcgis-legend> タグを追加します。

<arcgis-map basemap="topo-vector" center="138, 35.5" zoom="5">
  <arcgis-layer-list slot="top-right"></arcgis-layer-list>
  <!-- 凡例の実装 追加開始 -->
  <arcgis-legend slot="top-left"></arcgis-legend>
  <!-- 追加終了 -->
</arcgis-map>

ステップ 2 で設定した label プロパティは、凡例における表示名として使用されます。

これで、個別値分類レンダラーの手順は完了です。完成した地図からは、前面の道路状況が視覚的に分かります。

個別値分類レンダラー　完成イメージ

＜参考＞シンボルとレンダラーを同時に記述する場合

今回、シンボルとレンダラーの定義について、ステップ 1 と 2 の 2 つのパートに分けましたが、ステップ 1 と 2 のコードを合わせて下記のコードに置き換えても、個別値分類のレンダラーの設定が可能です。

// シンボルとレンダラーを同時に記述する場合
const renderer = {
  type: "unique-value",
  field: "L01_039",
  uniqueValueInfos: [{
    value: "国道", label: "前面が国道",
    // 国道のシンボルを定義
    symbol: {type:"simple-marker", size: 8, color: "blue", outline: {color: "white", width: 0.5}}
  },{
    value: "都道", label: "前面が都道",
    // 都道のシンボルを定義
    symbol: {type:"simple-marker", size: 8, color: "red", outline: {color: "white", width: 0.5}}
  }],
  // その他の値に適用するシンボル
  defaultSymbol: {type: "simple-marker", size: 8, color: "grey", outline: {color: "white", width: 0.5}},
  defaultLabel: "その他"
};

数値分類レンダラーで表現してみよう

最後に、「数値分類レンダラー」を使用してみます。

数値分類とは、フィールドの値をいくつかの範囲に分け、それぞれに対してシンボルを割り当てる手法です。本記事では、令和 7 年の地価データを示す「地価公示価格」フィールドに対して、シンボルの大きさによって地価の大小を表現します。範囲は、10 万円以下、20 万円以下、30 万円以下、30 万円より高い、の 4 つに分類し、この順で大きくなるように表示される地図を作成します。

また、個別値レンダラーの＜参考＞と同様に、シンボルとレンダラーの定義を同時に行います。

1.シンボルおよびレンダラーを作成する

まずレンダラーを定義し、その中の classBreakInfos プロパティに、それぞれの範囲で使用するシンボルを定義します。シンボルの大きさは size プロパティで設定し、分類の基準となる数値の範囲は classBreakInfos プロパティで定義します。

type：レンダラーの種類を定義します。数値分類レンダラーを使用する際は "class-breaks" にします。
field：使用するフィールドを定義します。
minValue：classBreakInfosで使用。それぞれの範囲の最小値を定義します。
maxValue：classBreakInfosで使用。それぞれの範囲の最大値を定義します。
symbol：classBreakInfosで使用。使用するシンボルを定義します。

モジュールのインポート文の下に下記のコードを記述します。

// シンボル、およびレンダラーの定義
const renderer = {
  type: "class-breaks",
  field: "L01_006",
  classBreakInfos: [{
    // 10万円以下
    minValue: 0, maxValue: 100000,
    symbol: { type: "simple-marker", size: 8, color: "green", outline: { color: "white", width: 0.5 } },
    label: "Price: 0-100,000"
  }, {
    // 10万円より高く20万円以下
    minValue: 100001, maxValue: 200000,
    symbol: { type: "simple-marker", size: 16, color: "green", outline: { color: "white", width: 0.5 } },
    label: "Price: 100,001-200,000"
  }, {
    // 20万円より高く30万円以下
    minValue: 200001, maxValue: 300000,
    symbol: { type: "simple-marker", size: 24, color: "green", outline: { color: "white", width: 0.5 } },
    label: "Price: 200,001-300,000"
  }, {
    // 30万円より高い
    minValue: 300001, maxValue: 2840000, // 最大値はそれぞれのデータで調べて記述
    symbol: { type: "simple-marker", size: 32, color: "green", outline: { color: "white", width: 0.5 } },
    label: "Price: 300,001-"
  }]
};

2. レイヤーにレンダラーを適用する

地価公示レイヤーの読み込み以降は、単一レイヤーのステップ 3 と基本的に同じですが、面的に地図を覆うシンボルであるので、背景の地図が見えにくくなってしまいます。背景の地図が見えやすくなるようにopacity プロパティによって透明度を設定するコードを追記します。

  renderer: renderer,
  // 背景が見やすくなるように透明度を設定 追加開始
  opacity: 0.3
  // 追加終了
});

これで、数値分類レンダラーの手順は完了です。作成した地図を見てみましょう。

国道や都道の近く、駅前の地価が高いことが読み取れます。

数値分類レンダラー　完成イメージ

おわりに

本記事では、3 種類のレンダラーを使った地図表現についてご紹介しました。ぜひお手持ちのデータで様々な地図表現に挑戦してみてください！

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

単一レンダラー：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_sdk/visualization/simple_renderer....
個別値分類レンダラー：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_sdk/visualization/unique_value_ren...
数値分類レンダラー：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_sdk/visualization/class_breaks_ren...

ArcGIS で始める Web マップアプリ開発　様々な地図表現編