6.3 文字のフォーマットの変更

文字のフォーマットを変更する方法を説明します。

1. サンプルコード

文字のフォーマットを変更する ChangeFontFormat.html 及び ChangeFontFormat.js のサンプルコードです。このサンプルコードでは、ユーザインタフェースを介して、富士山頂上付近の「Mt.Fuji」の文字フォーマットを変更します。変更できる文字フォーマットはスタイル、太さ、大きさ、色、フォントファミリーです。スタイルは通常、イタリック、斜体に、太さは通常、太いに、大きさは9、14、18、22、26、32に、フォントファミリーはarial、Courier、Times New Roman、vardanaにそれぞれ変更できます。また、色はカラーピッカーから変更できます。

1.1. ChangeFontFormat.html

  1: <!DOCTYPE html>
  2: <html>
  3:     <head>
  4:         <meta charset="utf-8">
  5:         <title>ChangeFontFormatSample</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="ChangeFontFormat.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:                 margin-left:5px;
 25:                 font-size:13px;
 26:             }
 27: 
 28:             input{
 29:                 margin-left:10px;
 30:             }
 31: 
 32:             div#mapray-container {
 33:                 display: flex;
 34:                 position: relative;
 35:                 height: calc(100% - 34px);
 36:             }
 37: 
 38:             div#FontStyleBox{
 39:                 display: flex;
 40:                 background-color:#E0E0E0;
 41:                 height: 32px;
 42:                 width: 155px;
 43:                 float:left;
 44:                 border:inset 1px #000000;
 45:                 align-items:center;
 46:             }
 47: 
 48:             div#FontWeightBox{
 49:                 display: flex;
 50:                 background-color:#E0E0E0;
 51:                 height: 32px;
 52:                 width: 185px;
 53:                 float:left;
 54:                 border:inset 1px #000000;
 55:                 align-items:center;
 56:             }
 57: 
 58: 
 59:             div#FontSizeBox{
 60:                 display: flex;
 61:                 background-color:#E0E0E0;
 62:                 height: 32px;
 63:                 width: 125px;
 64:                 float:left;
 65:                 border:inset 1px #000000;
 66:                 align-items:center;
 67:             }
 68: 
 69:             div#FontColorBox{
 70:                 display: flex;
 71:                 background-color:#E0E0E0;
 72:                 height: 32px;
 73:                 width: 145px;
 74:                 float:left;
 75:                 border:inset 1px #000000;
 76:                 align-items:center;
 77:             }
 78: 
 79:             div#FontFamilyBox{
 80:                 display: flex;
 81:                 background-color:#E0E0E0;
 82:                 height: 32px;
 83:                 width: 230px;
 84:                 float:left;
 85:                 border:inset 1px #000000;
 86:                 align-items:center;
 87:             }
 88:         </style>
 89:     </head>
 90: 
 91:     <body onload="CreateChangeFontStyleInstance('mapray-container');">
 92:         <div id="mapray-container"></div>
 93: 
 94:         <div id="FontStyleBox">
 95:             <p>Font Style</p>
 96:             <select name="FontStylePullDown" id="FontStylePullDown" onchange="FontStyleValueChanged()">
 97:                 <option value="normal">normal</option>
 98:                 <option value="italic">italic</option>
 99:                 <option value="oblique">oblique</option>
