Tutorials

Tutorials

カメラ

  • 1.1. 緯度経度によるカメラ位置の指定


    • 緯度経度を指定してカメラ位置を指定する方法を説明します。
    • Mapray.Viewerクラスのカメラ位置を緯度・経度で指定するLongitudeAndLatitudeCameraPos.htmlサンプルコードです。このサンプルコードでは日本で2番目に標高の高い北岳付近から、最も標高の高い富士山を眺めています。

  • 1.2.1 カメラのアニメーション(1)


    • 動的にカメラの姿勢を変更するアニメーションを作成する方法を説明します。
    • 動的にカメラの姿勢を変更するアニメーションを作成する CameraAnimation.html のサンプルコードです。
      このサンプルコードでは、富士山を中心にカメラが360度回転します。

  • 1.2.2 カメラのアニメーション(2)


    • カメラのアニメーションの改修
    • 見る場所を富士山頂から大阪城にして、カメラの画角を動的に変更します。

  • 1.3. 画角の変更


    • カメラの画角を変更する方法を説明します。
    • mapray.Viewerクラスの画角を指定する ChangeAngleOfView30.html のサンプルコードです。このサンプルコードでは、画角を30度に設定し、日本で2番目に標高の高い北岳付近から1番目に標高の高い富士山を眺めています。

  • 1.4. パスに沿ったカメラアニメーション


    • 仮想的なパスに沿ってカメラをアニメーションさせる方法を説明します。
    • 仮想的なパスに沿ってカメラをアニメーションさせる VirtualPathCameraAnimation.html 及びVirtualPathCameraAnimation.js のサンプルコードです。
      このサンプルコードでは、皇居、東京タワー、東京スカイツリー、東京ドーム、皇居の順に各地を結ぶ仮想パスに沿ってカメラが移動します。

  • 2.1. マウス操作によるカメラ操作及び指定位置の緯度・経度の取得


    • マウス操作でカメラの操作や指定した位置の緯度・経度を取得する方法を説明します。
    • マウス操作でカメラの操作や指定した位置の緯度・経度を取得するCameraControlWithMouse.html及び2つのJavascriptファイルのサンプルコードです。JavaScriptファイルは、マウスの入力検知を行うCheckInputKeyAndMouse.jsとカメラ操作及び指定位置の緯度・経度を取得するCameraControlWithMouse.jsの2種類です。

  • 3.1. レイヤの表示


    • レイヤを表示する方法を説明します。
    • レイヤを表示する AddLayer.html のサンプルコードです。このサンプルコードでは、東京ドーム付近の地図に国土地理院の標準地図を重ねて表示します。


  • 3.2. レイヤの動的追加、削除と不透明度の変更


    • 動的にレイヤを追加、削除する方法とレイヤの不透明度を変更する方法を説明します。
    • 動的にレイヤを追加、削除し、レイヤの不透明度を変更する CreateDeleteLayerChangeOpacity.html 及び CreateDeleteLayerChangeOpacity.js のサンプルコードです。

  • 4.1. ベース地図の変更


    • ベース地図を変更する方法を説明します。
    • ベース地図を変更する ChangeImageTile.html 及び ChangeImageTile.js のサンプルコードです。
      このサンプルコードでは、ベース地図を変更するコンボボックスの状態によって、ベース地図を国土地理院の標準地図と国土地理院の写真に切り替えます。

  • 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.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.1. モデルの表示(SceneLoaderを使った表示)


    • mapray.SceneLoaderを使って3Dモデルを表示する方法を説明します。
    • mapray.SceneLoaderを使って3Dモデルを表示する Load3DModel.html 及び Load3DModel.js のサンプルコードとシーンファイルです。
      このサンプルコードでは、京都御所沿いの道路にバスを北向きに表示します。

  • 7.2. モデルの移動・回転


    • ユーザインタフェースを介して、3Dモデルを移動・回転させる方法を説明します。
    • ユーザインタフェースを介して、3Dモデルを移動・回転させる ModelController.html 及びModelController.js のサンプルコードです。サンプルコードで利用するシーンファイルについては、ヘルプページ『7.1. モデルの表示(SceneLoaderを使った表示)』を参照してください。
      このサンプルコードでは、対応するボタンを操作することで、前進、後進、左90度回転、右90度回転ができます。

  • 7.3. モデルのアニメーション


    • 動的に3Dモデルの位置・向きを変更するアニメーションを作成する方法を説明します。
    • 動的に3Dモデルの位置・向きを変更するアニメーションを作成する ModelAnimation.html 及び ModelAnimation.js のサンプルコードです。サンプルコードで利用するシーンファイルについては、ヘルプページ『7.1. モデルの表示(SceneLoaderを使った表示)』を参照してください。
      このサンプルコードでは、3Dモデルが京都御所沿いの道路を北上したのち、西向きに向きを変え、さらに西進するアニメーションを表現します。