出力イメージポリゴンのGeoJSONデータを読み込み、そのデータが持つプロパティを参照して対象データ表示する方法を説明します。)は、国土交通省から取得した実データのため、詳細説明は割愛します。このサンプルコードでは、人口密度に応じてポリゴンの色をグラデーション表示し、表示するポリゴンの透過率を変更できます。変更できる透過率の範囲は、0.0、0.5、1.0となるます。球面座標系(経度、緯度、高度)で視点を設定。htmlのサンプルコードの詳細htmlのサンプルコードの詳細を以下で解説します。htmlの文字コード設定4行目でhtmlの文字コードを設定します。このサンプルコードでは、utf-8を設定します。タイトルの設定5行目でタイトルを設定します。このサンプルコードでは、ReadGeoJsonPolygonPropertiesSampleを設定します。JavaScriptファイルのパス設定6~8行目で参照するJavaScript及びスタイルシートのパスを設定します。スタイルの設定9~43行目で表示する要素のスタイルを設定します。このサンプルコードでは、下記のスタイルを設定します。画面を表示するときに、ポリゴンのプロパティを参照して対象データ表示するクラスを生成します。)を呼ぶように設定します。ポリゴンのプロパティを参照して対象データ表示するクラスのインスタンスを生成するメソッドは、JavaScriptのサンプルコードの詳細で説明します。地図表示部分の指定47行目で地図表示部分のブロックを記述します。詳細はヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。透過率変更のUI49~56行目で透過率変更コンボボックス表示部分のブロックを記述します。このブロックの中には、透過率を変更するコンボボックスを用意します。このサンプルコードでは、0.0、0.5、1.0を設定します。透過率のコンボボックス変更時に呼び出す関数はJavaScriptのサンプルコードの詳細で説明します。JavaScriptのサンプルコードの詳細JavaScriptのサンプルコードの詳細を以下で解説します。クラスの説明3~123行目で、ポリゴンのGeoJSONデータを読み込み、そのデータが持つプロパティを参照して対象データ表示するクラスを定義します。クラス内の各メソッドの詳細は以降で解説します。ポリゴンのプロパティを参照して対象データ表示するクラスは、mapray.RenderCallbackクラスを継承します。1行目でプロパティを参照して対象データを表示するクラスのグローバル変数を定義します。コンストラクタ4~28行目が線のGeoJSONデータを読み込み、そのデータが持つプロパティを参照して対象データ表示するクラスのコンストラクタです。引数として渡されるブロックのidに対して、mapray.Viewerを作成し、geoJSONファイルの出典情報を追加します。カメラの位置・向きの設定メソッドを呼び出します。その後、文字の表示メソッドとGeoJSONデータのロードメソッドを呼び出します。viewerを作成する際の画像プロバイダは画像プロバイダの生成メソッドから取得します。mapray.Viewerの作成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。画像プロバイダの生成31~33行目が画像プロバイダの生成メソッドです。生成した画像プロバイダを返します。画像プロバイダの生成の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。カメラの位置・向きの設定36~60行目がカメラの位置・向きの設定メソッドです。カメラの位置・向きの設定は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。球面座標系(経度、緯度、高度)で視点を設定。文字の表示63~74行目で、地名を表現する文字をmapray.Viewerのシーンに追加します。文字の表示方法の詳細は、ヘルプページ『文字の表示(addTextを使った表示)』を参照してください。シーンのロード77~85行目がシーンのロードメソッドです。mapray.GeoJSONLoaderでシーンを読み込みます。GeoJSONLoaderクラス生成時の引数には、GeoJSONファイルのエンティティを追加するシーン、読み込むGeoJSONファイルのURL、オプション集合の順に指定します。このサンプルコードでは、viewerクラスのシーン、GeoJSONファイルのURL、オプション集合の順に指定します。このサンプルコードでは、GeoJSONデータのプロパティに応じた内容にするため、ポリゴンの色には、プロパティの値に応じた色が取得できるメソッドを設定しています。プロパティの値に応じた色が取得できるメソッドの詳細は後述します。読み込むGeoJSONファイルのURLは、httpもしくはhttpsでアクセスできるURLを指定します。最後に、84行目のload関数を呼び出すことでシーンの読み込みができます。GeoJSONLoaderクラスは、GeoJSONデータのfeatureごとのロード時にコールバック関数が呼ばれ、GeoJSONデータの任意のproperty属性にアクセスすることができます。propertyに書かれているkeyの値をコールバック関数内で取得することも可能です。プロパティの値に応じた色の変更88~110行目がプロパティの値に応じた色が取得できるメソッドです。読み込んだGeoJSONデータのプロパティを参照して、適切な色を返します。このサンプルコードでは、人口密度が高くなるにつれて、赤色から黄色になるように設定しています。透過率の変更112~121行目が透過率変更メソッドです。114行目で透過率を変更するコンボボックスから値を取得します。118行目のviewer.sceneのgetEntity関数でポリゴンのエンティティを順に取得し、119行目で取得した値を指定することで、ポリゴンの透過率を変更します。このサンプルコードでは、GeoJSONデータはポリゴンのエンティティとなり、インデックスは1番目以降となるため、getEntity関数には1以降のすべてのエンティティを指定します。ポリゴンのプロパティを参照して対象データ表示するクラスのインスタンス生成125~127行目の関数は、引数として渡されるブロックのidを利用して、ポリゴンのプロパティを参照して対象データ表示するクラスのインスタンスを生成します。透過率変更時のイベント129~131行目の関数は、透過率変更時に呼ばれ、ポリゴンのプロパティを参照して対象データ表示するクラスの透過率変更メソッドを呼び出します。出力イメージこのサンプルコードで初期状態(透過率:0.5)の出力イメージは下図のようになります。初期状態から、透過率を1.0にした時の出力イメージは下図のようになります。)は、国土交通省から取得した実データのため、詳細説明は割愛します。このサンプルコードでは、富士山近郊の気温の平年値に応じて、ポリゴンの色をグラデーション表示し、クランプ機能を用いて、ポリゴンを地表面上に表示します。クランプ機能を用いたシーンのロードクランプ機能を用いるには、シーンのロードメソッド内で、getAltitudeModeにmapray.AltitudeMode.CLAMPを設定します。下記に示すコードの6行目にあたる部分になります。この設定を行うことで、読みこんだGeoJSONファイルを表示する際に、全てのポリゴンが地表面上に沿った形で表示されます。出力イメージこのサンプルコードの出力イメージは下図のようになります。Corporation。