100:             </select>
101:         </div>
102: 
103:         <div id="FontWeightBox">
104:             <p>Font Thickness</p>
105:             <select name="FontWeightPullDown" id="FontWeightPullDown" onchange="FontWeightValueChanged()">
106:                 <option value="normal">normal</option>
107:                 <option value="bold">bold</option>
108:             </select>
109:         </div>
110: 
111:         <div id="FontSizeBox">
112:             <p>Font Size</p>
113:             <select name="FontSizePullDown" id="FontSizePullDown" onchange="FontSizeValueChanged()">
114:                 <option value=32>32</option>
115:                 <option value=26>26</option>
116:                 <option value=22>22</option>
117:                 <option value=18>18</option>
118:                 <option value=14>14</option>
119:                 <option value=9>9</option>
120:             </select>
121:         </div>
122: 
123:         <div id="FontColorBox">
124:             <p>Font Color</p>
125:             <input type="color" id="FontColorPallet" name="FontColorPallet" value="#000000" onchange="FontColorValueChanged()">
126:         </div>
127: 
128:         <div id="FontFamilyBox">
129:             <p>Font Family</p>
130:             <select name="FontFamilyPullDown" id="FontFamilyPullDown" onchange="FontFamilyValueChanged()">
131:                 <option value="arial" style="font-family:'arial'">arial</option>
132:                 <option value="Courier" style="font-family:'Courier'">Courier</option>
133:                 <option value="Times New Roman" style="font-family:Times New Roman">Times New Roman</option>
134:                 <option value="vardana" style="font-family:vardana">vardana</option>
135:             </select>
136:         </div>
137:     </body>
138: </html>

