位置・高さの取得¶

地形の問い合わせ¶

コンテンツでマウスなどのインタラクティブ操作を実現するとき、地形に合わせてカメラを動かしたいことがあります。

たとえばカメラが地表の下に移動しないようにするため、カメラの真下の地表の標高を知ることにより、その場所よりも高い場所にカメラ位置を調整できます。また、マウスのドラッグにより地表を掴んで動かすイメージの操作を実現するとき、ドラッグ開始時のマウスカーソル位置に表示されている地表の位置を知ることにより、カメラ位置を計算できます。

Mapray JS API では、DEM データから地形の情報を取得するために次のメソッドを用意しています。

Viewer.getElevation( lat, lon )
Viewer.getRayIntersection( ray )

Viewer.getElevation() は引数に緯度と経度を与えて、その地点の標高を取得します。 Viewer.getRayIntersection() は引数にレイ（始点と方向）を与えて、そのレイと地表が交差する最も近い点の座標（GOCS）を取得します。

Mapray のシーンが表示されているキャンバス上のある点に対応するレイは、次のメソッドにより取得できます。

Camera.getCanvasRay( cpos, oray )

精度に関する注意点¶

Viewer.getElevation() と Viewer.getRayIntersection() により得られる値は、その時の状況により精度が変化します。これは現在メモリ内に存在するもっとも精度が高い DEM データを使い、即時に値を計算しているからです。

Viewer.getElevation() は、さらに詳細な DEM データが DemProvider により取得することができる場合、そのデータをリクエストします。そのため、時間を置いてこのメソッドを呼び出すと、さらに正確な値を得られることがあります。

これに対し、 Viewer.getRayIntersection() は新たに DEM データをリクエストしません。このメソッドは基本的に、現在画面に表示されている場所が対象になり、一般的に近くに表示されている部分は精度が高く、遠くに表示されている部分は精度が低くなります。

クリック位置の情報取得¶

画面をクリックした時にその位置の地表面や Entity の情報を得るには Viewer.pick() を使用します。引数にはスクリーン位置（キャンバス左上を原点としたピクセル座標）を指定します。

StandardUIViewer を継承してマウスイベントをオーバライドすることで、容易にクリックした位置の情報を取得できます。

取得した情報¶

Viewer.pick() は Viewer.PickResult または undefined を返します。クリック位置に地表面や Entity 等の情報がない場合 undefined となります。

PickResult の主な情報は以下の通りとなります。

プロパティ	内容
b3d_scene	ピックした B3d オブジェクトのインスタンス（ピック位置に B3d がない場合は `undefined` になります）
category	ピックしたオブジェクトの種類（ `PickResult.Category` ）
distance	ピックした位置までの距離 [m]
entity	ピックしたエンティティ（ピック位置にエンティティがない場合は `undefined` になります）
point_cloud	ピックした点群（ピック位置に点群がない場合は `undefined` になります）
position	ピックした位置（GOCS）

`PickResult.Category`	内容
B3D_SCENE	B3D シーン
ENTITY	エンティティ
GROUND	地表面（レイヤーも含む）
POINT_CLOUD	点群
VECTILE	ベクトルタイル

サンプルソース¶

クリックした位置の PickResult と PickResult.position から変換した球面座標位置をコンソールに表示するサンプルです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://resource.mapray.com/mapray-js/v0.9.6/mapray.min.js"></script>
        <script src="https://resource.mapray.com/ui/v0.9.6/maprayui.min.js"></script>
        <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
        <style>
            html, body, div#mapray-container { margin: 0; padding: 0; height: 100%; }
        </style>
    </head>

    <body>
        <div id="mapray-container"></div>
    </body>
</html>

<script>
    // Set up your API Key, which can be created in Mapray Cloud.
    const apikey = "<YOUR_MAPRAY_API_KEY>";

    class CustomViewer extends maprayui.StandardUIViewer {
        onMouseDown( point, event ) {
            const pickResult = this.viewer.pick( point );

            if ( pickResult ) {
                console.log( "pickResult: ", pickResult );
                const point = new mapray.GeoPoint();
                point.setFromGocs( pickResult.position );
                console.log( "pick point: ", point );
            }

            super.onMouseDown( point, event );
        }
    }

    const uiviewer = new CustomViewer( "mapray-container", apikey);
</script>

Info

このサンプルコードは、<YOUR_MAPRAY_API_KEY>を、あなたのMapray CloudアカウントのAPI Keyに置き換えるまで、期待通りに動作しません。