UP | HOME

Examples

maprayJSのサンプルコードです。mapray cloudで取得したアクセストークンをプログラムに埋め込むことで以下のサンプルを手軽に動作させることができます。このページの各画像サムネイルをクリックすると実際に動作しているデモをご覧いただけます。

1. カメラ

カメラポジション

カメラアニメーション 1

カメラアニメーション 2

アングルの変更(30°)

アングルの変更(60°)

パスアニメーション

2. 入力

ジオ情報の取得

  • CameraControlWithMouse.png
  • CameraControlWithMouse.html
  • 富士山の周辺でマウスを使ってビューポイントを動かし、その位置の緯度経度と高度を取得します。

3. レイヤ

レイヤを表示する

レイヤの動的生成と削除

タイルイメージの変更

4. エンティティ / ライン

SceneLoaderでのライン追加

  • LoadLineScene.png
  • LoadLineScene.html
  • シーンファイルとAPIでラインの属性をセットします。

ライン追加

  • AddLine.png
  • AddLine.html
  • 皇居と東京タワーの間にラインを引きます。

ラインの色変更

ラインアニメーション

  • LineAnimation.png
  • LineAnimation.html
  • 皇居、東京タワー、スカイツリー、東京ドームの間を曲線でつなぎます。

5. エンティティ / テキスト

SceneLoaderでのテキスト追加

テキスト追加

フォントスタイルの変更

  • ChangeFontFormat.png
  • ChangeFontFormat.html
  • フォントスタイル、ウェイト、サイズ、カラー、フォントファミリーをボタンで変更します。

6. エンティティ / glTF

SceneLoaderでの3Dモデル(glTF)追加 1

SceneLoaderでの3Dモデル(glTF)追加 2

  • LoadglTFModelVer2.png
  • LoadglTFModelVer2.html
  • SceneLoaderで3Dモデルを表示し、offset_transformで位置を変更します。

3Dモデルの移動

3Dモデルのアニメーション

3Dモデルの高度変更

7. エンティティ / geojson

GeoJSONの読み込み

  • LoadGeoJSON.png
  • LoadGeoJSON.html
  • GeoJSONLoaderを使っててGeoJSONを読み込み、表示します。

データのプロパティを変更する

GeoJSONのラインのプロパティを読む 1

GeoJSONのラインのプロパティを読む 2

GeoJSONのポイントのプロパティを読む 1

GeoJSONのポイントのプロパティを読む 2

GeoJSONのポリゴンのプロパティを読む 1

GeoJSONのポリゴンのプロパティを読む 2

GeoJSONのポリゴンで資産価値を可視化する

  • ExtrudePolygonProperties.png
  • ExtrudePolygonProperties.html
  • バンクーバー市街地の資産価値をポリゴンで可視化します。高さは面積あたりの価値で、赤いものは上昇率の高いものです。

8. エンティティ / icon

イメージアイコンを追加する

  • AddImageIcon.png
  • AddImageIcon.html
  • イメージアイコン エンティティを読み込み、表示します。

ピンを追加する

  • AddPin.png
  • AddPin.html
  • ピンにエンティティを追加して、表示します。

9. アニメーション

ピンアニメーション1

ピンアニメーション2

ピンアニメーション3

  • AnimePinCurveCombo.png
  • AnimePinCurveCombo.html
  • 左クリックした場所にピンが作成され、ピンが上下に動くアニメーションです。

ピンアニメーション4

  • AnimePinCurveText.png
  • AnimePinCurveText.html
  • 左クリックした場所にピンが作成され、ピン内で数字がカウントアップするアニメーションです。

ピンアニメーション5

  • AnimePinLinear.png
  • AnimePinLinear.html
  • ピンのサイズと色が線形に変わるアニメーションです。

ピンアニメーション6

  • AnimePinStep.png
  • AnimePinStep.html
  • ピンのサイズと色が階段状に変わるアニメーションです。