1.2. ChangeFontFormat.js

  1: var change_Font_Format;
  2: 
  3: class ChangeFontFormat {
  4: 
  5:     constructor(container) {
  6:         // Access Tokenを設定
  7:         var accessToken = "<your access token here>";
  8: 
  9:         // Viewerを作成する
 10:         this.viewer = new mapray.Viewer(
 11:             container, {
 12:                 image_provider: this.createImageProvider(),
 13:                 dem_provider: new mapray.CloudDemProvider(accessToken)
 14:             }
 15:         );
 16: 
 17:         this.SetCamera();
 18: 
 19:         this.WriteUIFormatStr();
 20:     }
 21: 
 22:     WriteUIFormatStr() {
 23:         // 文字のエンティティを作成
 24:         var entity = new mapray.TextEntity(this.viewer.scene);
 25: 
 26:         // 座標は富士山山頂付近
 27:         var font_position = { longitude: 138.730647, latitude: 35.362773, height: 4000 };
 28: 
 29:         // GeoPointクラスを生成して、テキストを追加
 30:         var font_geopoint = new mapray.GeoPoint( font_position.longitude, font_position.latitude, font_position.height );
 31:         entity.addText( "Mt.Fuji", font_geopoint);
 32: 
 33:         // プルダウンの値取得
 34:         var font_Style_Value = document.getElementById("FontStylePullDown").value;
 35:         var font_Weight_Value = document.getElementById("FontWeightPullDown").value;
 36:         var font_Size_Value = parseFloat(document.getElementById("FontSizePullDown").value);
 37:         var font_ColorChord = document.getElementById("FontColorPallet").value;
 38:         var font_Family_Value = document.getElementById("FontFamilyPullDown").value;
 39: 
 40:         // ColorChordをRBGに変換
 41:         var RGBArray = this.convertColorChordToRGB(font_ColorChord);
 42: 
 43:         // プルダウンの値を設定
 44:         entity.setFontStyle(font_Style_Value);
 45:         entity.setFontWeight(font_Weight_Value);
 46:         entity.setFontSize(font_Size_Value);
 47:         entity.setColor(RGBArray);
 48:         entity.setFontFamily(font_Family_Value);
 49: 
 50:         // エンティティをシーンに追加
 51:         this.viewer.scene.addEntity(entity);
 52:     }
 53: 
 54:     // 画像プロバイダを生成
 55:     createImageProvider() {
 56:         // 国土地理院提供の汎用的な地図タイルを設定
 57:         return new mapray.StandardImageProvider( { url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", format: "jpg", min_level: 2, max_level: 18 } );
 58:     }
 59: 
 60:     SetCamera() {
 61:         // カメラ位置の設定
 62: 
 63:         // 球面座標系（経度、緯度、高度）で視点を設定。富士山より５kmほど南の場所
 64:         var home_pos = { longitude: 138.736758, latitude: 35.359326, height: 4000 };
 65: 
 66:         // 球面座標から地心直交座標へ変換
 67:         var home_view_geoPoint = new mapray.GeoPoint( home_pos.longitude, home_pos.latitude, home_pos.height );
 68:         var home_view_to_gocs = home_view_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
 69: 
 70:         // 視線方向を定義
 71:         var cam_pos = mapray.GeoMath.createVector3([3000, -2600, 1500]);
 72:         var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]);
 73:         var cam_up = mapray.GeoMath.createVector3([0, 0, 1]);
 74: 
 75:         // ビュー変換行列を作成
 76:         var view_to_home = mapray.GeoMath.createMatrix();
 77:         mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, view_to_home);
 78: 
 79:         // カメラの位置と視線方向からカメラの姿勢を変更
 80:         var view_to_gocs = this.viewer.camera.view_to_gocs;
 81:         mapray.GeoMath.mul_AA(home_view_to_gocs, view_to_home, view_to_gocs);
 82: 
 83:         // カメラのnear、farの設定
 84:         this.viewer.camera.near = 30;
 85:         this.viewer.camera.far = 500000;
 86:     }
 87: 
 88:     ChangeFontStyle() {
 89:         // プルダウンの値取得
 90:         var font_Style_Value = document.getElementById("FontStylePullDown").value;
 91: 
 92:         // プルダウンの値を設定
 93:         var textEntity = this.viewer.scene.getEntity(0);
 94:         textEntity.setFontStyle(font_Style_Value);
 95:     }
 96: 
 97:     ChangeFontWeight() {
 98:         // プルダウンの値取得
 99:         var font_Weight_Value = document.getElementById("FontWeightPullDown").value;
100: 
101:         // プルダウンの値を設定
102:         var textEntity = this.viewer.scene.getEntity(0);
103:         textEntity.setFontWeight(font_Weight_Value);
104:     }
105: 
106:     ChangeFontSize() {
107:         // プルダウンの値取得
108:         var font_Size_Value = parseFloat(document.getElementById("FontSizePullDown").value);
109: 
110:         // プルダウンの値を設定
111:         var textEntity = this.viewer.scene.getEntity(0);
112:         textEntity.setFontSize(font_Size_Value);
113:     }
114: 
115:     ChangeFontColor() {
116:         // プルダウンの値取得
117:         var font_ColorChord = document.getElementById("FontColorPallet").value;
118: 
119:         // ColorChordをRBGに変換
120:         var RGBArray = this.convertColorChordToRGB(font_ColorChord);
121: 
122:         // プルダウンの値を設定
123:         var textEntity = this.viewer.scene.getEntity(0);
124:         textEntity.setColor(RGBArray);
125:     }
126: 
127:     ChangeFontFamily() {
128:         // プルダウンの値取得
129:         var font_Family_Value = document.getElementById("FontFamilyPullDown").value;
130: 
131:         // プルダウンの値を設定
132:         var textEntity = this.viewer.scene.getEntity(0);
133:         textEntity.setFontFamily(font_Family_Value);
134:     }
135: 
136:     convertColorChordToRGB(colorChord) {
137:         var colorChordChars = colorChord.split('')
138: 
139:         var r = parseInt(colorChordChars[1].toString() + colorChordChars[2].toString(), 16) / 255;
140:         var g = parseInt(colorChordChars[3].toString() + colorChordChars[4].toString(), 16) / 255;
141:         var b = parseInt(colorChordChars[5].toString() + colorChordChars[6].toString(), 16) / 255;
142: 
143:         return [r,g,b];
144:     }
145: }
146: 
147: function CreateChangeFontStyleInstance(container) {
148:     change_Font_Format = new ChangeFontFormat(container);
149: }
150: 
151: function FontStyleValueChanged() {
152:     change_Font_Format.ChangeFontStyle();
153: }
154: 
155: function FontWeightValueChanged() {
156:     change_Font_Format.ChangeFontWeight();
157: }
158: 
159: function FontSizeValueChanged() {
160:     change_Font_Format.ChangeFontSize();
161: }
162: 
163: function FontColorValueChanged() {
164:     change_Font_Format.ChangeFontColor();
165: }
166: 
167: function FontFamilyValueChanged() {
168:     change_Font_Format.ChangeFontFamily();
169: }

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

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

