Tutorials
Maprayのサンプルを利用したチュートリアルになります。チュートリアルをご覧になり、Maprayの使い方を学習して下さい。各チュートリアルの画像をクリックすると詳細な説明ページへジャンプします。
1. カメラ
1.1. 緯度経度によるカメラ位置の指定
- 緯度経度を指定してカメラ位置を指定する方法を説明します。
- Mapray.Viewerクラスのカメラ位置を緯度・経度で指定するLongitudeAndLatitudeCameraPos.htmlサンプルコードです。このサンプルコードでは日本で2番目に標高の高い北岳付近から、最も標高の高い富士山を眺めています。
1.2. カメラのアニメーション (1)
- 動的にカメラの姿勢を変更するアニメーションを作成する方法を説明します。
- 動的にカメラの姿勢を変更するアニメーションを作成する CameraAnimation.html のサンプルコードです。 このサンプルコードでは、富士山を中心にカメラが360度回転します。
1.3. カメラのアニメーション (2)
- カメラのアニメーションの改修
- 見る場所を富士山頂から大阪城にして、カメラの画角を動的に変更します。
1.4. 画角の変更
- カメラの画角を変更する方法を説明します。
- mapray.Viewerクラスの画角を指定する ChangeAngleOfView30.html のサンプルコードです。このサンプルコードでは、画角を30度に設定し、日本で2番目に標高の高い北岳付近から1番目に標高の高い富士山を眺めています。
1.5. パスに沿ったカメラアニメーション
- 仮想的なパスに沿ってカメラをアニメーションさせる方法を説明します。
- 仮想的なパスに沿ってカメラをアニメーションさせる VirtualPathCameraAnimation.html 及び VirtualPathCameraAnimation.js のサンプルコードです。このサンプルコードでは、皇居、東京タワー、東京スカイツリー、東京ドーム、皇居の順に各地を結ぶ仮想パスに沿ってカメラが移動します。
2. 入力
2.1. マウス操作によるカメラ操作及び指定位置の緯度・経度の取得
- マウス操作でカメラの操作や指定した位置の緯度・経度を取得する方法を説明します。
- マウス操作でカメラの操作や指定した位置の緯度・経度を取得するCameraControlWithMouse.html及び2つのJavascriptファイルのサンプルコードです。JavaScriptファイルは、マウスの入力検知を行うCheckInputKeyAndMouse.jsとカメラ操作及び指定位置の緯度・経度を取得するCameraControlWithMouse.jsの2種類です。
3. レイヤ
3.1. レイヤの表示
- レイヤを表示する方法を説明します。
- レイヤを表示する AddLayer.html のサンプルコードです。このサンプルコードでは、東京ドーム付近の地図に国土地理院の標準地図を重ねて表示します。
3.2. レイヤの動的追加、削除と不透明度の変更
- 動的にレイヤを追加、削除する方法とレイヤの不透明度を変更する方法を説明します。
- 動的にレイヤを追加、削除し、レイヤの不透明度を変更する CreateDeleteLayerChangeOpacity.html 及び CreateDeleteLayerChangeOpacity.js のサンプルコードです。
4. ベース地図
4.1. ベース地図の変更
- ベース地図を変更する方法を説明します。
- ベース地図を変更する ChangeImageTile.html 及び ChangeImageTile.js のサンプルコードです。このサンプルコードでは、ベース地図を変更するコンボボックスの状態によって、ベース地図を国土地理院の標準地図と国土地理院の写真に切り替えます。
5. エンティティ / ライン
5.1. 線の表示 (SceneLoaderを使った表示)
- mapray.SceneLoaderを使って線を表示する方法を説明します。
- mapray.SceneLoaderを使って線を表示する LoadLineScene.html 及び LoadLineScene.js のサンプルコードとシーンファイルです。このサンプルコードでは、皇居、東京タワー、東京スカイツリー間を結ぶ線を表示します。
5.2. 線の表示 (addPointを使った表示)
- mapray.MarkerLineEntityのaddPointsを使って線を表示する方法を説明します。
- mapray.MarkerLineEntityのaddPointsを使って線を表示する AddLine.html のサンプルコードです。このサンプルコードでは、皇居と東京タワーを結ぶ直線を表示します。
5.3. 線のフォーマットの変更
- 線のフォーマットを変更する方法を説明します。
- 線のフォーマットを変更する ChangeLineFormat.html 及び ChangeLineFormat.js のサンプルコードです。このサンプルコードでは、ユーザインタフェースを介して、皇居、東京タワー間を結ぶ線のフォーマットを変更します。変更できるフォーマットは、線の幅、線の色です。線の幅は、1、3、7、13、17、21に変更でき、線の色は、カラーピッカーで変更できます。
5.4. ラインのアニメーション
- 動的に線を追加し、表示するアニメーションを作成する方法を説明します。
- 動的に線を追加し、表示するアニメーションを作成する LineAnimation.html 及び LineAnimation.js のサンプルコードです。このサンプルコードでは、皇居、東京タワー、東京スカイツリー、東京ドーム、皇居の順に各地を通る曲線を作図します。皇居までたどりつけば、作図した線をすべて削除し、同じ経路の曲線の作図します。
6. エンティティ / テキスト
6.1. 文字の表示 (SceneLoaderを使った表示)
- mapray.SceneLoaderを使って文字を表示する方法を説明します。
- mapray.SceneLoaderを使って文字を表示する WriteStringWithSceneLoder.html のサンプルコードとシーンファイルです。このサンプルコードでは、富士山頂上付近に「Mt.Fuji」と表示します。
6.2. 文字の表示 (addTextを使った表示)
- mapray.TextEntityのaddTextを使って文字を表示する方法を説明します。
- mapray.TextEntityのaddTextを使って文字を表示する WriteStringWithAddText.html のサンプルコードです。このサンプルコードでは、富士山の頂上付近に「Mt.Fuji」を表示しています。
6.3. 文字のフォーマットの変更
- 文字のフォーマットを変更する方法を説明します。
- 文字のフォーマットを変更する ChangeFontFormat.html 及び ChangeFontFormat.js のサンプルコードです。このサンプルコードでは、ユーザインタフェースを介して、富士山頂上付近の「Mt.Fuji」の文字フォーマットを変更します。変更できる文字フォーマットはスタイル、太さ、大きさ、色、フォントファミリーです。スタイルは通常、イタリック、斜体に、太さは通常、太いに、大きさは9、14、18、22、26、32に、フォントファミリーはarial、Courier、Times New Roman、vardanaにそれぞれ変更できます。また、色はカラーピッカーから変更できます。
7. エンティティ / モデル
今後追加予定です。
8. エンティティ / glTF
8.1. glTFモデルの表示 (SceneLoaderを使った表示)
- mapray.SceneLoaderを使ってglTFモデルを表示する方法を説明します。
- mapray.SceneLoaderを使ってglTFモデルを表示するLoadglTFModel.html及び、LoadglTFModel.jsのサンプルコードとシーンファイル（glTFLoad.json）です。このサンプルコードでは、薬師寺の場所に3Dモデルを表示します。
8.2. モデルの高度の設定方法の変更
- モデルの高度の設定方法を変更する方法を説明します。
- モデルの高度の設定方法をを変更するChangeAltitudeMode.html及び、ChangeAltitudeMode.jsのサンプルコードとシーンファイル（glTFChangeAltitudeMode.json）です。このサンプルコードでは、ユーザインタフェースを介して、高度モードを変更します。変更できる項目は、高度の設定方法、高さです。
8.3. glTFモデルのアニメーション
- 動的にglTFモデルの位置・向きを変更するアニメーションを作成する方法を説明します。
- 動的にglTFモデルの位置・向きを変更するアニメーションを作成するglTFModelAnimation.html及び、glTFModelAnimation.jsのサンプルコードとシーンファイル（glTFAnimation.json）です。このサンプルコードでは、glTFモデルが京都御所沿いの道路を北上したのち、西向きに向きを変え、さらに西進するアニメーションを表現します。
8.4. glTFモデルの移動・回転
- ユーザインタフェースを介して、glTFモデルを移動・回転させる方法を説明します。
- ユーザインタフェースを介して、glTFモデルを移動・回転させるglTFModelController.html及び、glTFModelController.jsのサンプルコードとシーンファイル（glTFController.json）です。このサンプルコードでは、対応するボタンを操作することで、前進、後進、左90度回転、右90度回転ができます。
9. エンティティ / geojson
9.1. GeoJSONデータの表示 (GeoJSONLoaderを使った表示)
- mapray.GeoJSONLoaderを使ってGeoJSONデータを表示する方法を説明します。
- mapray.GeoJSONLoaderを使ってGeoJSONデータを表示するLoadGeoJSON.html及び、LoadGeoJSON.jsのサンプルコードとシーンファイル（RouteLine.json）です。このサンプルコードでは、新大阪駅と京都駅間の新幹線の経路を表示します。
9.2. GeoJSONのフォーマットの変更
- GeoJSONデータのフォーマットを変更する方法を説明します。
- GeoJSONデータのフォーマットを変更する ChangeGeoJsonFormat.html 及び ChangeGeoJsonFormat.js のサンプルコードです。
9.3. GeoJSONプロパティの参照 (点データ)
- 点のGeoJSONデータを読み込み、そのデータが持つプロパティを参照して対象データ表示する方法を説明します。
- 点のGeoJSONデータを読み込み、そのデータが持つプロパティを参照して対象データ表示する ReadGeoJsonPointProperties.html 及び、 ReadGeoJsonPointProperties.js のサンプルコードです。
9.4. GeoJSONプロパティの参照 (線データ)
- 線のGeoJSONデータを読み込み、そのデータが持つプロパティを参照して対象データ表示する方法を説明します。
- 線のGeoJSONデータを読み込み、そのデータが持つプロパティを参照して対象データ表示する ReadGeoJsonLineProperties.html 及び、 ReadGeoJsonLineProperties.js のサンプルコードです。
9.5. GeoJSONプロパティの参照 (ポリゴンデータ)
- 線のGeoJSONデータを読み込み、そのデータが持つプロパティを参照して対象データ表示する方法を説明します。
- 線のGeoJSONデータを読み込み、そのデータが持つプロパティを参照して対象データ表示する ReadGeoJsonLineProperties.html 及び、 ReadGeoJsonLineProperties.js のサンプルコードです。
10. エンティティ / icon
10.1. ピンの表示
- mapray.PinEntityを使ってピンを表示する方法を説明します。
- mapray.PinEntityを使ってピンを表示する AddPin.html のサンプルコードです。このサンプルコードでは、皇居と東京駅と東京タワーにピンを表示します。
10.2. イメージアイコンの表示 (addImageIconを使った表示)
- mapray.ImageIconEntityのaddImageIconを使ってイメージアイコンを表示する方法を説明します。
- mapray.ImageIconEntityのaddImageIconを使ってイメージアイコンを表示する AddImageIcon.html のサンプルコードです。このサンプルコードでは、東京タワーにイメージアイコンを表示します。