UP | HOME
  • mapray JSのオープンソースを公開しているGithub.comへのリンク

9.5 GeoJSONプロパティの参照(ポリゴンデータ)

ポリゴンのGeoJSONデータを読み込み、そのデータが持つプロパティを参照して対象データ表示する方法を説明します。

1. サンプルコード

ポリゴンのGeoJSONデータを読み込み、そのデータが持つプロパティを参照して対象データ表示する ReadGeoJsonPolygonProperties.html 及び、 ReadGeoJsonPolygonProperties.js のサンプルコードです。 シーンファイル（ tokyo_population.json ）は、国土交通省から取得した実データのため、詳細説明は割愛します。 このサンプルコードでは、人口密度に応じてポリゴンの色をグラデーション表示し、表示するポリゴンの透過率を変更できます。変更できる透過率の範囲は、0.0、0.5、1.0となるます。

1.1. ReadGeoJsonPolygonProperties.html

 1: <!DOCTYPE html>
 2: <html>
 3:     <head>
 4:         <meta charset="utf-8">
 5:         <title>ReadGeoJsonPolygonPropertiesSample</title>
 6:         <script src="https://resource.mapray.com/mapray-js/v0.9.5/mapray.min.js"></script>
 7:         <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
 8:         <script src="ReadGeoJsonPolygonProperties.js" charset="utf-8"></script>
 9:         <style>
10:             html, body {
11:                 height: 100%;
12:                 margin: 0;
13:                 background-color: #E0E0E0;
14:             }
15: 
16:             select{
17:                 height:22px;
18:                 vertical-align:middle;
19:                 font-size:13px;
20:                 margin-left:10px;
21:             }
22: 
23:             p{
24:                 font-size:13px;
25:                 margin-left:5px;
26:             }
27: 
28:             div#mapray-container {
29:                 display: flex;
30:                 position: relative;
31:                 height: calc(100% - 37px);
32:             }
33: 
34:             div#OpacityBox {
35:                 display: flex;
36:                 background-color: #E0E0E0;
37:                 height: 35px;
38:                 width: 120px;
39:                 float: left;
40:                 border: inset 1px #000000;
41:                 align-items: center;
42:             }
43:         </style>
44:     </head>
45: 
46:     <body onload="CreateReadGeoJsonPolygonPropertiesInstance('mapray-container');">
47:         <div id="mapray-container"></div>
48: 
49:         <div id="OpacityBox">
50:             <p>Opacity</p>
51:             <select name="OpacityPullDown" id="OpacityPullDown" onchange="OpacityValueChanged()">
52:                 <option value=0>0</option>
53:                 <option value=0.5 selected>0.5</option>
54:                 <option value=1.0>1.0</option>
55:             </select>
56:         </div>
57:     </body>
58: </html>