2.1. htmlの文字コード設定

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

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

2.2. タイトルの設定

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

5: <title>ChangeFontFormatSample</title>

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

6～8行目で参照するJavaScript及びスタイルシートのパスを設定します。このサンプルコードでは、maprayのJavaScriptファイル、スタイルシート、文字のフォーマットを変えるJavaScriptファイル（ ChangeFontFormat.js ）を設定します。文字のフォーマットを変えるJavaScriptファイルの文字コードはutf-8に設定します。

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="ChangeFontFormat.js" charset="utf-8"></script>

2.4. スタイルの設定

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

html
body
select
p
input
div#mapray-container（地図表示部分）
div#FontStyleBox（文字のスタイル変更コンボボックス表示部分）
div#FontWeightBox（文字の太さ変更コンボボックス表示部分）
div#FontSizeBox（文字の大きさ変更コンボボックス表示部分）
div#FontColorBox（文字の色変更ボタン表示部分）
div#FontFamilyBox（文字のフォントファミリー変更コンボボックス表示部分）

 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:         margin-left:5px;
25:         font-size:13px;
26:     }
27: 
28:     input{
29:         margin-left:10px;
30:     }
31: 
32:     div#mapray-container {
33:         display: flex;
34:         position: relative;
35:         height: calc(100% - 34px);
36:     }
37: 
38:     div#FontStyleBox{
39:         display: flex;
40:         background-color:#E0E0E0;
41:         height: 32px;
42:         width: 155px;
43:         float:left;
44:         border:inset 1px #000000;
45:         align-items:center;
46:     }
47: 
48:     div#FontWeightBox{
49:         display: flex;
50:         background-color:#E0E0E0;
51:         height: 32px;
52:         width: 185px;
53:         float:left;
54:         border:inset 1px #000000;
55:         align-items:center;
56:     }
57: 
58: 
59:     div#FontSizeBox{
60:         display: flex;
61:         background-color:#E0E0E0;
62:         height: 32px;
63:         width: 125px;
64:         float:left;
65:         border:inset 1px #000000;
66:         align-items:center;
67:     }
68: 
69:     div#FontColorBox{
70:         display: flex;
71:         background-color:#E0E0E0;
72:         height: 32px;
73:         width: 145px;
74:         float:left;
75:         border:inset 1px #000000;
76:         align-items:center;
77:     }
78: 
79:     div#FontFamilyBox{
80:         display: flex;
81:         background-color:#E0E0E0;
82:         height: 32px;
83:         width: 230px;
84:         float:left;
85:         border:inset 1px #000000;
86:         align-items:center;
87:     }
88: </style>

2.5. loadイベントの設定

画面を表示するときに、文字フォーマット変更クラスを生成します。そのため、90行目でページ読み込み時に、文字のフォーマットを変更するクラスのインスタンスを生成する関数（ CreateChangeFontStyleInstance ）を呼ぶように設定します。文字のフォーマットを変更するクラスのインスタンスを生成する関数は、JavaScriptのサンプルコードの詳細で説明します。

90: <body onload="CreateChangeFontStyleInstance('mapray-container');">

2.6. 地図表示部分の指定

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

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

2.7. 文字のスタイル変更のUI

93～100行目で文字のスタイル変更コンボボックス表示部分のブロックを記述します。このブロックの中には、文字のスタイルを変更するコンボボックスを用意します。このサンプルコードでは、normal、italic、obliqueを設定します。文字のスタイルを変更するコンボボックスが変更された時のイベント（onchange）に、文字のスタイルのコンボボックス変更時に呼び出す関数（ FontStyleValueChanged ）を設定します。文字のスタイルのコンボボックス変更時に呼び出す関数は、JavaScriptのサンプルコードの詳細で説明します。

 93: <div id="FontStyleBox">
 94:     <p>Font Style</p>
 95:     <select name="FontStylePullDown" id="FontStylePullDown" onchange="FontStyleValueChanged()">
 96:         <option value="normal">normal</option>
 97:         <option value="italic">italic</option>
 98:         <option value="oblique">oblique</option>
 99:     </select>
