出力イメージGeoJSONデータのフォーマットを変更する方法を説明します。)については、ヘルプページ『GeoJSONの表示(GeoJSONLoaderを使った表示)』を参照してください。結ぶGeoJSONデータのフォーマットを変更します。変更できるフォーマットは、線の幅、線の色です。線の幅は、1、3、7、13、17、21に変更でき、線の色は、カラーピッカーで変更できます。球面座標系(経度、緯度、高度)で視点を設定。htmlのサンプルコードの詳細htmlのサンプルコードの詳細を以下で解説します。htmlの文字コード設定4行目でhtmlの文字コードを設定します。このサンプルコードでは、utf-8を設定します。タイトルの設定5行目でタイトルの設定をします。このサンプルコードでは、ChangeGeoJSONFormatSampleを設定します。JavaScriptファイルのパス設定6~8行目で参照するJavaScript及びスタイルシートのパスを設定します。GeoJSONデータのフォーマットを変えるJavaScriptファイルの文字コードはutf-8に設定します。スタイルの設定9~57行目で表示する要素のスタイルを設定します。このサンプルコードでは、下記のスタイルを設定します。画面を表示するときに、GeoJSONデータフォーマット変更クラスを生成します。)を呼ぶように設定します。GeoJSONデータのフォーマットを変更するクラスのインスタンスを生成する関数は、JavaScriptのサンプルコードの詳細で説明します。地図表示部分の指定61行目で地図表示部分のブロックを記述します。詳細はヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。線の幅変更のUI63~73行目で線幅変更コンボボックス表示部分のブロックを記述します。このブロックの中には、線幅を変更するコンボボックスを用意します。このサンプルコードでは、1、3、7、13、17、21を設定します。線幅のコンボボックス変更時に呼び出す関数はJavaScriptのサンプルコードの詳細で説明します。線の色変更のUI75~78行目で線色変更ボタン表示部分のブロックを記述します。このブロックの中には、線色変更ボタンを用意します。線色変更時に呼び出す関数はJavaScriptのサンプルコードの詳細で説明します。JavaScriptのサンプルコードの詳細JavaScriptのサンプルコードの詳細を以下で解説します。クラスとグローバル変数の説明3~120行目で、GeoJSONデータのフォーマットを変更するクラスを定義します。クラス内の各メソッドの詳細は以降で解説します。GeoJSONデータのフォーマットを変更するクラスは、mapray.RenderCallbackクラスを継承します。1行目でGeoJSONデータのフォーマットを変更するクラスのグローバル変数を定義します。コンストラクタ4~22行目がGeoJSONデータのフォーマットを変更するクラスのコンストラクタです。引数として渡されるブロックのidに対して、mapray.Viewerを作成し、カメラの位置・向きの設定メソッドを呼び出します。その後、文字の表示メソッドとシーンのロードメソッドを呼び出します。mapray.Viewerのベース地図の画像プロバイダは、画像プロバイダの生成メソッドで取得した画像プロバイダを設定します。mapray.Viewerの作成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。画像プロバイダの生成25~28行目が画像プロバイダの生成メソッドです。生成した画像プロバイダを返します。画像プロバイダの生成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。カメラの位置・向きの設定31~55行目がカメラの位置・向きの設定メソッドです。カメラの位置・向きの設定は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。球面座標系(経度、緯度、高度)で視点を設定。文字の表示58~74行目で、それぞれの駅名を表示するための文字をmapray.Viewerのシーンに追加します。文字の表示方法の詳細は、ヘルプページ『文字の表示(addTextを使った表示)』を参照してください。シーンのロード77~86行目がシーンのロードメソッドです。mapray.GeoJSONLoaderでシーンを読み込みます。GeoJSONLoaderクラス生成時の引数には、GeoJSONファイルのエンティティを追加するシーン、読み込むGeoJSONファイルのURL、オプション集合の順に指定します。このサンプルコードでは、viewerクラスのシーン、GeoJSONファイルのURL、オプション集合の順に指定します。読み込むGeoJSONファイルのURLは、httpもしくはhttpsでアクセスできるURLを指定します。最後に、86行目のload関数を呼び出すことでシーンの読み込みができます。GeoJSONLoaderクラスは、GeoJSONデータのfeatureごとのロード時にコールバック関数が呼ばれ、GeoJSONデータの任意のproperty属性にアクセスすることができます。propertyに書かれているkeyの値をコールバック関数内で取得することも可能です。線の幅変更88~95行目が線幅変更メソッドです。99行目で線幅を変更するコンボボックスから値を取得します。93行目のviewer.sceneのgetEntity関数で表示している線のエンティティを取得し、94行目で取得した値を指定することで、線の幅を変更します。このサンプルコードでは、GeoJSONデータは線のエンティティとなり、インデックスは1番目となるため、getEntity関数には1を指定します。線の色変更97~107行目が線色変更メソッドです。99行目でカラーピッカーから値を取得し、102行目でカラーピッカーの値をRGBの配列に変換します。105行目のviewer.sceneのgetEntity関数で表示している線のエンティティを取得し、106行目でその値を指定することで、線の色を変更します。このサンプルコードでは、GeoJSONデータは線のエンティティとなり、インデックスは1番目となるため、getEntity関数には1を指定します。色情報の変換109~117行目が色情報の変換メソッドです。色情報の変換方法の詳細は、ヘルプページ『文字のフォーマットの変更』を参照してください。GeoJSONデータのフォーマット変更クラスのインスタンス生成121~123行目の関数は、引数として渡されるブロックのidを利用して、GeoJSONデータのフォーマット変更クラスのインスタンスを生成します。線幅変更時のイベント125~127行目の関数は、線幅変更時に呼ばれ、GeoJSONデータのフォーマット変更クラスの線幅変更メソッドを呼び出します。線色変更時のイベント129~131行目の関数は、線色変更時に呼ばれ、GeoJSONデータのフォーマット変更クラスの線色変更メソッドを呼び出します。出力イメージこのサンプルコードで初期状態(線幅:3、線色:青)の出力イメージは下図のようになります。初期状態から、線幅を13にした時の出力イメージは下図のようになります。初期状態から、線色を赤にした時の出力イメージは下図のようになります。Corporation。