カメラ操作¶

ここでは、StandardUIViewer のカメラの位置や姿勢を指定する方法を示します。

メソッド¶

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

サンプルソース¶

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

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

Info

Mapray JSには提供方法で複数のバージョンがあります。 Latest VersionではAccess Tokenを簡単に利用できるAPIを準備しているため、そちらのAPIの利用をおすすめしていますので、 Local Latest Versionにサンプルを掲載します。

バージョン	提供方法	アクセス方法	備考
0.9.6	CDN / npm packages	Organization Token	地形データの取得に `StandardDemProvider` で Organization Token を指定する。本ドキュメントでは主にこの形で説明
0.10.x以上	ローカル配布（利用は要問い合わせ） / Github packages	Access Token	APIにより簡単かつセキュアに利用可能。ローカル配布版で説明を行うが、package版でも利用可能

Local Latest Version CDN 0.9.6Module bundler

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="./v0.10.6/mapray.min.js"></script>
        <script src="./v0.10.6/maprayui.min.js"></script>
        <link rel="stylesheet" href="./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 Organization Token, which can be created in Mapray Cloud.
    const cloudApi = new mapray.cloud.CloudApiV2({
        tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
        token: "<YOUR_MAPRAY_ACCESS_TOKEN>"
        });
    const uiviewer = new maprayui.StandardUIViewer( "mapray-container", {
        dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() )
        });

    uiviewer.setCameraPosition({
        longitude: 135.432127,
        latitude: 34.65652,
        height: 60.0
    });

    uiviewer.setLookAtPosition({
        longitude: 135.432127,
        latitude: 34.658,
        height: 10
    });
</script>

Info

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

<!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 Organization Token, which can be created in Mapray Cloud.
    const accessToken = "<YOUR_MAPRAY_ACCESS_TOKEN>";

    const uiviewer = new maprayui.StandardUIViewer( "mapray-container", accessToken, {
        dem_provider: new mapray.StandardDemProvider( {
            prefix:  "https://tiles.mapray.com/dem/",
            headers: { Authorization: "Bearer " + accessToken }
        } )
    } );

    uiviewer.setCameraPosition({
        longitude: 135.432127,
        latitude: 34.65652,
        height: 60.0
    });

    uiviewer.setLookAtPosition({
        longitude: 135.432127,
        latitude: 34.658,
        height: 10
    });
</script>

Info

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

import mapray from "@mapray/mapray-js";
import maprayui from "@mapray/ui";

// Set up your Organization Token, which can be created in Mapray Cloud.
const accessToken = "<YOUR_MAPRAY_ACCESS_TOKEN>";

window.startApp = id => {
    const uiviewer = new maprayui.StandardUIViewer( id, accessToken, {
        dem_provider: new mapray.StandardDemProvider( {
            prefix:  "https://tiles.mapray.com/dem/",
            headers: { Authorization: "Bearer " + accessToken }
        } )
    } );

    uiviewer.setCameraPosition({
        longitude: 135.432127,
        latitude: 34.65652,
        height: 60.0
    });

    uiviewer.setLookAtPosition({
        longitude: 135.432127,
        latitude: 34.658,
        height: 10
    });

};

Info

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

このサンプルの方法以外にも setCameraPosition でカメラを特定の位置にして、 setCameraAngle でカメラの姿勢を指定する方法もあります。

画角の変更¶

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

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

setCameraParameter メソッドで、StandardUIViewer 生成後に変更することもできます。