100: </div>

2.8. 文字の太さ変更のUI

102～108行目で文字の太さ変更コンボボックス表示部分のブロックを記述します。このブロックの中には、文字の太さを変更するコンボボックスを用意します。このサンプルコードでは、normal、boldを設定します。文字の太さを変更するコンボボックスが変更された時のイベント（onchange）に、文字の太さのコンボボックス変更時に呼び出す関数（ FontWeightValueChanged ）を設定します。文字の太さのコンボボックス変更時に呼び出す関数はJavaScriptのサンプルコードの詳細で説明します。

102: <div id="FontWeightBox">
103:     <p>Font Thickness</p>
104:     <select name="FontWeightPullDown" id="FontWeightPullDown" onchange="FontWeightValueChanged()">
105:         <option value="normal">normal</option>
106:         <option value="bold">bold</option>
107:     </select>
108: </div>

2.9. 文字の大きさ変更のUI

110～120行目で文字の大きさ変更コンボボックス表示部分のブロックを記述します。このブロックの中には、文字の大きさを変更するコンボボックスを用意します。このサンプルコードでは、9、14、18、22、26、32を設定します。文字の大きさを変更するコンボボックスが変更された時のイベント（onchange）に、文字の大きさのコンボボックス変更時に呼び出す関数（ FontSizeValueChanged ）を設定します。文字の大きさのコンボボックス変更時に呼び出す関数はJavaScriptのサンプルコードの詳細で説明します。

110: <div id="FontSizeBox">
111:     <p>Font Size</p>
112:     <select name="FontSizePullDown" id="FontSizePullDown" onchange="FontSizeValueChanged()">
113:         <option value=32>32</option>
114:         <option value=26>26</option>
115:         <option value=22>22</option>
116:         <option value=18>18</option>
117:         <option value=14>14</option>
118:         <option value=9>9</option>
119:     </select>
120: </div>

2.10. 文字の色変更のUI

122～125行目で文字の色変更コンボボックス表示部分のブロックを記述します。このブロックの中には、文字の色変更ボタンを用意します。文字色変更ボタンには、カラーピッカーの色が変更された時のイベント（onchange）に、文字の色変更時に呼び出す関数（ FontColorValueChanged ）を設定します。文字の色変更時に呼び出す関数はJavaScriptのサンプルコードの詳細で説明します。

122: <div id="FontColorBox">
123:     <p>Font Color</p>
124:     <input type="color" id="FontColorPallet" name="FontColorPallet" value="#000000" onchange="FontColorValueChanged()">
125: </div>

2.11. 文字のフォントファミリー変更のUI

127～135行目で文字のフォントファミリー変更コンボボックス表示部分のブロックを記述します。このブロックの中には、文字のフォントファミリーを変更するコンボボックスを用意します。このサンプルコードでは、arial、Courier、Times New Roman、vardanaを設定します。文字のフォントファミリーを変更するコンボボックスが変更された時のイベント（onchange）に、文字のフォントファミリーのコンボボックス変更時に呼び出す関数（ FontFamilyValueChanged ）を設定します。文字のフォントファミリーのコンボボックス変更時に呼び出す関数はJavaScriptのサンプルコードの詳細で説明します。

127: <div id="FontFamilyBox">
128:     <p>Font Family</p>
129:     <select name="FontFamilyPullDown" id="FontFamilyPullDown" onchange="FontFamilyValueChanged()">
130:         <option value="arial" style="font-family:'arial'">arial</option>
131:         <option value="Courier" style="font-family:'Courier'">Courier</option>
132:         <option value="Times New Roman" style="font-family:Times New Roman">Times New Roman</option>
133:         <option value="vardana" style="font-family:vardana">vardana</option>
134:     </select>
135: </div>

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

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

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

3～145行目で文字のフォーマットを変更するクラスを定義します。クラス内の各メソッドの詳細は以降で解説します。また、1行目で文字のフォーマットを変更するクラスのグルーバル変数を定義します。