1.2. ReadGeoJsonPolygonProperties.js

  1: var read_GeoJson_polygon_properties;
  2: 
  3: class ReadGeoJsonPolygonProperties extends mapray.RenderCallback {
  4:     constructor(container) {
  5:         super();
  6: 
  7:         // Access Tokenを設定
  8:         var accessToken = "<your access token here>";
  9: 
 10:         // Viewerを作成する
 11:         new mapray.Viewer(container, {
 12:             render_callback: this,
 13:             image_provider: this.createImageProvider(),
 14:             dem_provider: new mapray.CloudDemProvider(accessToken)
 15:         });
 16: 
 17:         // geoJSONファイルのライセンス表示
 18:         this.viewer.attribution_controller.addAttribution( {
 19:             display: "国土数値情報　ダウンロードサービス 1kmメッシュ別将来推計人口（H29国政局推計）（shape形式からGeoJSON形式に変換）",
 20:             link: "http://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-mesh1000.html"
 21:         } );
 22: 
 23:         this.SetCamera();
 24: 
 25:         this.AddText();
 26: 
 27:         this.LoadGeoJson();
 28:     }
 29: 
 30:     // 画像プロバイダを生成
 31:     createImageProvider() {
 32:         return new mapray.StandardImageProvider( { url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", format: "jpg", min_level: 2, max_level: 18 } );
 33:     }
 34: 
 35:     // カメラ位置の設定
 36:     SetCamera() {
 37:         // 球面座標系（経度、緯度、高度）で視点を設定。座標は府中市付近
 38:         var home_pos = { longitude: 139.529127, latitude: 35.677033, height: 100.0 };
 39: 
 40:         // 球面座標から地心直交座標へ変換
 41:         var home_view_geoPoint = new mapray.GeoPoint( home_pos.longitude, home_pos.latitude, home_pos.height );
 42:         var home_view_to_gocs = home_view_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
 43: 
 44:         // 視線方向を定義
 45:         var cam_pos = mapray.GeoMath.createVector3([0, 0, 100000]);
 46:         var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]);
 47:         var cam_up = mapray.GeoMath.createVector3([0, 1, 0]);
 48: 
 49:         // ビュー変換行列を作成
 50:         var view_to_home = mapray.GeoMath.createMatrix();
 51:         mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, view_to_home);
 52: 
 53:         // カメラの位置と視線方向からカメラの姿勢を変更
 54:         var view_to_gocs = this.viewer.camera.view_to_gocs;
 55:         mapray.GeoMath.mul_AA(home_view_to_gocs, view_to_home, view_to_gocs);
 56: 
 57:         // カメラのnear、farの設定
 58:         this.viewer.camera.near = 30;
 59:         this.viewer.camera.far = 500000;
 60:     }
 61: 
 62:     // テキストの表示
 63:     AddText() {
 64:         // 文字のエンティティを作成
 65:         var font_Entity = new mapray.TextEntity(this.viewer.scene);
 66: 
 67:         // 府中市付近
 68:         var Font_Point = new mapray.GeoPoint(139.529127, 35.677033, 5000);
 69: 
 70:         font_Entity.addText("Tokyo", Font_Point, { color: [0, 0, 0], font_size: 50 });
 71: 
 72:         // エンティティをシーンに追加
 73:         this.viewer.scene.addEntity(font_Entity);
 74:     }
 75: 
 76:     // GeoJSONの読み込み
 77:     LoadGeoJson() {
 78:         var loader = new mapray.GeoJSONLoader( this._viewer.scene, "./data/tokyo_population.json", {
 79:             onLoad: (loader, isSuccess) => { console.log("success load geojson") },
 80:             getFillColor: d => d.properties ? this.GetFillColor(d.properties) : [1.0, 0.0, 1.0, 0.5],
 81:             getAltitude: () => 2000
 82:         } );
 83: 
 84:         loader.load();
 85:     }
 86: 
 87:     // プロパティから線の色を決定し返す
 88:     GetFillColor( properties={} ) {
 89:         var RGBArray = [0.0, 0.0, 0.0, 0.5];
 90: 
 91:         if( properties.POP2010 ) {
 92:             var pop2010 = properties.POP2010;
 93: 
 94:             // 人口密度が一定数以上かどうかで色を決定する
 95:             if ( pop2010 > 20000 ) {
 96:                 RGBArray = [1.0, 0.0, 0.0, 0.5];
 97:             }
 98:             else if ( pop2010 > 15000 ) {
 99:                 RGBArray = [1.0, 0.3, 0.0, 0.5];
100:             }
101:             else if ( pop2010 > 10000 ) {
102:                 RGBArray = [1.0, 0.6, 0.0, 0.5];
103:             }
104:             else {
105:                 RGBArray = [1.0, 1.0, 0.0, 0.5];
106:             }
107:         }
108: 
109:         return RGBArray;
110:     }
111: 
112:     ChangeOpacity() {
113:         // プルダウンの値取得
114:         var opacity_Value = parseFloat(document.getElementById("OpacityPullDown").value);
115: 
116:         // プルダウンの値を設定
117:         for ( var i = 1; i < this.viewer.scene.num_entities; ++i ) {
118:             var polygonEntity = this.viewer.scene.getEntity(i);
119:             polygonEntity.setOpacity(opacity_Value);
120:         }
121:     }
122: 
123: }
124: 
125: function CreateReadGeoJsonPolygonPropertiesInstance(container) {
126:     read_GeoJson_polygon_properties = new ReadGeoJsonPolygonProperties(container);
127: }
128: 
129: function OpacityValueChanged() {
130:     read_GeoJson_polygon_properties.ChangeOpacity()
131: }

