4.1 ベース地図の変更

ベース地図を変更する方法を説明します。

1. サンプルコード

ベース地図を変更する ChangeImageTile.html 及び ChangeImageTile.js のサンプルコードです。このサンプルコードでは、ベース地図を変更するコンボボックスの状態によって、ベース地図を国土地理院の標準地図と国土地理院の写真に切り替えます。

1.1. ChangeImageTile.html

 1: <!DOCTYPE html>
 2: <html>
 3:     <head>
 4:         <meta charset="utf-8">
 5:         <title>ChangeImageTileSample</title>
 6:         <script src="https://resource.mapray.com/mapray-js/v0.9.4/mapray.min.js"></script>
 7:         <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
 8:         <script src="ChangeImageTile.js"></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% - 34px);
32:             }
33: 
34:             div#MapTileBox {
35:                 display: flex;
36:                 background-color: #E0E0E0;
37:                 height: 32px;
38:                 width: 150px;
39:                 border: inset 1px #000000;
40:                 align-items: center;
41:                 float:left;
42:             }
43:         </style>
44:     </head>
45: 
46:     <body onload="CreateViewerImageControlInstance('mapray-container');">
47:         <div id="mapray-container"></div>
48: 
49:         <div id="MapTileBox">
50:             <p>Map Tile</p>
51:             <select name="MapTilePullDown" id="MapTilePullDown" onchange="MapTileValueChanged()">
52:                 <option value="Photo">Photo</option>
53:                 <option value="std">Standard</option>
54:             </select>
55:         </div>
56:     </body>
57: </html>

1.2. ChangeImageTile.js

 1: var viewer_Image_Control;
 2: 
 3: class ViewerImageControl {
 4: 
 5:     constructor(container) {
 6:         // Access Tokenを設定
 7:         this.accessToken = "<your access token here>";
 8: 
 9:         this.container = container;
10: 
11:         // Viewerを作成する
12:         this.viewer = new mapray.Viewer(
13:             this.container, {
14:                 image_provider: this.createImageProvider(),
15:                 dem_provider: new mapray.CloudDemProvider(this.accessToken)
16:             }
17:         );
18: 
19:         this.SetCamera();
20:     }
21: 
22:     // 画像プロバイダを生成
23:     createImageProvider() {
24:         //UIのマップタイルを取得
25:         var map_Tile_Value = document.getElementById("MapTilePullDown").value;
26: 
27:         if (map_Tile_Value == "std") {
28:             // 国土地理院提供の標準地図タイルを設定
29:             return new mapray.StandardImageProvider("https://cyberjapandata.gsi.go.jp/xyz/std/", ".png", 256, 5, 18);
30:         } else {
31:             // 国土地理院提供の写真タイルを設定
32:             return new mapray.StandardImageProvider("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", ".jpg", 256, 2, 18);
33:         }
34:     }
35: 
36:     SetCamera() {
37:         // カメラ位置の設定
38: 
39:         // 球面座標系（経度、緯度、高度）で視点を設定。座標は皇居
40:         var home_pos = { longitude: 139.7528, latitude: 35.685175, height: 45000 };
41: 
42:         // 球面座標から地心直交座標へ変換
43:         var home_view_geoPoint = new mapray.GeoPoint( home_pos.longitude, home_pos.latitude, home_pos.height );
44:         var home_view_to_gocs = home_view_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
45: 
46:         // 視線方向を定義
47:         var cam_pos = mapray.GeoMath.createVector3([0, 0, 7000]);
48:         var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]);
49:         var cam_up = mapray.GeoMath.createVector3([0, 1, 0]);
50: 
51:         // ビュー変換行列を作成
52:         var view_to_home = mapray.GeoMath.createMatrix();
53:         mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, view_to_home);
54: 
55:         // カメラの位置と視線方向からカメラの姿勢を変更
56:         var view_to_gocs = this.viewer.camera.view_to_gocs;
57:         mapray.GeoMath.mul_AA(home_view_to_gocs, view_to_home, view_to_gocs);
58: 
59:         // カメラのnear、farの設定
60:         this.viewer.camera.near = 30;
61:         this.viewer.camera.far = 1000000;
62:     }
63: 
64:     ChangeMapTile() {
65:         // Viewerのインスタンスを破棄
66:         this.viewer.destroy();
67: 
68:         // Viewerを作成
69:         this.viewer = new mapray.Viewer(
70:             this.container, {
71:                 image_provider: this.createImageProvider(),
72:                 dem_provider: new mapray.CloudDemProvider(this.accessToken)
73:             }
74:         );
75: 
76:         this.SetCamera();
77:     }
78: 
79: }
80: 
81: function CreateViewerImageControlInstance(container) {
82:     viewer_Image_Control = new ViewerImageControl(container);
83: }
84: 
85: function MapTileValueChanged() {
86:     viewer_Image_Control.ChangeMapTile();
87: }

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

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

2.1. htmlの文字コード設定

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

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

2.2. タイトルの設定

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

5: <title>ChangeImageTileSample</title>

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

6～8行目で参照するJavaScript及びスタイルシートのパスを設定します。このサンプルコードでは、maprayのJavaScriptファイル、スタイルシート、ベース地図を変更するJavaScriptファイル（ ChangeImageTile.js ）を設定します。

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

2.4. スタイルの設定

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