var change_Font_Format;

class ChangeFontFormat {

  //中略

}

3.2. コンストラクタ

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

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

3.3. 文字の作成

22～52行目が文字の作成メソッドです。画面で設定した文字フォーマットで富士山山頂付近に「Mt.Fuji」という文字を表示します。文字のスタイルは、34行目で文字のスタイルを変更するコンボボックスから値を取得し、それを44行目の文字のスタイルを設定する関数（TextEntityのsetFontStyle）を利用して設定します。文字の太さは、35行目で文字の太さを変更するコンボボックスから値を取得し、それを45行目の文字の太さを設定する関数（TextEntityのsetFontWeight）を利用して設定します。文字の大きさは、36行目で文字の大きさを変更するコンボボックスから値を取得し、それを46行目の文字の大きさを設定する関数（TextEntityのsetFontSize）を利用して設定します。文字の色は、37行目でカラーピッカーから値を取得し、41行目でRGB配列を作成した後に、それを47行目の文字の色を設定する関数（TextEntityのsetColor）を利用して設定します。なお、カラーピッカーの値からRGB配列を作成するメソッドの詳細は後述します。文字のフォントファミリーは、38行目で文字のフォントファミリーを変更するコンボボックスから値を取得し、それを48行目の文字のフォントファミリーを設定する関数（TextEntityのsetFontFamily）を利用して設定します。なお、24～31行目の文字を作成する部分では、初期フォーマットの指定を行わず、表示する文字と位置のみを指定します。文字の表示方法の詳細は、ヘルプページ『文字の表示（addTextを使った表示）』を参照してください。

22: WriteUIFormatStr() {
23:     // 文字のエンティティを作成
24:     var entity = new mapray.TextEntity(this.viewer.scene);
25: 
26:     // 座標は富士山山頂付近
27:     var font_position = { longitude: 138.730647, latitude: 35.362773, height: 4000 };
28: 
29:     // GeoPointクラスを生成して、テキストを追加
30:     var font_geopoint = new mapray.GeoPoint( font_position.longitude, font_position.latitude, font_position.height );
31:     entity.addText( "Mt.Fuji", font_geopoint);
32: 
33:     // プルダウンの値取得
34:     var font_Style_Value = document.getElementById("FontStylePullDown").value;
35:     var font_Weight_Value = document.getElementById("FontWeightPullDown").value;
36:     var font_Size_Value = parseFloat(document.getElementById("FontSizePullDown").value);
37:     var font_ColorChord = document.getElementById("FontColorPallet").value;
38:     var font_Family_Value = document.getElementById("FontFamilyPullDown").value;
39: 
40:     // ColorChordをRBGに変換
41:     var RGBArray = this.convertColorChordToRGB(font_ColorChord);
42: 
43:     // プルダウンの値を設定
44:     entity.setFontStyle(font_Style_Value);
45:     entity.setFontWeight(font_Weight_Value);
46:     entity.setFontSize(font_Size_Value);
47:     entity.setColor(RGBArray);
48:     entity.setFontFamily(font_Family_Value);
49: 
50:     // エンティティをシーンに追加
51:     this.viewer.scene.addEntity(entity);
52: }

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

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

