Camera操作を理解する¶

ここでは、StandardUIViewer のカメラの位置や姿勢を指定する方法をマスターします。カメラの位置をデフォルトの富士山周囲から大阪上空に移動してみます。

事前準備¶

Mapray API Keyを事前にMapray Cloudで取得してください。

利用するAPI¶

メソッド	動作
setCameraAngle	カメラ方向の設定
setCameraPosition	カメラ位置の設定
setLookAtPosition	注視点の設定

カメラの位置を移動する¶

setCameraPosition でカメラを特定の位置にして、 setLookAtPosition で注視する位置を指定するサンプルです。

カメラの位置と注視点から自動的にカメラの姿勢が決定されます。カメラの位置姿勢が決まったあとはマウスやキーボードで StandardUIViewer の操作によってカメラ位置を動かすことができます。

前回のコードからハイライト部分を追加してください。

<!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>

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

        // The StandardUIView in the ui package includes mouse-based camera manipulation.
        const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey);

        uiviewer.setCameraPosition({
            longitude: 138.942423,
            latitude: 35.236020,
            height: 10000
        });
        uiviewer.setLookAtPosition({
            longitude: 138.729802,
            latitude: 35.363965,
            height: 3000
        });

    </script>
</html>

Info

このサンプルの方法以外にも setCameraPosition でカメラを特定の位置にして、 setCameraAngle でカメラの姿勢を指定する方法もあります。余裕があれば、SetLookAtPositionの代わりにsetCameraangleを使ってみて、カメラの動きを学習しましょう

画角の変更¶

StandardUIViewer ではデフォルトは 60度に設定されており、コンストラクタの StandardUIViewer.Option の中の CameraParameterOption で変更することができます。

const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey, {
    camera_parameter: { fov: 30 }
});

起動時ではなく、途中で変更したい場合は、キーボード操作に合わせてsetCameraAngleを使います。