Standard UI Viewerで基本のアプリケーションを作成する¶

Mapray UI Package を導入すると、 StandardUIViewer を使用できます。これは、Mapray Core Package の Viewer を継承し、基本的な UI 操作を行うことができるものです。マウスやキーボードの基本操作について処理の記述が不要になりますので、手軽に Mapray を利用することが可能です。

今後のワークショップで共通に必要な準備¶

Mapray API Keyが必要になります。 API Keyを発行してみようで発行したAPI Keyで

 "<YOUR_MAPRAY_API_KEY>";

を書き換えてください。

StandardUIViewerで画面を表示する¶

StandardUIViewer を使ったサンプルです。 CSS は Mapray のロゴやその他のリソースを表示するために必要になります。

StandardUIViewer コンストラクタでは、3つの引数を指定します。

コンテナ - Mapray を表示する要素
API Key - Mapray のAPI Key
Viewer のオプション - Mapray Viewer のオプション（省略可能）

<!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);
    </script>
</html>

Info

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

StandardUIViewer の操作¶

マウス操作¶

操作	動作
左ドラッグ	移動
中ドラッグ	クリック点を中心に回転
右クリック + 上下ドラッグ	ズーム
Crtlキー + 左ドラッグ	カメラを中心に回転
Shiftキー + 左ドラッグ	クリック点を中心に回転
Shiftキー + 右ドラッグ	高度移動、左右移動

キーボード操作¶

操作	動作
カーソルキー上下	前進、後退
カーソルキー左右	方向回転
cキー	画角の拡大
zキー	画角の縮小
xキー	画角の初期化（60度）

オーバーライドでのカスタマイズ¶

StandardUIViewer の関数を override することで、細かな動作をカスタマイズすることができます。

開始と終了
- onStart
- onStop
画面更新
- onUpdateFrame
- onBlur
キーのイベント
- onKeyDown
- onKeyUp
マウスのイベント
- onMouseDown
- onMouseMove
- onMouseUp
- onMouseWheel