55: // 画像プロバイダを生成
56: createImageProvider() {
57:     // 国土地理院提供の汎用的な地図タイルを設定
58:     return new mapray.StandardImageProvider( { url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", format: "jpg", min_level: 2, max_level: 18 } );
59: }

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

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

60: SetCamera() {
61:     // カメラ位置の設定
62: 
63:     // 球面座標系（経度、緯度、高度）で視点を設定。富士山より５kmほど南の場所
64:     var home_pos = { longitude: 138.736758, latitude: 35.359326, height: 4000 };
65: 
66:     // 球面座標から地心直交座標へ変換
67:     var home_view_geoPoint = new mapray.GeoPoint( home_pos.longitude, home_pos.latitude, home_pos.height );
68:     var home_view_to_gocs = home_view_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
69: 
70:     // 視線方向を定義
71:     var cam_pos = mapray.GeoMath.createVector3([3000, -2600, 1500]);
72:     var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]);
73:     var cam_up = mapray.GeoMath.createVector3([0, 0, 1]);
74: 
75:     // ビュー変換行列を作成
76:     var view_to_home = mapray.GeoMath.createMatrix();
77:     mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, view_to_home);
78: 
79:     // カメラの位置と視線方向からカメラの姿勢を変更
80:     var view_to_gocs = this.viewer.camera.view_to_gocs;
81:     mapray.GeoMath.mul_AA(home_view_to_gocs, view_to_home, view_to_gocs);
82: 
83:     // カメラのnear、farの設定
84:     this.viewer.camera.near = 30;
85:     this.viewer.camera.far = 500000;
86: }

3.6. 文字のスタイル変更

88～95行目が文字のスタイル変更メソッドです。90行目で文字のスタイルを変更するコンボボックスから値を取得します。そして、93行目のviewer.sceneのgetEntity関数で表示している文字のエンティティを取得し、94行目で取得した値を指定することで、文字のスタイルを変更します。このサンプルコードでは、文字のエンティティのインデックスは0となるため、getEntity関数には0を指定します。

88: ChangeFontStyle() {
89:     // プルダウンの値取得
90:     var font_Style_Value = document.getElementById("FontStylePullDown").value;
91: 
92:     // プルダウンの値を設定
93:     var textEntity = this.viewer.scene.getEntity(0);
94:     textEntity.setFontStyle(font_Style_Value);
95: }

3.7. 文字の太さ変更

97～104行目が文字の太さ変更メソッドです。99行目で文字の太さを変更するコンボボックスから値を取得します。そして、102行目のviewer.sceneのgetEntity関数で表示している文字のエンティティを取得し、103行目で取得した値を指定することで、文字の太さを変更します。このサンプルコードでは、文字のエンティティのインデックスは0となるため、getEntity関数には0を指定します。

 97: ChangeFontWeight() {
 98:     // プルダウンの値取得
 99:     var font_Weight_Value = document.getElementById("FontWeightPullDown").value;
100: 
101:     // プルダウンの値を設定
102:     var textEntity = this.viewer.scene.getEntity(0);
103:     textEntity.setFontWeight(font_Weight_Value);
104: }

3.8. 文字の大きさ変更

106～113行目が文字の大きさ変更メソッドです。108行目で文字の大きさを変更するコンボボックスから値を取得します。そして、111行目のviewer.sceneのgetEntity関数で表示している文字のエンティティを取得し、112行目で取得した値を指定することで、文字の太さを変更します。このサンプルコードでは、文字のエンティティのインデックスは0となるため、getEntity関数には0を指定します。

106: ChangeFontSize() {
107:     // プルダウンの値取得
108:     var font_Size_Value = parseFloat(document.getElementById("FontSizePullDown").value);
109: 
110:     // プルダウンの値を設定
111:     var textEntity = this.viewer.scene.getEntity(0);
112:     textEntity.setFontSize(font_Size_Value);
113: }

3.9. 文字の色変更

115～125行目が文字の色変更メソッドです。117行目でカラーピッカーから値を取得し、120行目でカラーピッカーの値をRGBの配列に変換します。そして、123行目のviewer.sceneのgetEntity関数で表示している文字のエンティティを取得し、124行目でその値を指定することで、文字の色を変更します。このサンプルコードでは、文字のエンティティのインデックスは0となるため、getEntity関数には0を指定します。

115: ChangeFontColor() {
116:     // プルダウンの値取得
117:     var font_ColorChord = document.getElementById("FontColorPallet").value;
118: 
119:     // ColorChordをRBGに変換
120:     var RGBArray = this.convertColorChordToRGB(font_ColorChord);
121: 
122:     // プルダウンの値を設定
123:     var textEntity = this.viewer.scene.getEntity(0);
124:     textEntity.setColor(RGBArray);
125: }

3.10. 文字のファミリー変更