2. htmlのサンプルコードの詳細

htmlのサンプルコードの詳細を以下で解説します。

2.1. htmlの文字コード設定

4行目でhtmlの文字コードを設定します。このサンプルコードでは、utf-8を設定します。 

4: <meta charset="UTF-8">

2.2. タイトルの設定

5行目でタイトルを設定します。このサンプルコードでは、ReadGeoJsonPolygonPropertiesSampleを設定します。 

5: <title>ReadGeoJsonPolygonPropertiesSample</title>

2.3. JavaScriptファイルのパス設定

6～8行目で参照するJavaScript及びスタイルシートのパスを設定します。このサンプルコードでは、maprayのJavaScriptファイル、スタイルシート、ポリゴンのプロパティを参照して対象データ表示するJavaScriptファイル（ ReadGeoJsonPolygonProperties.js ）を設定します。 

6: <script src="https://resource.mapray.com/mapray-js/v0.9.5/mapray.min.js"></script>
7: <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
8: <script src="ReadGeoJsonPolygonProperties.js" charset="utf-8"></script>

2.4. スタイルの設定

9～43行目で表示する要素のスタイルを設定します。このサンプルコードでは、下記のスタイルを設定します。

  • html
  • body
  • select
  • p
  • div#mapray-container（地図表示部分）
  • div#OpacityBox（透過率変更コンボボックス表示部分）
 9: <style>
10:     html, body {
11:         height: 100%;
12:         margin: 0;
13:         background-color: #E0E0E0;
14:     }
15: 
16:     select{
17:         height:22px;
18:         vertical-align:middle;
19:         font-size:13px;
20:         margin-left:10px;
21:     }
22: 
23:     p{
24:         font-size:13px;
25:         margin-left:5px;
26:     }
27: 
28:     div#mapray-container {
29:         display: flex;
30:         position: relative;
31:         height: calc(100% - 37px);
32:     }
33: 
34:     div#OpacityBox {
35:         display: flex;
36:         background-color: #E0E0E0;
37:         height: 35px;
38:         width: 120px;
39:         float: left;
40:         border: inset 1px #000000;
41:         align-items: center;
42:     }
43: </style>

2.5. loadイベントの処理

画面を表示するときに、ポリゴンのプロパティを参照して対象データ表示するクラスを生成します。そのため、46行目で、ページの読み込み時に、ポリゴンのプロパティを参照して対象データ表示するクラスのインスタンスを生成するメソッド（ CreateReadGeoJsonPolygonPropertiesInstance ）を呼ぶように設定します。 ポリゴンのプロパティを参照して対象データ表示するクラスのインスタンスを生成するメソッドは、JavaScriptのサンプルコードの詳細で説明します。 

46: <body onload="CreateReadGeoJsonPolygonPropertiesInstance('mapray-container');">

2.6. 地図表示部分の指定

47行目で地図表示部分のブロックを記述します。 詳細はヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。 

47: <div id="mapray-container"></div>

2.7. 透過率変更のUI

49～56行目で透過率変更コンボボックス表示部分のブロックを記述します。このブロックの中には、透過率を変更するコンボボックスを用意します。このサンプルコードでは、0.0、0.5、1.0を設定します。 透過率を変更するコンボボックスが変更された時のイベント（onchange）に、透過率のコンボボックス変更時に呼び出す関数（ OpacityValueChanged ）を設定します。 透過率のコンボボックス変更時に呼び出す関数はJavaScriptのサンプルコードの詳細で説明します。 

