Examples

maprayJSのサンプルコードです。mapray cloudで取得したアクセストークンをプログラムに埋め込むことで以下のサンプルを手軽に動作させることができます。

カメラ

• カメラポジション

  • 

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

• カメラアニメーション

  • 

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

• カメラアニメーション

  • 

    
    
  • 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でのテキスト追加

  • 

    
    
  • WriteStringWithSceneLoader.html
    
  • シーンファイルによってテキストをセットします。
    
    

• テキスト追加

  • 

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

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

  • 

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

エンティティ / モデル

• SceneLoaderでの3Dモデル追加

  • 

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

• 3Dモデルの移動

  • 

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

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

  • 

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