127～134行目が文字のファミリー変更メソッドです。129行目で文字のフォントファミリーを変更するコンボボックスから値を取得します。そして、132行目のviewer.sceneのgetEntity関数で表示している文字のエンティティを取得し、133行目で取得した値を指定することで、文字のフォントファミリーを変更します。このサンプルコードでは、文字のエンティティのインデックスは0となるため、getEntity関数には0を指定します。

127: ChangeFontFamily() {
128:     // プルダウンの値取得
129:     var font_Family_Value = document.getElementById("FontFamilyPullDown").value;
130: 
131:     // プルダウンの値を設定
132:     var textEntity = this.viewer.scene.getEntity(0);
133:     textEntity.setFontFamily(font_Family_Value);
134: }

3.11. 色情報の変換

136～144行目が色情報の変換メソッドです。引数の16進数表記の色情報（"#rrggbb"）から赤、緑、青それぞれの色情報を0～1の範囲に正規化し、赤、緑、青の順に配列に格納し返します。

136: convertColorChordToRGB(colorChord) {
137:     var colorChordChars = colorChord.split('')
138: 
139:     var r = parseInt(colorChordChars[1].toString() + colorChordChars[2].toString(), 16) / 255;
140:     var g = parseInt(colorChordChars[3].toString() + colorChordChars[4].toString(), 16) / 255;
141:     var b = parseInt(colorChordChars[5].toString() + colorChordChars[6].toString(), 16) / 255;
142: 
143:     return [r,g,b];
144: }

3.12. 文字のフォーマット変更クラスのインスタンス生成

147～149行目の関数は、引数として渡されるブロックのidを利用して、文字フォーマット変更クラスのインスタンスを生成します。

147: function CreateChangeFontStyleInstance(container) {
148:     change_Font_Format = new ChangeFontFormat(container);
149: }

3.13. 文字のスタイル変更時のイベント

151～153行目の関数は、文字のスタイル変更時に呼ばれ、文字フォーマット変更クラスの文字のスタイル変更メソッドを呼び出します。

151: function FontStyleValueChanged() {
152:     change_Font_Format.ChangeFontStyle();
153: }

3.14. 文字の太さ変更時のイベント

155～157行目の関数は、文字の太さ変更時に呼ばれ、文字フォーマット変更クラスの文字の太さ変更メソッドを呼び出します。

155: function FontWeightValueChanged() {
156:     change_Font_Format.ChangeFontWeight();
157: }

3.15. 文字の大きさ変更時のイベント

159～161行目の関数は、文字の大きさ変更時に呼ばれ、文字フォーマット変更クラスの文字の大きさ変更メソッドを呼び出します。

159: function FontSizeValueChanged() {
160:     change_Font_Format.ChangeFontSize();
161: }

3.16. 文字の色変更メソッドの呼び出し

163～165行目の関数は、文字の色変更時に呼ばれ、文字フォーマット変更クラスの文字の色変更メソッドを呼び出します。

163: function FontColorValueChanged() {
164:     change_Font_Format.ChangeFontColor();
165: }

3.17. 文字のフォントファミリー変更メソッドの呼び出し

167～169行目の関数は、文字のフォントファミリー変更時に呼ばれ、文字フォーマット変更クラスの文字のフォントファミリー変更メソッドを呼び出します。

167: function FontFamilyValueChanged() {
168:     change_Font_Format.ChangeFontFamily();
169: }

4. 出力イメージ

このサンプルコードで初期状態（スタイル：normal、太さ：normal、大きさ：32、色：黒、フォントファミリー：arial）の出力イメージは下図のようになります。

初期状態から、文字のスタイルをitalicにした時の出力イメージは下図のようになります。

初期状態から、文字の太さをboldにした時の出力イメージは下図のようになります。

初期状態から、文字の大きさを22にした時の出力イメージは下図のようになります。

初期状態から、文字の色を赤にした時の出力イメージは下図のようになります。

初期状態から、文字のフォントファミリーをCourierにした時の出力イメージは下図のようになります。