はじめての Web マッピングアプリケーション開発 : レイヤーの可視化編
この記事は「はじめての Web マッピングアプリケーション開発」のシリーズ記事として、はじめて地図アプリ開発を行う方に向けて、ArcGIS API for JavaScript を使用した Web アプリ開発の流れを連載しています。
第 3 回目となる今回は、前回追加した愛知県の地価公示レイヤーにレンダラーを適用し、地価公示レイヤーの属性値をもとに様々な地図表現を行う方法をご紹介します。
前回の記事と同様にソースコードは ESRIジャパンの Github で公開しています（※2021年12月追記：”ファイル名.html” が2018年時のサンプル、”ファイル名_2021.html” が2021年に書き換えしたサンプルです）ので、ぜひご覧ください。Web アプリ開発の実行環境をお持ちでない方は、JSBin を使用して、Web ブラウザー上でコードの入力・編集、アプリの実行を試すこともできます。
レイヤーの可視化
前回の記事では、地図に地理院タイル、全国市区町村界、愛知県の地価公示レイヤーを追加し、表示 / 非表示を切り替えるところを中心にご紹介しました。そして、下図のようなアプリケーションが完成しました。
この地図では、地価公示の標準地が「どこにあるか」が地図上に表現されています。今回使用した地価公示レイヤーは各標準地の地価や用途地域の属性値を持っており、シンボルの大きさや色を変更することでこれらの属性値を地図上に可視化することができます。
クライアント側でシンボルの大きさや色を変更するためには、シンボルの設定と、レンダラーの作成・適用が必要です。
シンボルの概要
「シンボル」は、塗りつぶしの色や輪郭線の幅、透明度などグラフィックの外観を定義します。ArcGIS API for JavaScript では多くのシンボルが用意されています。
可視化に使用できるシンボルはポリゴン・ポリライン・ポリゴンといったジオメトリ タイプによって異なり、2D マップで使用できるシンボル タイプとジオメトリ タイプの関係については次の表をご覧ください。
ジオメトリ タイプ シンボル タイプ
ポイント | SimpleMarkerSymbol, PictureMarkerSymbol, TextSymbol |
| ポリライン | SimpleLineSymbol, TextSymbol |
| ポリゴン | SimpleFillSymbol, PictureFillSymbol, SimpleMarkerSymbol, TextSymbol |
レンダラーの概要
「レンダラー」はレイヤー内のグラフィックスに使用される一連のシンボルを定義します。レンダラーを使用することで、レイヤーが持つ特定の属性に基づいてフィーチャを色やサイズの異なるシンボルで可視化することができます。
ArcGIS API 4.7 for JavaScript で用意されているレンダラーは、以下の 3 種類です。
- 単一レンダラー（SimpleRenderer）：レイヤー内の全てのフィーチャを1つのシンボルでレンダリングします。
- 個別値分類レンダラー（UniqueValueRenderer）：レイヤーの文字列属性に基づいて各フィーチャをレンダリングします。
- 数値分類レンダラー（ClassBreaksRenderer）：レイヤーの数値属性に基づいて各フィーチャをレンダリングします。
※2021年12月追記：API のバージョン 4.8 以降でヒートマップ レンダラー（HeatmapRenderer）、4.11 以降で点密度 レンダラー（DotDensityRenderer）、4.13 以降で辞書 レンダラー（DictionaryRenderer） などが追加されています。また、ほとんどの地図の可視化は、以下のカテゴリーのいずれかに分類されます。
| 可視化のタイプ | レンダラー |
| 位置情報のみ | 単一レンダラー（SimpleRenderer）, ヒートマップレンダラー（HeatmapRenderer） |
| 個別値分類 | 個別値分類レンダラー（UniqueValueRenderer） |
| 数値分類 | 数値分類レンダラー（ClassBreaksRenderer） |
| 連続カラー/サイズ | 可視化変数（visualVariables）を使った単一レンダラー （SimpleRenderer）または個別値分類レンダラー（UniqueValueRenderer） |
| 多変量 | 可視化変数（visualVariables）を使った単一レンダラー （SimpleRenderer）または個別値分類レンダラー（UniqueValueRenderer） |
それでは、3 種類のレンダラーを使用して前回追加した愛知県の地価公示レイヤーを可視化してみましょう！
レンダラーを適用する手順は大きく分けて次の 3 ステップです。
- 表示するシンボルを定義する
- シンボル定義を使用したレンダラーを定義する
- レイヤーにレンダラーを適用する
※どのレンダラーを使用しても上記の手順は変わりませんが、それぞれに指定するタイプやプロパティの値があります。
単一レンダラーで可視化してみよう
まず最も基本的な「単一レンダラー」を使用します。ここでは、すべてのフィーチャを青い丸で表現した地図を作成するコードをご紹介します。
※レイヤーを追加するまでのステップはシリーズ第 1 回目、シリーズ第 2 回目の記事にてすでにご紹介しているため、本記事では省略します。
1. シンボルを作成する
地価公示レイヤーの可視化に使用するシンボルを作成します。単一レンダラーではすべてのフィーチャを同じシンボルで描画するため、シンボルを 1 つ用意します。
シンボルには、以下のプロパティが含まれます。
- type：シンボルのタイプを定義します。
- size：シンボルの大きさを定義します。単位を指定しない場合は、ポイントが使用されます。
- color：シンボルの色を定義します。カラー名や、RGB 値、RGBA 値を使用することができます。
- outline：シンボルのアウトラインを定義します。
//地価公示レイヤーのシンボルを定義
const chikakojiLyrSymbol = {
type: "simple-marker",
size: 8,
color: "#0000ff",
outline: {
color: "white",
width: 1
}
};
2. レンダラーを作成する
レンダラーを作成し、手順 1 で作成したシンボルを symbol プロパティに渡します。
- type：使用するレンダラーのタイプを定義します。単一レンダラーの場合は ”simple” と定義します。
- symbol：使用するシンボルを定義します。ここでは、上で作成したシンボル「chikakojiLyrSymbol」を渡します。
//レンダラーを定義
const renderer = {
type: "simple",
//上で作成したシンボルを渡す
symbol: chikakojiLyrSymbol,
};
3. レイヤーにレンダラーを適用する
地価公示レイヤーの renderer プロパティに、手順 2 で作成したレンダラー「renderer」を渡します。
//FeatureLayer：愛知県 地価公示：オープンデータ
const chikakojiLyr = new FeatureLayer({
url: "http://services3.arcgis.com/iH4Iz7CEdh5xTJYb/arcgis/rest/services/Aichi_ken_Chikakoji_H25/FeatureServer",
id: "chikakoji",
//上で作成したレンダラーを適用する
renderer: renderer
});
※2021年12月追記：2021年12月以降に試す場合は以下のコードを追加してください。
// FeatureLayer：公示地価(国土数値情報 調査時点:令和3年1月1日)： Living Atlas
const chikakojiLyr = new FeatureLayer({
url: "https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/LandPrice/FeatureServer/0",
id: "chikakoji",
//上で作成したレンダラーを適用する
renderer: renderer,
// 2021にデータを変更したことに伴いレイヤーが愛知県のみとなるようフィルタ定義を追加
definitionExpression: "L01_021 LIKE '23%'"
});
これで、単一レンダラーを使用した可視化の手順は完了です。完成した地図を見てみましょう。
完成した地図からは、地価公示の標準地がどこにあるかがわかります。
個別値分類レンダラーで可視化してみよう
次は「個別値分類レンダラー」を使用して、用途地域情報を格納している「用途」フィールドの属性値を個別値分類で可視化してみましょう！
個別値分類とは、レイヤーの特定のフィールドを使用し、フィールドの各属性値（個別値）にシンボルを割り当てて分類する方法です。ここでは、用途フィールドの住宅地、商業地域、工業地域という 3 つの個別値にそれぞれ異なるシンボルを割り当て、それ以外の値は「その他」に分類した地図を作成するコードをご紹介します。
1. シンボルを作成する
それぞれの個別値に割り当てるシンボルを作成します。各個別値を異なる色で表現するためシンボルの color プロパティに個別値ごとに使用する色を設定します。
//住宅地のシンボルを定義
const residenceSym = {
type: "simple-marker",
color: "#ED5151",
size: 7,
outline: {
color: "#999999",
width: 1
}
};
//商業地域のシンボルを定義
const commercialAreaSym = {
type: "simple-marker",
color: "#149ECE",
size: 7,
outline: {
color: "#999999",
width: 1
}
};
//工業地域のシンボルを定義
const industorialZoneaSym = {
type: "simple-marker",
color: "#A7C636",
size: 7,
outline: {
color: "#999999",
width: 1
}
};
//その他のシンボルを定義
const otherSym = {
type: "simple-marker",
color: "#AAAAAA",
size: 7,
outline: {
color: "#999999",
width: 1
}
};
2. レンダラーを作成する
レンダラーの uniqueValueInfos プロパティで各属性値と手順 １ で作成したシンボルを紐づけます。
- type：レンダラーの種類を定義します。個別値分類レンダラーを使用する際は "unique-value" にします。
- field：個別値分類に使用するフィールドを定義します。
- defaultSymbol：その他のシンボルを定義します。
- uniqueValueInfos：各個別値と上で作成したシンボルとの関連付けを行います。
- value：各個別値を定義します。
- symbol：シンボルを定義します。
//レンダラーを定義
const renderer = {
type: "unique-value",
field: "用途",
defaultSymbol: otherSym,
defaultLabel: "その他",
//それぞれの値で使用するシンボルを割り当てる
uniqueValueInfos: [{
value: "住宅地",
symbol: residenceSym,
},{
value: "商業地",
symbol: commercialAreaSym,
},{
value: "工業地",
symbol: industorialZoneaSym,
}]
};
※2021年12月追記：2021年12月以降に試す場合は以下のコードを追加してください。
//レンダラーを定義
const renderer = {
type: "unique-value",
field: "L01_001", //標準値コード
defaultSymbol: otherSym,
defaultLabel: "その他",
//それぞれの値で使用するシンボルを割り当てる
// "codedValues"はjsonで確認
// https://services.arcgis.com/wlVTGRSYTzAbjjiC/ArcGIS/rest/services/LandPrice/FeatureServer/0?f=pjson
// "000" : "住宅地" ,
// "003" : "宅地見込地" ,
// "005" : "商業地" ,
// "007" : "準工業地" ,
// "009" : "工業地" ,
// "010" : "市街化調整区域内の現況宅地" ,
// "013" : "市街化調整区域内の現況林地" ,
uniqueValueInfos: [{
value: "000", //000:住宅地
symbol: residenceSym,
label: "住宅地"
},{
value: "005", //005:商業地
symbol: commercialAreaSym,
label: "商業地"
},{
value: "009", //009:工業地
symbol: industorialZoneaSym,
label: "工業地"
}]
};
3. レイヤーにレンダラーを適用する
上で作成したレンダラーを地価公示レイヤーに適用します。
//FeatureLayer：愛知県 地価公示：オープンデータ
const chikakojiLyr = new FeatureLayer({
url: "http://services3.arcgis.com/iH4Iz7CEdh5xTJYb/arcgis/rest/services/Aichi_ken_Chikakoji_H25/FeatureServer",
id: "chikakoji",
//上で作成したレンダラーを適用する
renderer: renderer
});
※2021年12月追記：2021年12月以降に試す場合は以下のコードを追加してください。
// FeatureLayer：公示地価(国土数値情報 調査時点:令和3年1月1日)： Living Atlas
const chikakojiLyr = new FeatureLayer({
url: "https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/LandPrice/FeatureServer/0",
id: "chikakoji",
//上で作成したレンダラーを適用する
renderer: renderer,
// 2021にデータを変更したことに伴いレイヤーが愛知県のみとなるようフィルタ定義を追加
definitionExpression: "L01_021 LIKE '23%'"
});
これで、個別値分類レンダラーを使用した可視化の手順は完了です。作成した地図を見てみましょう。
作成した地図からは、名古屋市周辺に商業地が集中し、その周辺に住宅地が分布しているという傾向が見られます。
数値分類レンダラーで可視化してみよう
最後に「数値分類レンダラー」を使用して、数値分類による可視化を行います。数値分類による可視化とは、フィールドの値をいくつかのクラス ( 範囲 ) に分け、それぞれのクラスに対してシンボルを割り当てる手法です。ここでは、平成 26 年の地価データを示す「Ｈ２６価格」フィールドをシンボルの大きさによって表現するコードをご紹介します。平成 26 年の地価公示価格を 3340 円～ 19,1000 円、191,001 円～ 820,000 円、820,001 円～ 2,640,000 円、2,640,001 円～ 8,850,000 円の 4 つのクラスに分類した地図を作成します。
1.シンボルを作成する
それぞれのクラスで使用するシンボルを作成します。各クラスで使用するシンボルの大きさを size プロパティ に設定します。
//3340円-191000円の値のシンボルを定義
const sym1 ={
type: "simple-marker",
color: "#ff00ff",
size: 8,
outline: {
color: "#000000",
width: 0.5
}
};
//191001円-820000円の値のシンボルを定義
const sym2 = {
type: "simple-marker",
color: "#ff00ff",
size: 20,
outline: {
color: "#000000",
width: 0.5
}
};
//820001円-2640000円のシンボルを定義
const sym3 = {
type: "simple-marker",
color: "#ff00ff",
size: 30,
outline: {
color: "#000000",
width: 0.5
}
};
//2640001円-8850000円のシンボルを定義
const sym4={
type: "simple-marker",
color: "#ff00ff",
size: 40,
outline: {
color: "#000000",
width: 0.5
}
};
2. レンダラーを作成する
classBreakInfos プロパティで各クラスに含まれる数値の範囲を設定し、手順 2 で作成したシンボルとの紐付けを行います。
- type：レンダラーの種類を定義します。クラス範囲レンダラーを使用する際は "class-breaks" にします。
- field：使用するフィールドを定義します。
- minValue：クラス範囲の最小値を定義します。
- maxValue：クラス範囲の最大値を定義します。
- symbol：使用するシンボルを定義します。
//レンダラーを定義
const renderer = {
type: "class-breaks",
field: "Ｈ２６価格",
//クラス範囲を設定し、上で作成したシンボルをそれぞれに割り当てる
classBreakInfos: [{
minValue: 3340,
maxValue: 191000,
symbol: sym1
},
{
minValue: 191001,
maxValue: 820000,
symbol: sym2
},
{
minValue: 820001,
maxValue: 2640000,
symbol: sym3
},
{
minValue: 2640001,
maxValue: 8850000,
symbol: sym4
}
]
};
※2021年12月追記：2021年12月以降に試す場合は以下のコードを追加してください。
//レンダラーを定義
const renderer = {
type: "class-breaks",
field: "L01_094", //令和３年
//クラス範囲を設定し、上で作成したシンボルをそれぞれに割り当てる
classBreakInfos: [{
minValue: 3340,
maxValue: 191000,
label: "3,340円～191,000円",
symbol: sym1
},
{
minValue: 191001,
maxValue: 820000,
label: "191,001円～820,000円",
symbol: sym2
},
{
minValue: 820001,
maxValue: 2640000,
label: "820,001円～2,640,000円",
symbol: sym3
},
{
minValue: 2640001,
maxValue: 8850000,
label: "2,640,001円～8,850,000円",
symbol: sym4
}
]
};
3. レイヤーにレンダラーを適用する
上で作成したレンダラーを地価公示レイヤーに適用します。
//FeatureLayer：愛知県 地価公示：オープンデータ
const chikakojiLyr = new FeatureLayer({
url: "http://services3.arcgis.com/iH4Iz7CEdh5xTJYb/arcgis/rest/services/Aichi_ken_Chikakoji_H25/FeatureServer",
id: "chikakoji",
//上で作成したレンダラーを適用する
renderer: renderer,
opacity: 0.8
});
※2021年12月追記：2021年12月以降に試す場合は以下のコードを追加してください。
// FeatureLayer：公示地価(国土数値情報 調査時点:令和3年1月1日)： Living Atlas
const chikakojiLyr = new FeatureLayer({
url: "https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/LandPrice/FeatureServer/0",
id: "chikakoji",
//上で作成したレンダラーを適用する
renderer: renderer,
// 2021にデータを変更したことに伴いレイヤーが愛知県のみとなるようフィルタ定義を追加
definitionExpression: "L01_021 LIKE '23%'"
});
これで、数値分類レンダラーを使用した可視化の手順は完了です。作成した地図を見てみましょう。
作成した地図からは、名古屋市周辺に地価が特に高い地点が集中していることがわかります。
.png)
おわりに
本記事では、3 つのレンダラーを使用したシンボルの変更方法をご紹介しました。シンボルの変更ができるようになると、表現の幅が広がります。ぜひお手持ちのデータの可視化に挑戦してみてください！
今回作成したサンプルは以下で動作を確認できます。
- 単一 レンダラー：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/visualization/SimpleRenderer.h...
- 個別値分類 レンダラー：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/visualization/UniqueValueRende...
- 数値分類 レンダラー：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/visualization/ClassBreakRender...
※2021年12月追記：2021年12月以降は、以下で動作を確認できます。
- 単一 レンダラー：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/visualization/SimpleRenderer_2...
- 個別値分類 レンダラー：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/visualization/UniqueValueRende...
- 数値分類 レンダラー：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/visualization/ClassBreakRender...
次回は、選択したフィーチャの属性情報をポップアップに表示する方法をご紹介します。
