モデルの高度の設定方法の変更モデルの高度の設定方法の変更モデルの高度の設定方法を変更する方法を説明します。サンプルコードモデルの高度の設定方法をを変更するChangeAltitudeMode.html及び、ChangeAltitudeMode.jsのサンプルコードとシーンファイル(glTFChangeAltitudeMode.json)です。このサンプルコードでは、ユーザインタフェースを介して、高度モードを変更します。変更できる項目は、高度の設定方法、高さです。高度の設定方法は、ABSOLUTE(絶対値)、RELATIVE(地表面からの相対値)、CLAMP(地表面に接地)に、高さは、0、40、100にそれぞれ変更できます。クリックしてダウンロードしてください。ダウンロードリンクからダウンロードした場合はzipファイルを展開してご利用ください。展開したデータは解凍した結果できたディレクトリを含めて、mapray-jsのルートディレクトリからの相対パスで以下のディレクトリに保存されているという想定で以下の説明を行います。./examples/entity/gltf/data/なお、データは当社の著作物ではありません。著作権は各データの作成者に帰属します。詳細はフォルダ中のLICENSEファイルを参照の上ご利用ください。ユーザーの皆様がコンテンツの権利を侵害した場合、当社では一切責任を追うものではありませんのでご注意ください。]}htmlのサンプルコードの詳細htmlのサンプルコードの詳細を以下で解説します。htmlの文字コード設定4行目でhtmlの文字コードを設定します。このサンプルコードでは、utf-8を設定します。charset="utf-8">タイトルの設定5行目でタイトルの設定をします。このサンプルコードでは、ChangeAltitudeModeSampleを設定します。5<title>ChangeAltitudeModeSample</title>JavaScriptファイルのパス設定6~8行目で参照するJavaScript及びスタイルシートのパスを設定します。このサンプルコードでは、maprayのJavaScriptファイル、スタイルシート、高度モードを変えるJavaScriptファイル(ChangeAltitudeMode.js)を設定します。高度モードを変えるJavaScriptファイルの文字コードはutf-8に設定します。charset="utf-8"></script>スタイルの設定9~57行目で表示する要素のスタイルを設定します。このサンプルコードでは、下記のスタイルを設定します。画面を表示するときに、高度モード変更クラスを生成します。そのため、60行目でページ読み込み時に、高度モードを変更するクラスのインスタンスを生成する関数(CreateChangeAltitudeModeInstance)を呼ぶように設定します。高度モードを変更するクラスのインスタンスを生成する関数は、JavaScriptのサンプルコードの詳細で説明します。onload="CreateChangeAltitudeModeInstance('mapray-container');">地図表示部分の指定61行目で地図表示部分のブロックを記述します。詳細はヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。id="mapray-container"></div>高度の設定方法変更のUI63~70行目で高度の設定方法変更コンボボックス表示部分のブロックを記述します。このブロックの中には、高度の設定方法を変更するコンボボックスを用意します。このサンプルコードでは、ABSOLUTE、RELATIVE、CLAMPを設定します。高度の設定方法を変更するコンボボックスが変更された時のイベント(onchange)に、高度の設定方法変更のコンボボックス変更時に呼び出す関数(AltitudeModeValueChanged)を設定します。高度の設定方法変更のコンボボックス変更時に呼び出す関数はJavaScriptのサンプルコードの詳細で説明します。</select></div>高さ変更のUI72~79行目で高さ変更ボタン表示部分のブロックを記述します。このブロックの中には、このブロックの中には、高さを変更するコンボボックスを用意します。このサンプルコードでは、0、40、100を設定します。高さを変更するコンボボックスが変更された時のイベント(onchange)に、高さのコンボボックス変更時に呼び出す関数(HeightValueChanged)を設定します。高さのコンボボックス変更時に呼び出す関数はJavaScriptのサンプルコードの詳細で説明します。</select></div>JavaScriptのサンプルコードの詳細JavaScriptのサンプルコードの詳細を以下で解説します。クラスとグローバル変数の説明3~141行目でモデルの高度の設定方法を変更するクラスを定義します。クラス内の各メソッドの詳細は以降で解説します。1行目でモデルの高度の設定方法を変更するクラスのグローバル変数を定義します。//中略}コンストラクタ4~28行目がモデルの高度の設定方法を変更するクラスのコンストラクタです。引数として渡されるブロックのidに対して、mapray.Viewerを作成し、glTFモデルの出典情報を追加します。カメラの位置・向きの設定、シーンの読み込みの順にメソッド呼び出します。mapray.Viewerのベース地図の画像プロバイダは、画像プロバイダの生成メソッドで取得した画像プロバイダを設定します。mapray.Viewerの作成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。this.LoadScene();}画像プロバイダの生成31~34行目が画像プロバイダの生成メソッドです。生成した画像プロバイダを返します。画像プロバイダの生成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。18);}カメラの位置・向きの設定37~61行目がカメラの位置・向きの設定メソッドです。カメラの位置・向きの設定は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。500000;}シーンのロード64~77行目がシーンのロードメソッドです。シーンのロードは、ヘルプページ『glTFモデルの表示(SceneLoaderを使った表示)』を参照してください。loader.load();}リソース要求変換78~84行目がリソース要求変換メソッドです。リソース要求変換は、ヘルプページ『glTFモデルの表示(SceneLoaderを使った表示)』を参照してください。};}シーンのロード終了イベント86~90行目がシーンのロード終了イベントメソッドです。引数のisSuccessには、読み込み結果が格納されており、trueの場合のみ読み込んだglTFモデルを表示し、glTFモデルを操作できるようにします。glTFモデルのロード成功可否をtrueにし、glTFモデルの表示位置を設定するメソッドを呼び出します。glTFモデルの表示位置を設定するメソッドの詳細は後述します。}}glTFモデルの表示位置の設定92~107行目がglTFモデルの表示位置の設定メソッドです。高度の設定方法の設定、モデルの表示位置、向き、スケールをモデルのエンティティに反映します。97行目で高度の設定方法を、101行目でモデルの表示位置を、103行目でモデルの向きを、106行目でモデルのスケールをそれぞれ設定します。読み込んだモデルは1つ目のエンティティとなるため、エンティティ取得時の引数には0を指定します。0.2]);}高度の設定方法の変更109~129行目が高度の設定方法の変更メソッドです。111行目で高度の設定方法を変更するコンボボックスから文字列を取得します。114~126行目で取得した文字列を高度の設定方法として設定し、128行目でglTFモデルの表示位置の設定を呼び出します。this.UpdateModelPosition();}高さの変更131~139行目が高さの変更メソッドです。133行目で高さを変更するコンボボックスから値を取得し、136行目で高さの値として設定します。その後、138行目でglTFモデルの表示位置の設定を呼び出します。this.UpdateModelPosition();}高度の設定方法変更クラスのインスタンス生成143~145行目の関数は、引数として渡されるブロックのidを利用して、高度の設定方法変更クラスのインスタンスを生成します。ChangeAltitudeMode(container);}高度の設定方法変更時のイベント147~149行目の関数は、高度の設定方法変更時に呼ばれ、高度の設定方法変更クラスの高度の設定方法変更メソッドを呼び出します。change_altitude_mode.ChangeAltitudeMode()}高さ変更時のイベント151~153行目の関数は、高さ変更時に呼ばれ、高度モード変更クラスの高さ変更メソッドを呼び出します。change_altitude_mode.ChangeHeight()}シーンファイルの詳細シーンファイルの詳細を以下で解説します。シーンファイルはJSON形式で記述します。エンティティの設定3行目でentity_listという名称でエンティティを定義し、その中にエンティティの詳細を定義します。4行目のtypeという名称は、エンティティの種類を表し、glTFモデルの場合はmodelを指定します。]}メッシュのデータ2行目でmodel_registerという名称でモデルデータを定義します。このシーンファイルでは、モデルデータのIDをmodel-0とし、モデルファイルをファイルから読み込むために、linkという名称にglTFファイルのURLを指定します。},汎用エンティティの設定4~8行目で汎用エンティティの設定をします。汎用エンティティには以下の内容を定義します。"absolute"出力イメージこのサンプルコードで初期状態(高度モード:ABSOLUTE、高さ:40)の出力イメージは下図のようになります。出力イメージ初期状態から、高度モードをRELATIVEにした時の出力イメージは下図のようになります。出力イメージ初期状態から、高度モードをCLAMPにした時の出力イメージは下図のようになります。出力イメージ初期状態から、高さを100にした時の出力イメージは下図のようになります。