Getting Started¶

Mapray Cloud と Mapray JS を使用した、最小構成の地図アプリケーションを作成するまでを説明します。

API Key の作成¶

最初に Mapray Cloud のリソースへアクセスするために必要な API Key を作成します。

「Tokens」ページの、「API Key」タブから、「New API Key」ボタンをクリックします。
ダイアログが表示されたら、任意の名前を入力して「OK」ボタンをクリックします。
作成に成功したら、下記のようにメッセージが表示され、リストに新しい項目が追加されます。
ここで作成した API Key は後述の手順で利用します。

3Dデータのアップロード¶

続いて、 3Dデータを Mapray Cloud にアップロードします。
アップロードするデータは、mapray_box.zipをご利用ください。

「Datasets」ページの、「3D」タブから、「New 3D Dataset」ボタンをクリックします。

ダイアログが表示されたら、必要事項を入力します。
入力が完了したら「OK」ボタンをクリックします。

プロパティ	値
Name	mapray box
Description	mapray box
File Type	`gltf`
Origin	`Longitude`: `138.62`, `Latitude`: `35.44`, `Altitude`: `1800`
Files	`mapray_box.zip`を解凍して得られた`mapray_box`ディレクトリを選択してください。
Path	`/mapray_box/box.gltf`

datasets-3d_02

アップロードに成功したら、下記のようにメッセージが表示され、リストに新しい項目が追加されます。
アップロードしたデータセットの ID は後述の手順で利用します。

アプリケーションの実装¶

最小構成の地図アプリケーションを作成します。完成するとお使いの Web ブラウザ内に地球と先ほどアップロードした3Dデータが表示されます。
Mapray JS を使ったアプリケーション開発は JavaScript ファイルを <script> で直接読み込む方式（以下 CDN 方式）と、npm パッケージでモジュールとして読み込む方式（以下モジュール方式）のどちらかを選択できます。以下では、webpackを使ったモジュール方式で説明します。 CDN 方式と rollup を使用したモジュール方式での実装については、 Mapray JS の Getting Startedページを参照してください。

モジュール方式（webpack）¶

事前準備¶

以下のツールが必要になりますので、あらかじめインストールしておきます。

node
npm

プロジェクト作成¶

本説明では、最終的に下記のようなフォルダ構成となります。

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

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

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

package.json が生成され、 node_modules ディレクトリ内に mapray 及びビルドツールなどがインストールされます。

続いて、 webpack.config.js を作成します。

const path = require('path');

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

実装¶

src/index.js を作成します。 API_KEY に作成した API Key を指定します。
ID は3Dデータアップロード時に確認したデータセットID に変更してください。

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

const API_KEY = "<your api key here>";
const ID = "<your dataset id here>";

window.startApp = id => {
  const stdViewer = new maprayui.StandardUIViewer(id, API_KEY);
  const maprayApi = new mapray.cloud.CloudApiV2({
    tokenType: mapray.cloud.CloudApi.TokenType.API_KEY,
    token: API_KEY,
  });
  const resource = maprayApi.get3DDatasetAsResource([ID]);
  const loader = new mapray.SceneLoader(stdViewer.viewer.scene, resource, {
    onEntity: (loader, entity, prop) => {
      stdViewer.addEntity(entity);
    }
  });
  loader.load();
};

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

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

ビルドします。

npm run build

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

<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript" src="./bundle.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>

開発用サーバの起動¶

サーバを起動します。

npm run server

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

getting-started-viewer

カメラの操作方法¶

動作	操作
PAN	Left mouse button drag
ZOOM	Mouse Wheel or Right mouse button drag
ROTATE	Shift key + Left mouse button drag or Middle mouse button drag
ALTITUDE	Shift key + Right mouse button drag
ROTATE HEADING	Ctrl key + Left mouse button drag
CHANGE FOV	Z key: Increase, C key: Decrease, X key: Reset
FLIGHT VIEW	Arrow key