9.1 GeoJSONデータの表示(GeoJSONLoaderを使った表示)
mapray.GeoJSONLoaderを使ってGeoJSONデータを表示する方法を説明します。
1. サンプルコード
mapray.GeoJSONLoaderを使ってGeoJSONデータを表示する LoadGeoJSON.html 及び、 LoadGeoJSON.js のサンプルコードとシーンファイル（ RouteLine.json ）です。 このサンプルコードでは、新大阪駅と京都駅間の新幹線の経路を表示します。
1.1. LoadGeoJSON.html
1: <!DOCTYPE html> 2: <html> 3: <head> 4: <meta charset="utf-8"> 5: <title>LoadGeoJSONSample</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="LoadGeoJSON.js"></script> 9: <style> 10: html, body { 11: height: 100%; 12: margin: 0; 13: } 14: 15: div#mapray-container { 16: display: flex; 17: position: relative; 18: height: 100%; 19: } 20: </style> 21: </head> 22: 23: <body onload="new LoadGeoJSON('mapray-container');"> 24: <div id="mapray-container"></div> 25: </body> 26: </html>
1.2. LoadGeoJSON.js
1: class LoadGeoJSON extends mapray.RenderCallback { 2: constructor(container) { 3: super(); 4: 5: // Access Tokenを設定 6: var accessToken = "<your access token here>"; 7: 8: // Viewerを作成する 9: new mapray.Viewer(container, { 10: render_callback: this, 11: image_provider: this.createImageProvider(), 12: dem_provider: new mapray.CloudDemProvider(accessToken) 13: }); 14: 15: this.SetCamera(); 16: 17: this.AddText(); 18: 19: this.LoadScene(); 20: } 21: 22: // 画像プロバイダを生成 23: createImageProvider() { 24: return new mapray.StandardImageProvider( { url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", format: "jpg", min_level: 2, max_level: 18 } ); 25: } 26: 27: // カメラ位置の設定 28: SetCamera() { 29: // 球面座標系（経度、緯度、高度）で視点を設定。座標は高槻市付近 30: var home_pos = { longitude: 135.642749, latitude: 34.849955, height: 500.0 }; 31: 32: // 球面座標から地心直交座標へ変換 33: var home_view_geoPoint = new mapray.GeoPoint( home_pos.longitude, home_pos.latitude, home_pos.height ); 34: var home_view_to_gocs = home_view_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() ); 35: 36: // 視線方向を定義 37: var cam_pos = mapray.GeoMath.createVector3([0, 0, 70000]); 38: var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]); 39: var cam_up = mapray.GeoMath.createVector3([0, 1, 0]); 40: 41: // ビュー変換行列を作成 42: var view_to_home = mapray.GeoMath.createMatrix(); 43: mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, view_to_home); 44: 45: // カメラの位置と視線方向からカメラの姿勢を変更 46: var view_to_gocs = this.viewer.camera.view_to_gocs; 47: mapray.GeoMath.mul_AA(home_view_to_gocs, view_to_home, view_to_gocs); 48: 49: // カメラのnear、farの設定 50: this.viewer.camera.near = 30; 51: this.viewer.camera.far = 500000; 52: } 53: 54: // テキストの表示 55: AddText() { 56: //文字のエンティティを作成 57: var font_Entity = new mapray.TextEntity(this.viewer.scene); 58: 59: //新大阪駅付近 60: var fast_Font_Point = new mapray.GeoPoint(135.501101, 34.722939, 500); 61: 62: font_Entity.addText("Shin-Osaka", fast_Font_Point, { color: [0, 0, 0], font_size: 25 }); 63: 64: //京都駅付近 65: var second_Font_Point = new mapray.GeoPoint(135.778568, 34.976024, 500); 66: 67: font_Entity.addText("Kyoto", second_Font_Point, { color: [0, 0, 0], font_size: 25 }); 68: 69: //エンティティをシーンに追加 70: this.viewer.scene.addEntity(font_Entity); 71: } 72: 73: // シーンの読み込み 74: LoadScene() { 75: var loader = new mapray.GeoJSONLoader( this._viewer.scene, "./data/RouteLine.json", { 76: onLoad: (loader, isSuccess) => { console.log("success load geojson") }, 77: getLineColor: d => d.properties && d.properties.color ? d.properties.color : [0, 0, 255, 1.0], 78: getLineWidth: d => d.properties && d.properties.width ? d.properties.width : 3, 79: getAltitude: () => 100 80: } ); 81: 82: loader.load(); 83: } 84: 85: }
1.3. シーンファイル（RouteLine.json）
1: { 2: "type": "FeatureCollection", 3: "features": [ 4: { 5: "type": "Feature", 6: "properties": {}, 7: "geometry": { 8: "type": "MultiLineString", 9: "coordinates": [ 10: [ 11: [ 12: 135.500043, 13: 34.733513 14: ], 15: [ 16: 135.539592, 17: 34.749465 18: ], 19: [ 20: 135.606446, 21: 34.805161 22: ], 23: [ 24: 135.649862, 25: 34.860777 26: ], 27: [ 28: 135.712598, 29: 34.917862 30: ], 31: [ 32: 135.727113, 33: 34.978146 34: ], 35: [ 36: 135.758771, 37: 34.985886 38: ] 39: ] 40: ] 41: } 42: } 43: ] 44: }
2. htmlのサンプルコードの詳細
htmlのサンプルコードの詳細を以下で解説します。
2.1. htmlの文字コード設定
4行目でhtmlの文字コードを設定します。このサンプルコードでは、utf-8を設定します。
4: <meta charset="UTF-8">
2.2. タイトルの設定
5行目でタイトルを設定します。このサンプルコードでは、LoadGeoJSONSampleを設定します。
5: <title>LoadGeoJSONSample</title>
2.3. JavaScriptファイルのパス設定
6～8行目で参照するJavaScript及びスタイルシートのパスを設定します。このサンプルコードでは、maprayのJavaScriptファイル、スタイルシート、モデルのシーンを読み込むJavaScriptファイル（ LoadGeoJSON.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="LoadGeoJSON.js"></script>
2.4. スタイルの設定
9～20行目で表示する要素のスタイルを設定します。 スタイルの詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。
9: <style> 10: html, body { 11: height: 100%; 12: margin: 0; 13: } 14: 15: div#mapray-container { 16: display: flex; 17: position: relative; 18: height: 100%; 19: } 20: </style>
2.5. loadイベントの処理
画面を表示するときに、GeoJSONデータ読み込みクラスを生成します。そのため、23行目でページの読み込み時に、地図表示部分のブロックのidからGeoJSONデータ読み込みクラスのインスタンスを生成します。 GeoJSONデータ読み込みクラスはJavaScriptのサンプルコードの詳細で説明します。
23: <body onload="new LoadGeoJSON('mapray-container');">
2.6. 地図表示部分の指定
24行目で地図表示部分のブロックを記述します。 詳細はヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。
24: <div id="mapray-container"></div>
3. JavaScriptのサンプルコードの詳細
JavaScriptのサンプルコードの詳細を以下で解説します。
3.1. クラスの説明
1～85行目で、GeoJSONデータを読み込み、表示するクラスを定義します。クラス内の各メソッドの詳細は以降で解説します。 GeoJSONデータを読み込み、表示するクラスは、mapray.RenderCallbackクラスを継承します。
class LoadGeoJSON extends mapray.RenderCallback { //中略 }
3.2. コンストラクタ
2～20行目がGeoJSONデータを読み込み、表示するクラスのコンストラクタです。引数として渡されるブロックのidに対して、mapray.Viewerを作成し、カメラの位置・向きの設定メソッドを呼び出します。その後、文字の表示メソッドとシーンのロードメソッドを呼び出します。viewerを作成する際の画像プロバイダは画像プロバイダの生成メソッドから取得します。 mapray.Viewerの作成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。
2: constructor(container) { 3: super(); 4: 5: // Access Tokenを設定 6: var accessToken = "<your access token here>"; 7: 8: // Viewerを作成する 9: new mapray.Viewer(container, { 10: render_callback: this, 11: image_provider: this.createImageProvider(), 12: dem_provider: new mapray.CloudDemProvider(accessToken) 13: }); 14: 15: this.SetCamera(); 16: 17: this.AddText(); 18: 19: this.LoadScene(); 20: }
3.3. 画像プロバイダの生成
23～25行目が画像プロバイダの生成メソッドです。生成した画像プロバイダを返します。 画像プロバイダの生成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。
22: // 画像プロバイダを生成 23: createImageProvider() { 24: return new mapray.StandardImageProvider( { url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", format: "jpg", min_level: 2, max_level: 18 } ); 25: }
3.4. カメラの位置・向きの設定
28～52行目がカメラの位置・向きの設定メソッドです。 カメラの位置・向きの設定は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。
27: // カメラ位置の設定 28: SetCamera() { 29: // 球面座標系（経度、緯度、高度）で視点を設定。座標は高槻市付近 30: var home_pos = { longitude: 135.642749, latitude: 34.849955, height: 500.0 }; 31: 32: // 球面座標から地心直交座標へ変換 33: var home_view_geoPoint = new mapray.GeoPoint( home_pos.longitude, home_pos.latitude, home_pos.height ); 34: var home_view_to_gocs = home_view_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() ); 35: 36: // 視線方向を定義 37: var cam_pos = mapray.GeoMath.createVector3([0, 0, 70000]); 38: var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]); 39: var cam_up = mapray.GeoMath.createVector3([0, 1, 0]); 40: 41: // ビュー変換行列を作成 42: var view_to_home = mapray.GeoMath.createMatrix(); 43: mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, view_to_home); 44: 45: // カメラの位置と視線方向からカメラの姿勢を変更 46: var view_to_gocs = this.viewer.camera.view_to_gocs; 47: mapray.GeoMath.mul_AA(home_view_to_gocs, view_to_home, view_to_gocs); 48: 49: // カメラのnear、farの設定 50: this.viewer.camera.near = 30; 51: this.viewer.camera.far = 500000; 52: }
3.5. 文字の表示
55～71行目で、それぞれの駅名を表示するための文字をmapray.Viewerのシーンに追加します。 文字の表示方法の詳細は、ヘルプページ『文字の表示（addTextを使った表示）』を参照してください。
54: // テキストの表示 55: AddText() { 56: //文字のエンティティを作成 57: var font_Entity = new mapray.TextEntity(this.viewer.scene); 58: 59: //新大阪駅付近 60: var fast_Font_Point = new mapray.GeoPoint(135.501101, 34.722939, 500); 61: 62: font_Entity.addText("Shin-Osaka", fast_Font_Point, { color: [0, 0, 0], font_size: 25 }); 63: 64: //京都駅付近 65: var second_Font_Point = new mapray.GeoPoint(135.778568, 34.976024, 500); 66: 67: font_Entity.addText("Kyoto", second_Font_Point, { color: [0, 0, 0], font_size: 25 }); 68: 69: //エンティティをシーンに追加 70: this.viewer.scene.addEntity(font_Entity); 71: }
3.6. シーンのロード
74～83行目がシーンのロードメソッドです。mapray.GeoJSONLoaderでシーンを読み込みます。 GeoJSONLoaderクラス生成時の引数には、GeoJSONファイルのエンティティを追加するシーン、読み込むGeoJSONファイルのURL、オプション集合の順に指定します。このサンプルコードでは、viewerクラスのシーン、GeoJSONファイルのURL、オプション集合の順に指定します。オプション集合には、シーンのロードが終了した時のコールバック関数、線の色、線の幅、指定高度優先可否、指定高度をの順に指定します。読み込むGeoJSONファイルのURLは、httpもしくはhttpsでアクセスできるURLを指定します。最後に、82行目のload関数を呼び出すことでシーンの読み込みができます。 なお、GeoJSONLoaderクラスは、GeoJSONデータのfeatureごとのロード時にコールバック関数が呼ばれ、GeoJSONデータの任意のproperty属性にアクセスすることができます。また、propertyに書かれているkeyの値をコールバック関数内で取得することも可能です。
73: // シーンの読み込み 74: LoadScene() { 75: var loader = new mapray.GeoJSONLoader( this._viewer.scene, "./data/RouteLine.json", { 76: onLoad: (loader, isSuccess) => { console.log("success load geojson") }, 77: getLineColor: d => d.properties && d.properties.color ? d.properties.color : [0, 0, 255, 1.0], 78: getLineWidth: d => d.properties && d.properties.width ? d.properties.width : 3, 79: getAltitude: () => 100 80: } ); 81: 82: loader.load(); 83: }
4. GeoJSONファイルの詳細
GeoJSONファイルの詳細を以下で解説します。なお、GeoJSONファイルはJSON形式で記述します。 GeoJsonファイルの詳細なフォーマットは、GeoJSONの公式サイトを参照ください。
4.1. FeatureCollectionの設定
2行目でFeatureCollectionという名称でフィーチャーコレクションオブジェクトを定義し、その中の5行目でFeatureという名称でフィーチャーオブジェクトを定義します。
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
中略
}
}
]
}
4.2. ラインのデータ
8行目でMultiLineStringという名称でジオメトリオブジェクトを定義します。9行目のcoordinatesから座標配列を定義します。
8: "type": "MultiLineString", 9: "coordinates": [ 10: [ 11: [ 12: 135.500043, 13: 34.733513 14: ], 15: [ 16: 135.539592, 17: 34.749465 18: ], 19: [ 20: 135.606446, 21: 34.805161 22: ], 23: [ 24: 135.649862, 25: 34.860777 26: ], 27: [ 28: 135.712598, 29: 34.917862 30: ], 31: [ 32: 135.727113, 33: 34.978146 34: ], 35: [ 36: 135.758771, 37: 34.985886 38: ] 39: ] 40: ]
5. 出力イメージ
このサンプルコードの出力イメージは下図のようになります。