html
body
select
p
div#mapray-container（地図表示部分）
div#MapTileBox（ベース地図変更コンボボックス表示部分）

 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% - 34px);
32:     }
33: 
34:     div#MapTileBox {
35:         display: flex;
36:         background-color: #E0E0E0;
37:         height: 32px;
38:         width: 150px;
39:         border: inset 1px #000000;
40:         align-items: center;
41:         float:left;
42:     }
43: </style>

2.5. loadイベントの設定

画面を表示する時に、ベース地図変更クラスを生成します。そのため、46行目でページの読み込み時に、ベース地図変更クラスのインスタンスを生成する関数（ CreateViewerImageControlInstance ）を呼ぶように設定します。ベース地図変更クラスのインスタンスを生成する関数は、JavaScriptのサンプルコードの詳細で説明します。

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

2.6. 表示する要素の記述

47～55行目で表示する要素を記述します。このサンプルコードでは、地図表示部分、ベース地図変更コンボボックス表示部分を記述します。ベース地図変更コンボボックス表示部分のブロックには、ベース地図を変更するコンボボックスを定義します。このサンプルコードでは、photo（写真表示）、Standard（標準地図表示）を設定します。また、コンボボックスが変更された時のイベント（onchange）に、コンボボックス表示時に呼び出す関数（MapTileValueChanged）を設定します。ベース地図の変更メソッドを呼び出す関数はJavaScriptのサンプルコードの詳細で説明します。また、地図表示部分の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。

47: <div id="mapray-container"></div>
48: 
49: <div id="MapTileBox">
50:     <p>Map Tile</p>
51:     <select name="MapTilePullDown" id="MapTilePullDown" onchange="MapTileValueChanged()">
52:         <option value="Photo">Photo</option>
53:         <option value="std">Standard</option>
54:     </select>
55: </div>

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

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

3.1. クラスとグローバル変数

3～79行目でベース地図を変更するクラスを定義します。クラス内の各メソッドの詳細は以降で解説します。また、1行目でベース地図を変更するクラスのグローバル変数を定義します。

var viewer_Image_Control;

class ViewerImageControl {

    //中略

}

3.2. コンストラクタ

5～20行目がベース地図を変更するクラスのコンストラクタです。引数として渡されるブロックのidに対して、mapray.Viewerを作成し、カメラの位置・向きの設定メソッドを呼び出します。mapray.Viewerのベース地図の画像プロバイダは、画像プロバイダの作成メソッドで取得した画像プロバイダを設定します。 mapray.Viewerの作成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。

 5: constructor(container) {
 6:     // Access Tokenを設定
 7:     this.accessToken = "<your access token here>";
 8: 
 9:     this.container = container;
10: 
11:     // Viewerを作成する
12:     this.viewer = new mapray.Viewer(
13:         this.container, {
14:             image_provider: this.createImageProvider(),
15:             dem_provider: new mapray.CloudDemProvider(this.accessToken)
16:         }
17:     );
18: 
19:     this.SetCamera();
20: }

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

23～34行目が画像プロバイダの作成メソッドです。ベース地図を変更するコンボボックスの値に応じて、標準地図か写真の画像プロバイダを返します。画像プロバイダの作成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。

22: // 画像プロバイダを生成
23: createImageProvider() {
24:     // UIのマップタイルを取得
25:     var map_Tile_Value = document.getElementById("MapTilePullDown").value;
26: 
27:     if (map_Tile_Value == "std") {
28:         // 国土地理院提供の標準地図タイルを設定
29:         return new mapray.StandardImageProvider("https://cyberjapandata.gsi.go.jp/xyz/std/", ".png", 256, 5, 18);
30:     }else{
31:         // 国土地理院提供の写真タイルを設定
32:         return new mapray.StandardImageProvider("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", ".jpg", 256, 2, 18);
33:     }
34: }

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

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

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

3.5. ベース地図の変更

64～77行目がベース地図の変更メソッドです。 mapray.Viewerに設定されているベース地図の画像プロバイダを変更するには、mapray.Viewerを破棄する必要があります。そのため、65行目でメンバのviewerをdestroy関数で破棄をしてから、mapray.Viewerの作成、カメラの位置・向きの設定をします。

64: ChangeMapTile() {
65:     // Viewerのインスタンスを破棄
66:     this.viewer.destroy();
67: 
68:     // Viewerを作成
69:     this.viewer = new mapray.Viewer(
70:         this.container, {
71:             image_provider: this.createImageProvider(),
72:             dem_provider: new mapray.CloudDemProvider(this.accessToken)
73:         }
74:     );
75: 
76:     this.SetCamera();
77: }

3.6. ベース地図変更クラスのインスタンス生成

81～83行目の関数は、引数として渡されるブロックのidを利用して、ベース地図変更クラスのインスタンスを生成します。

81: function CreateViewerImageControlInstance(container) {
82:     viewer_Image_Control = new ViewerImageControl(container);
83: }

3.7. ベース地図変更時のイベント

85～87行目の関数は、ベース地図変更時に呼ばれ、ベース地図変更クラスのベース地図変更メソッドを呼び出します。

85: function MapTileValueChanged() {
86:     viewer_Image_Control.ChangeMapTile();
87: }

4. 出力イメージ

このサンプルコードで、ベース地図にPhotoを指定した時の出力イメージは下図のようになります。

ベース地図にStandardを指定した時の出力イメージは下図のようになります。