49: <div id="OpacityBox">
50:     <p>Opacity</p>
51:     <select name="OpacityPullDown" id="OpacityPullDown" onchange="OpacityValueChanged()">
52:         <option value=0.0>0.0</option>
53:         <option value=0.5 selected>0.5</option>
54:         <option value=1.0>1.0</option>
55:     </select>
56: </div>

3. JavaScriptのサンプルコードの詳細

JavaScriptのサンプルコードの詳細を以下で解説します。

3.1. クラスの説明

3～123行目で、ポリゴンのGeoJSONデータを読み込み、そのデータが持つプロパティを参照して対象データ表示するクラスを定義します。クラス内の各メソッドの詳細は以降で解説します。 ポリゴンのプロパティを参照して対象データ表示するクラスは、mapray.RenderCallbackクラスを継承します。 また、1行目でプロパティを参照して対象データを表示するクラスのグローバル変数を定義します。 

var read_GeoJson_polygon_properties;

class ReadGeoJsonPolygonProperties extends mapray.RenderCallback {

  //中略

}

3.2. コンストラクタ

4～28行目が線のGeoJSONデータを読み込み、そのデータが持つプロパティを参照して対象データ表示するクラスのコンストラクタです。引数として渡されるブロックのidに対して、mapray.Viewerを作成し、geoJSONファイルの出典情報を追加します。そして、カメラの位置・向きの設定メソッドを呼び出します。その後、文字の表示メソッドとGeoJSONデータのロードメソッドを呼び出します。viewerを作成する際の画像プロバイダは画像プロバイダの生成メソッドから取得します。 mapray.Viewerの作成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。 

 4: constructor(container) {
 5:     super();
 6: 
 7:     // Access Tokenを設定
 8:     var accessToken = "<your access token here>";
 9: 
10:     // Viewerを作成する
11:     new mapray.Viewer(container, {
12:         render_callback: this,
13:         image_provider: this.createImageProvider(),
14:         dem_provider: new mapray.CloudDemProvider(accessToken)
15:     });
16: 
17:     // geoJSONファイルのライセンス表示
18:     this.viewer.attribution_controller.addAttribution( {
19:         display: "国土数値情報　ダウンロードサービス 1kmメッシュ別将来推計人口（H29国政局推計）（shape形式からGeoJSON形式に変換）",
20:         link: "http://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-mesh1000.html"
21:     } );
22: 
23:     this.SetCamera();
24: 
25:     this.AddText();
26: 
27:     this.LoadGeoJson();
28: }

3.3. 画像プロバイダの生成

31～33行目が画像プロバイダの生成メソッドです。生成した画像プロバイダを返します。 画像プロバイダの生成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。 

30: // 画像プロバイダを生成
31: createImageProvider() {
32:     return new mapray.StandardImageProvider( { url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", format: "jpg", min_level: 2, max_level: 18 } );
33: }

3.4. カメラの位置・向きの設定

36～60行目がカメラの位置・向きの設定メソッドです。 カメラの位置・向きの設定は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。 

35: // カメラ位置の設定
36: SetCamera() {
37:     // 球面座標系（経度、緯度、高度）で視点を設定。座標は府中市付近
38:     var home_pos = { longitude: 139.529127, latitude: 35.677033, height: 100.0 };
39: 
40:     // 球面座標から地心直交座標へ変換
41:     var home_view_geoPoint = new mapray.GeoPoint( home_pos.longitude, home_pos.latitude, home_pos.height );
42:     var home_view_to_gocs = home_view_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
43: 
44:     // 視線方向を定義
45:     var cam_pos = mapray.GeoMath.createVector3([0, 0, 100000]);
46:     var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]);
47:     var cam_up = mapray.GeoMath.createVector3([0, 1, 0]);
48: 
49:     // ビュー変換行列を作成
50:     var view_to_home = mapray.GeoMath.createMatrix();
51:     mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, view_to_home);
52: 
53:     // カメラの位置と視線方向からカメラの姿勢を変更
54:     var view_to_gocs = this.viewer.camera.view_to_gocs;
55:     mapray.GeoMath.mul_AA(home_view_to_gocs, view_to_home, view_to_gocs);
56: 
57:     // カメラのnear、farの設定
58:     this.viewer.camera.near = 30;
59:     this.viewer.camera.far = 500000;
60: }

