6.1 文字の表示(SceneLoaderを使った表示)

mapray.SceneLoaderを使って文字を表示する方法を説明します。

1. サンプルコード

mapray.SceneLoaderを使って文字を表示する WriteStringWithSceneLoder.html のサンプルコードとシーンファイル（ font.json ）です。このサンプルコードでは、富士山頂上付近に「Mt.Fuji」と表示します。

1.1. WriteStringWithSceneLoder.html

 1: <!DOCTYPE html>
 2: <html>
 3:     <head>
 4:         <meta charset="UTF-8">
 5:         <title>WriteStringWithSceneLoderSample</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:         <style>
 9:             html, body {
10:                 height: 100%;
11:                 margin: 0;
12:             }
13: 
14:             div#mapray-container {
15:                 display: flex;
16:                 position: relative;
17:                 height: 100%;
18:             }
19:         </style>
20:     </head>
21: 
22:     <body>
23:         <div id="mapray-container"></div>
24:     </body>
25: </html>
26: 
27: <script>
28:     // Access Tokenを設定
29:     var accessToken = "<your access token here>";
30: 
31:     // Viewerを作成する
32:     viewer = new mapray.Viewer(
33:         "mapray-container", {
34:             image_provider: new mapray.StandardImageProvider( { url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", format: "jpg", min_level: 2, max_level: 18 } ),
35:             dem_provider: new mapray.CloudDemProvider(accessToken)
36:         }
37:     );
38: 
39:     // カメラ位置の設定
40: 
41:     // 球面座標系（経度、緯度、高度）で視点を設定。座標は富士山から10kmほど北西の場所
42:     var home_pos = { longitude: 138.678572, latitude: 35.434067, height: 4000 };
43: 
44:     // 球面座標から地心直交座標へ変換
45:     var home_view_geoPoint = new mapray.GeoPoint( home_pos.longitude, home_pos.latitude, home_pos.height );
46:     var home_view_to_gocs = home_view_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
47: 
48:     // 視線方向を定義
49:     var cam_pos = mapray.GeoMath.createVector3([-2300, 3600, 1000]);
50:     var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]);
51:     var cam_up = mapray.GeoMath.createVector3([0, 0, 1]);
52: 
53:     // ビュー変換行列を作成
54:     var view_to_home = mapray.GeoMath.createMatrix();
55:     mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, view_to_home);
56: 
57:     // カメラの位置と視線方向からカメラの姿勢を変更
58:     var view_to_gocs = viewer.camera.view_to_gocs;
59:     mapray.GeoMath.mul_AA(home_view_to_gocs, view_to_home, view_to_gocs);
60: 
61:     // カメラのnear、farの設定
62:     viewer.camera.near = 30;
63:     viewer.camera.far = 500000;
64: 
65:     var scene_File_URL = "./data/font.json";
66: 
67:     // シーンを読み込む
68:     var loader = new mapray.SceneLoader(viewer.scene, scene_File_URL);
69: 
70:     loader.load();
71: </script>

1.2. シーンファイル（font.json）

 1: {
 2:   "entity_list": [
 3:     {
 4:       "type": "text",
 5:       "entries": [
 6:         { "text": "Mt.Fuji",
 7:           "position": [138.730647, 35.362773, 4000.0],
 8:           "font_size": 25,
 9:           "color": [1, 0, 0] }
10:       ],
11:       "font_size": 20
12:     }
13:   ]
14: }

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

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

2.1. htmlの記述

1～25行目でhtmlを記述します。ヘルプページ『緯度経度によるカメラ位置の指定』で示したhtmlファイルからタイトルのみを変更します。詳細はヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。

 1: <!DOCTYPE html>
 2: <html>
 3:     <head>
 4:         <meta charset="UTF-8">
 5:         <title>WriteStringWithSceneLoderSample</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:         <style>
 9:             html, body {
10:                 height: 100%;
11:                 margin: 0;
12:             }
13: 
14:             div#mapray-container {
15:                 display: flex;
16:                 position: relative;
17:                 height: 100%;
18:             }
19:         </style>
20:     </head>
21: 
22:     <body>
23:         <div id="mapray-container"></div>
24:     </body>
25: </html>

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

