出力イメージmapray.GeoJSONLoaderを使ってGeoJSONデータを表示する方法を説明します。このサンプルコードでは、新大阪駅と京都駅間の新幹線の経路を表示します。球面座標系(経度、緯度、高度)で視点を設定。htmlのサンプルコードの詳細htmlのサンプルコードの詳細を以下で解説します。htmlの文字コード設定4行目でhtmlの文字コードを設定します。このサンプルコードでは、utf-8を設定します。タイトルの設定5行目でタイトルを設定します。このサンプルコードでは、LoadGeoJSONSampleを設定します。JavaScriptファイルのパス設定6~8行目で参照するJavaScript及びスタイルシートのパスを設定します。スタイルの設定9~20行目で表示する要素のスタイルを設定します。スタイルの詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。画面を表示するときに、GeoJSONデータ読み込みクラスを生成します。そのため、23行目でページの読み込み時に、地図表示部分のブロックのidからGeoJSONデータ読み込みクラスのインスタンスを生成します。GeoJSONデータ読み込みクラスはJavaScriptのサンプルコードの詳細で説明します。地図表示部分の指定24行目で地図表示部分のブロックを記述します。詳細はヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。JavaScriptのサンプルコードの詳細JavaScriptのサンプルコードの詳細を以下で解説します。クラスの説明1~85行目で、GeoJSONデータを読み込み、表示するクラスを定義します。クラス内の各メソッドの詳細は以降で解説します。GeoJSONデータを読み込み、表示するクラスは、mapray.RenderCallbackクラスを継承します。コンストラクタ2~20行目がGeoJSONデータを読み込み、表示するクラスのコンストラクタです。引数として渡されるブロックのidに対して、mapray.Viewerを作成し、カメラの位置・向きの設定メソッドを呼び出します。その後、文字の表示メソッドとシーンのロードメソッドを呼び出します。viewerを作成する際の画像プロバイダは画像プロバイダの生成メソッドから取得します。mapray.Viewerの作成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。画像プロバイダの生成23~25行目が画像プロバイダの生成メソッドです。生成した画像プロバイダを返します。画像プロバイダの生成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。カメラの位置・向きの設定28~52行目がカメラの位置・向きの設定メソッドです。カメラの位置・向きの設定は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。球面座標系(経度、緯度、高度)で視点を設定。文字の表示55~71行目で、それぞれの駅名を表示するための文字をmapray.Viewerのシーンに追加します。文字の表示方法の詳細は、ヘルプページ『文字の表示(addTextを使った表示)』を参照してください。シーンのロード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の値をコールバック関数内で取得することも可能です。GeoJSONファイルの詳細GeoJSONファイルの詳細を以下で解説します。GeoJSONファイルはJSON形式で記述します。GeoJsonファイルの詳細なフォーマットは、GeoJSONの公式サイトを参照ください。FeatureCollectionの設定2行目でFeatureCollectionという名称でフィーチャーコレクションオブジェクトを定義し、その中の5行目でFeatureという名称でフィーチャーオブジェクトを定義します。ラインのデータ8行目でMultiLineStringという名称でジオメトリオブジェクトを定義します。9行目のcoordinatesから座標配列を定義します。出力イメージこのサンプルコードの出力イメージは下図のようになります。Corporation。