3.5. 文字の表示

63～74行目で、地名を表現する文字をmapray.Viewerのシーンに追加します。 文字の表示方法の詳細は、ヘルプページ『文字の表示（addTextを使った表示）』を参照してください。 

62: // テキストの表示
63: AddText() {
64:     // 文字のエンティティを作成
65:     var font_Entity = new mapray.TextEntity(this.viewer.scene);
66: 
67:     // 府中市付近
68:     var Font_Point = new mapray.GeoPoint(139.529127, 35.677033, 5000);
69: 
70:     font_Entity.addText("Tokyo", Font_Point, { color: [0, 0, 0], font_size: 50 });
71: 
72:     // エンティティをシーンに追加
73:     this.viewer.scene.addEntity(font_Entity);
74: }

3.6. シーンのロード

77～85行目がシーンのロードメソッドです。mapray.GeoJSONLoaderでシーンを読み込みます。 GeoJSONLoaderクラス生成時の引数には、GeoJSONファイルのエンティティを追加するシーン、読み込むGeoJSONファイルのURL、オプション集合の順に指定します。このサンプルコードでは、viewerクラスのシーン、GeoJSONファイルのURL、オプション集合の順に指定します。オプション集合には、シーンのロードが終了した時のコールバック関数、ポリゴンの色、指定高度優先可否、指定高度をの順に指定します。このサンプルコードでは、GeoJSONデータのプロパティに応じた内容にするため、ポリゴンの色には、プロパティの値に応じた色が取得できるメソッドを設定しています。なお、プロパティの値に応じた色が取得できるメソッドの詳細は後述します。 また、読み込むGeoJSONファイルのURLは、httpもしくはhttpsでアクセスできるURLを指定します。 最後に、84行目のload関数を呼び出すことでシーンの読み込みができます。 なお、GeoJSONLoaderクラスは、GeoJSONデータのfeatureごとのロード時にコールバック関数が呼ばれ、GeoJSONデータの任意のproperty属性にアクセスすることができます。また、propertyに書かれているkeyの値をコールバック関数内で取得することも可能です。 

76: // GeoJSONの読み込み
77: LoadGeoJson() {
78:     var loader = new mapray.GeoJSONLoader( this._viewer.scene, "./data/tokyo_population.json", {
79:         onLoad: (loader, isSuccess) => { console.log("success load geojson") },
80:         getFillColor: d => d.properties ? this.GetFillColor(d.properties) : [1.0, 0.0, 1.0, 0.5],
81:         getAltitude: () => 2000
82:     } );
83: 
84:     loader.load();
85: }

3.7. プロパティの値に応じた色の変更

88～110行目がプロパティの値に応じた色が取得できるメソッドです。読み込んだGeoJSONデータのプロパティを参照して、適切な色を返します。 このサンプルコードでは、人口密度が高くなるにつれて、赤色から黄色になるように設定しています。 

 87: // プロパティから線の色を決定し返す
 88: GetFillColor( properties={} ) {
 89:     var RGBArray = [0.0, 0.0, 0.0, 0.5];
 90: 
 91:     if( properties.POP2010 ) {
 92:         var pop2010 = properties.POP2010;
 93: 
 94:         // 人口密度が一定数以上かどうかで色を決定する
 95:         if ( pop2010 > 20000 ) {
 96:             RGBArray = [1.0, 0.0, 0.0, 0.5];
 97:         }
 98:         else if ( pop2010 > 15000 ) {
 99:             RGBArray = [1.0, 0.3, 0.0, 0.5];
100:         }
101:         else if ( pop2010 > 10000 ) {
102:             RGBArray = [1.0, 0.6, 0.0, 0.5];
103:         }
104:         else {
105:             RGBArray = [1.0, 1.0, 0.0, 0.5];
106:         }
107:     }
108: 
109:     return RGBArray;
110: }

