はじめての Web マッピングアプリケーション開発:レイヤーの可視化編

Document created by emi_murakamiesrij-esridist Employee on Jul 24, 2018Last modified by emi_murakamiesrij-esridist Employee on Aug 5, 2018
Version 7Show Document
  • View in full screen mode

この記事は「はじめての Web マッピングアプリケーション開発」のシリーズ記事として、はじめて地図アプリ開発を行う方に向けて、ArcGIS API for JavaScript を使用した Web アプリ開発の流れを連載しています。

 

3 回目となる今回は、前回追加した愛知県の地価公示レイヤーにレンダラーを適用し、地価公示レイヤーの属性値をもとに様々な地図表現を行う方法をご紹介します。

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

 

レイヤーの可視化

 

前回の記事では、地図に地理院タイル、全国市区町村界、愛知県の地価公示レイヤーを追加し、表示 / 非表示を切り替えるところを中心にご紹介しました。そして、下図のようなアプリケーションが完成しました。

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

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

 

 

シンボルの概要

 

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

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

 

ジオメトリ タイプシンボル タイプ

ポイント

SimpleMarkerSymbol, PictureMarkerSymbol, TextSymbol
ポリラインSimpleLineSymbol, TextSymbol
ポリゴンSimpleFillSymbol, PictureFillSymbol, SimpleMarkerSymbol, TextSymbol

 

レンダラーの概要

 

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

 

ArcGIS API 4.7 for JavaScript  で用意されているレンダラーは、以下の 3 種類です。

 

 

それでは、3 種類のレンダラーを使用して前回追加した愛知県の地価公示レイヤーを可視化してみましょう!

 

レンダラーを適用する手順は大きく分けて次の 3 ステップです。

 

  1. 表示するシンボルを定義する
  2. シンボル定義を使用したレンダラーを定義する
  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
});

 

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

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

 

 

 

個別値分類レンダラーで可視化してみよう

 

次は「個別値分類レンダラー」を使用して、用途地域情報を格納している「用途」フィールドの属性値を個別値分類で可視化してみましょう!

個別値分類とは、レイヤーの特定のフィールドを使用し、フィールドの各属性値(個別値)にシンボルを割り当てて分類する方法です。ここでは、用途フィールドの住宅地、商業地域、工業地域という 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 プロパティで各属性値と手順 1 で作成したシンボルを紐づけます。

 

  • 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,
 }]
};

 

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

 

上で作成したレンダラーを地価公示レイヤーに適用します。

 

//FeatureLayer:愛知県 地価公示:オープンデータ
const chikakojiLyr = new FeatureLayer({
 url: "http://services3.arcgis.com/iH4Iz7CEdh5xTJYb/arcgis/rest/services/Aichi_ken_Chikakoji_H25/FeatureServer",
 id: "chikakoji",
 //上で作成したレンダラーを適用する
 renderer: renderer
});

 

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

作成した地図からは、名古屋市周辺に商業地が集中し、その周辺に住宅地が分布しているという傾向が見られます。

 

 

数値分類レンダラーで可視化してみよう

 

最後に「数値分類レンダラー」を使用して、数値分類による可視化を行います。数値分類による可視化とは、フィールドの値をいくつかのクラス ( 範囲 ) に分け、それぞれのクラスに対してシンボルを割り当てる手法です。ここでは、平成 26 年の地価データを示す「H26価格」フィールドをシンボルの大きさによって表現するコードをご紹介します。平成 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: "H26価格",
 //クラス範囲を設定し、上で作成したシンボルをそれぞれに割り当てる
 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
 }
 ]
};

 

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
});

 

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

作成した地図からは、名古屋市周辺に地価が特に高い地点が集中していることがわかります。

 

 

おわりに

 

本記事では、3 つのレンダラーを使用したシンボルの変更方法をご紹介しました。シンボルの変更ができるようになると、表現の幅が広がります。ぜひお手持ちのデータの可視化に挑戦してみてください!

 

次回は、選択したフィーチャの属性情報をポップアップに表示する方法をご紹介します。

 

 

関連リンク

1 person found this helpful

Attachments

    Outcomes