Examples

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

カメラ

• カメラポジション

  • 

    
    
  • LongitudeAndLatitudeCameraPos.html
    
  • 北岳から富士山を望みます。
    
    

• カメラアニメーション 1

  • 

    
    
  • CameraAnimation.html
    
  • 富士山の上空でカメラを回転させます。
    
    

• カメラアニメーション 2

  • 

    
    
  • CameraAnimationVer2.html
    
  • 回転させながらアングルを変更します。
    
    

• アングルの変更(30°)

  • 

    
    
  • ChangeAngleOfView30.html
    
  • カメラのアングルを30°に変えます。
    
    

• アングルの変更(60°)

  • 

    
    
  • ChangeAngleOfView60.html
    
  • カメラのアングルを60°に変えます。
    
    

• パスアニメーション

  • 

    
    
  • VirtualPathCameraAnimation.html
    
  • パスに沿ってカメラを移動します。
    
    

入力

• ジオ情報の取得
  

  • 

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

レイヤ

• レイヤを表示する

  • 

    
    
  • AddLayer.html
    
  • 標準のマップレイヤを表示します。
    
    

• レイヤの動的生成と削除

  • 

    
    
  • CreateDeleteLayerChangeOpacity.html
    
  • UIを使って標準のマップレイヤを追加、削除、透明度を変化させます。
    
    

• タイルイメージの変更

  • 

    
    
  • ChangeImageTile.html
    
  • ボタンクリックでタイルイメージを切り替えます。
    
    

エンティティ / ライン

• SceneLoaderでのライン追加

  • 

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

• ライン追加

  • 

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

• ラインの色変更

  • 

    
    
  • ChangeLineFormat.html
    
  • ボタンクリックでラインの幅と色を変えます。
    
    

• ラインアニメーション

  • 

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

エンティティ / テキスト

• SceneLoaderでのテキスト追加

  • 

    
    
  • WriteStringWithSceneLoder.html
    
  • シーンファイルからテキストをセットします。
    
    

• テキスト追加

  • 

    
    
  • WriteStringWithAddText.html
    
  • APIを使ってテキストを追加します。
    
    

• フォントスタイルの変更

  • 

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

エンティティ / glTF

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

  • 

    
    
  • LoadglTFModel.html
    
  • SceneLoaderで3Dモデルを表示します
    
    

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

  • 

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

• 3Dモデルの移動

  • 

    
    
  • glTFModelController.html
    
  • ボタンによって3Dモデルを移動、回転させます
    
    

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

  • 

    
    
  • glTFModelAnimation.html
    
  • 3Dモデルを京都御所付近の道路上に走らせます。
    
    

• 3Dモデルの高度変更

  • 

    
    
  • ChangeAltitudeMode.html
    
  • ボタンによって3Dモデルの高度を変更します。
    
    

エンティティ / geojson

• GeoJSONの読み込み

  • 

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

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

  • 

    
    
  • ChangeGeoJsonFormat.html
    
  • ボタンによってデータのプロパティを変更します。
    
    

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

  • 

    
    
  • ReadGeoJsonLineProperties.html
    
  • GeoJSONファイルを読み込み、コールバック関数内でデータのプロパティを変更します。
    
    

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

  • 

    
    
  • ReadGeoJsonLinePropertiesVer2.html
    
  • GeoJSONファイルを読み込み、コールバック関数内でデータのプロパティを変更します。
    
    

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

  • 

    
    
  • ReadGeoJsonPointProperties.html
    
  • GeoJSONファイルを読み込み、コールバック関数内でデータのプロパティを変更します。
    
    

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

  • 

    
    
  • ReadGeoJsonPointPropertiesVer2.html
    
  • GeoJSONファイルを読み込み、コールバック関数内でデータのプロパティを変更します。
    
    

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

  • 

    
    
  • ReadGeoJsonPolygonProperties.html
    
  • GeoJSONファイルを読み込み、コールバック関数内でデータのプロパティを変更します。
    
    

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

  • 

    
    
  • ReadGeoJsonPolygonPropertiesVer2.html
    
  • GeoJSONファイルを読み込み、コールバック関数内でデータのプロパティを変更します。
    
    

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

  • 

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

エンティティ / icon

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

  • 

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

• ピンを追加する

  • 

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