3.8. 透過率の変更

112～121行目が透過率変更メソッドです。114行目で透過率を変更するコンボボックスから値を取得します。そして、118行目のviewer.sceneのgetEntity関数でポリゴンのエンティティを順に取得し、119行目で取得した値を指定することで、ポリゴンの透過率を変更します。このサンプルコードでは、GeoJSONデータはポリゴンのエンティティとなり、インデックスは1番目以降となるため、getEntity関数には1以降のすべてのエンティティを指定します。 

112: ChangeOpacity() {
113:     // プルダウンの値取得
114:     var opacity_Value = parseFloat(document.getElementById("OpacityPullDown").value);
115: 
116:     // プルダウンの値を設定
117:     for ( var i = 1; i < this.viewer.scene.num_entities; ++i ) {
118:         var polygonEntity = this.viewer.scene.getEntity(i);
119:         polygonEntity.setOpacity(opacity_Value);
120:     }
121: }

3.9. ポリゴンのプロパティを参照して対象データ表示するクラスのインスタンス生成

125～127行目の関数は、引数として渡されるブロックのidを利用して、ポリゴンのプロパティを参照して対象データ表示するクラスのインスタンスを生成します。 

125: function CreateReadGeoJsonPolygonPropertiesInstance(container) {
126:     read_GeoJson_polygon_properties = new ReadGeoJsonPolygonProperties(container);
127: }

3.10. 透過率変更時のイベント

129～131行目の関数は、透過率変更時に呼ばれ、ポリゴンのプロパティを参照して対象データ表示するクラスの透過率変更メソッドを呼び出します。 

129: function OpacityValueChanged() {
130:     read_GeoJson_polygon_properties.ChangeOpacity()
131: }

4. 出力イメージ

このサンプルコードで初期状態（透過率:0.5）の出力イメージは下図のようになります。 ReadGeoJsonPolygonProperties.png

初期状態から、透過率を1.0にした時の出力イメージは下図のようになります。 ReadGeoJsonPolygonProperties_opacity.png

5. クランプ機能を用いたサンプル

ポリゴンのGeoJSONデータを読み込む際に、クランプ機能（ポリゴンを地表面上に作図する）を用いたサンプルコードが、 ReadGeoJsonPolygonPropertiesVer2.html 及び、 ReadGeoJsonPolygonPropertiesVer2.js です。 シーンファイル（ climatological_normal.json ）は、国土交通省から取得した実データのため、詳細説明は割愛します。 このサンプルコードでは、富士山近郊の気温の平年値に応じて、ポリゴンの色をグラデーション表示し、クランプ機能を用いて、ポリゴンを地表面上に表示します。

5.1. クランプ機能を用いたシーンのロード

クランプ機能を用いるには、シーンのロードメソッド内で、getAltitudeModeにmapray.AltitudeMode.CLAMPを設定します。下記に示すコードの6行目にあたる部分になります。 この設定を行うことで、読みこんだGeoJSONファイルを表示する際に、全てのポリゴンが地表面上に沿った形で表示されます。 

 5: // GeoJSONの読み込み
 6: LoadGeoJson() {
 7:     var loader = new mapray.GeoJSONLoader( this._viewer.scene, "./data/climatological_normal.json", {
 8:         onLoad: ( loader, isSuccess ) => { console.log( "success load geojson" ) },
 9:         getFillColor: d => d.properties ? this.GetFillColor( d.properties ) : [1.0, 0.0, 1.0, 0.5],
10:         getAltitudeMode: () => mapray.AltitudeMode.CLAMP
11:     } );
12: 
13:     loader.load();
14: }

6. 出力イメージ

このサンプルコードの出力イメージは下図のようになります。 ReadGeoJsonPolygonPropertiesVer2.png