29～63行目でMapray.Viewerクラスを作成し、カメラ位置・向きを設定します。詳細はヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。

28: // Access Tokenを設定
29: var accessToken = "<your access token here>";
30: 
31: // Viewerを作成する
32: viewer = new mapray.Viewer(
33:     "mapray-container", {
34:         image_provider: new mapray.StandardImageProvider( { url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", format: "jpg", min_level: 2, max_level: 18 } ),
35:         dem_provider: new mapray.CloudDemProvider(accessToken)
36:     }
37: );
38: 
39: // カメラ位置の設定
40: 
41: // 球面座標系（経度、緯度、高度）で視点を設定。座標は富士山から10kmほど北西の場所
42: var home_pos = { longitude: 138.678572, latitude: 35.434067, height: 4000 };
43: 
44: // 球面座標から地心直交座標へ変換
45: var home_view_geoPoint = new mapray.GeoPoint( home_pos.longitude, home_pos.latitude, home_pos.height );
46: var home_view_to_gocs = home_view_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
47: 
48: // 視線方向を定義
49: var cam_pos = mapray.GeoMath.createVector3([-2300, 3600, 1000]);
50: var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]);
51: var cam_up = mapray.GeoMath.createVector3([0, 0, 1]);
52: 
53: // ビュー変換行列を作成
54: var view_to_home = mapray.GeoMath.createMatrix();
55: mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, view_to_home);
56: 
57: // カメラの位置と視線方向からカメラの姿勢を変更
58: var view_to_gocs = viewer.camera.view_to_gocs;
59: mapray.GeoMath.mul_AA(home_view_to_gocs, view_to_home, view_to_gocs);
60: 
61: // カメラのnear、farの設定
62: viewer.camera.near = 30;
63: viewer.camera.far = 500000;

2.3. シーンファイルの読み込み

68行目でmapray.SceneLoaderのインスタンス生成時にシーンを指定し、70行目で、load関数を呼び出すことで、シーンファイルを読み込みます。 SceneLoaderの引数は、シーンファイルのエンティティを追加するシーン、読み込むシーンファイルのURLの順に指定します。このサンプルコードでは、viewerのシーン、65行目で設定したURLの順に指定します。読み込むシーンのURLはhttpもしくはhttpsでアクセスできるURLを指定します。

65: var scene_File_URL = "./data/font.json";
66: 
67: // シーンを読み込む
68: var loader = new mapray.SceneLoader(viewer.scene, scene_File_URL);
69: 
70: loader.load();

3. シーンファイルの詳細

シーンファイルの詳細を以下で解説します。なお、シーンファイルはJSON形式で記述します。

3.1. エンティティの設定

2行目でentity_listという名称でエンティティを定義し、その中にエンティティの詳細を定義します。4行目のtypeという名称は、エンティティの種類を表し、それにtextを指定することで、文字のエンティティを表現します。

{
  "entity_list": [
    {
      "type": "text",

      中略

    }
  ]
}

3.2. 文字の情報の設定

5～11行目で文字の情報を記述します。文字の情報は、個々の文字情報（entries）、全体のフォントサイズ（font_size）があり、個々の文字情報の中には、表示する文字（text）、位置（position）、フォントサイズ（font_size）、色（color）があります。このシーンファイルでは、個々の文字情報として、表示する文字にはMt.Fuji、位置には富士山頂上付近の緯度・経度・高度、フォントサイズには25、色に赤を、それぞれ指定します。また、全体のフォントサイズには20を指定します。

 5: "entries": [
 6:   { "text": "Mt.Fuji",
 7:     "position": [138.730647, 35.362773, 4000.0],
 8:     "font_size": 25,
 9:     "color": [1, 0, 0] }
10: ],
11: "font_size": 20

4. 出力イメージ

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