コンテンツにスキップ

Standard Viewer

Mapray UI Package は、Mapray の UI 操作を容易に行うことができる補助パッケージです。

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

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

バージョン 提供方法 アクセス方法 備考
0.9.6 CDN / npm packages API Key 実装がシンプルなため、本ドキュメントでは主にこの形で説明
0.10.x以上 ローカル配布（利用は要問い合わせ） / Github packages Access Token APIにより簡単かつセキュアに利用可能。ローカル配布版で説明を行うが、package版でも利用可能

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

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

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

このサンプルでは、オプションでMapray Cloudから提供される地形データを指定しています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="./v0.10.0/mapray.min.js"></script>
        <script src="./v0.10.0/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 access 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>"
        });

        // The StandardUIView in the ui package includes mouse-based camera manipulation.
    const uiviewer = new maprayui.StandardUIViewer( "mapray-container", {
        dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() )
        });
</script>

Info

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

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

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

  1. コンテナ - Mapray を表示する要素
  2. API Key - Mapray のAPI Key
  3. Viewer のオプション - Mapray Viewer のオプション（省略可能）
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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 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>

Info

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

プロジェクト作成

本説明では、最終的に下記のようなディレクトリ構成となります。

.
├─ dist/               ビルド後の js が出力されるディレクトリ
├─ package.json        Node の設定ファイル
├─ src/                ソースファイルのディレクトリ
├─ webpack.config.js   ビルド設定ファイル
├─ node_modules/       Node の依存ライブラリが保存されるディレクトリ
└─ package-lock.json   npm のファイル

空のディレクトリを作成し、ディレクトリ内で下記を実行します。

npm init -y
npm install webpack webpack-cli st --save-dev
npm install @mapray/ui

webpack.config.js を作成します（ webpack の設定ファイル）。

1
2
3
4
5
6
7
8
9
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

実装

src/index.js を作成します。

1
2
3
4
5
6
7
8
import maprayui from "@mapray/ui";

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

    const viewer = new maprayui.StandardUIViewer( container, apikey);
};

Info

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

package.json に対して下記のように、scripts 要素を追加します。

{
    :
    "scripts": {
        "build": "webpack --mode=production",
        "server": "st --no-cache -H 0.0.0.0 --port 7777 --index index.html -d dist"
    }
    :
}

ビルドします。

npm run build

dist/index.html を作成します。 ビルドした js ファイルを読み込み startApp() を呼び出します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript" src="./main.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 onload="window.startApp('mapray-container')">
        <div id="mapray-container"></div>
    </body>
</html>

Nodeで開発用サーバを実行する

サーバを起動します。

npm run server

http://localhost:7777 へアクセスします。

プロジェクト作成

本説明では、最終的に下記のようなディレクトリ構成となります。

.
├─ dist/               ビルド後の js が出力されるディレクトリ
├─ package.json        Node の設定ファイル
├─ src/                ソースファイルのディレクトリ
├─ rollup.config.mjs   ビルド設定ファイル
├─ node_modules/       Node の依存ライブラリが保存されるディレクトリ
└─ package-lock.json   npm のファイル

空のディレクトリを作成し、ディレクトリ内で下記を実行します。

npm init -y
npm install rollup @rollup/plugin-node-resolve rollup-plugin-postcss postcss st --save-dev
npm install @mapray/ui

rollup.config.mjs を作成します（ rollup の設定ファイル）。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import postcss from "rollup-plugin-postcss";
import pluginNodeResolve from "@rollup/plugin-node-resolve";

export default function() {

    const bundle = {
        input: "src/index.js",
        output: {
            file: "dist/bundle.js",
            format: "iife",
        },
        plugins: [
            postcss(),
            pluginNodeResolve(),
        ],
    }

    return bundle;
}

package.json の scripts を次のように編集します。

{
    :
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "rollup -c",
        "server": "st --no-cache -H 0.0.0.0 --port 7777 --index index.html --dir ./dist"
    }, 
    :
}

実装

src/index.js を作成します。 コード中の apikey には、Mapray Cloud で取得したAPI Keyを入力します。

1
2
3
4
5
6
7
8
9
import maprayui from "@mapray/ui";
import "../node_modules/@mapray/ui/dist/mapray.css";

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

    const viewer = new maprayui.StandardUIViewer( container, apikey);
};

Info

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

ビルドします。

npm run build

dist/index.html を作成します。 ビルドした js ファイルを読み込み startApp() を呼び出します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript" src="./bundle.js"></script>
        <style>
            html, body, div#mapray-container { margin: 0; padding: 0; height: 100%; }
        </style>
    </head>
    <body onload="window.startApp('mapray-container')">
        <div id="mapray-container"></div>
    </body>
</html>

Nodeで開発用サーバを起動する

サーバを起動します。

npm run server

http://localhost:7777 へアクセスします。

StandardUIViewer の操作

マウス操作

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

キーボード操作

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

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

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

  • 開始と終了

    • onStart
    • onStop

  • 画面更新

    • onUpdateFrame
    • onBlur

  • キーのイベント

    • onKeyDown
    • onKeyUp

  • マウスのイベント

    • onMouseDown
    • onMouseMove
    • onMouseUp
    • onMouseWheel