Core Viewer¶

Core Viewer (mapray.Viewer) は canvas 要素に対し描画を行うクラスです。コンストラクタ引数で指定された div 要素配下に canvas 要素を生成し描画を行います。

Tips

mapray.Viewer は、3D地図の描画に必要な最低限の機能のみで構成されており、マウス操作やカメラコントロールなど多くの機能を実装する必要があります。一般的なマウス操作やキーボード操作、カメラ制御で良い場合は、それらが実装された StandardUIViewer を利用することで容易に開発を行うことができます。マウス操作やカメラ制御など基本的な動作をカスタマイズしたい場合などに mapray.Viewer を直接利用します。

サンプル¶

Mapray JS のパッケージファイルを HTML ファイルに直接読み込む方式（CDN 方式）と npm パッケージでモジュールとして読み込む方式（以下モジュール方式）について説明します。

緯度 \(0^\circ\)、経度 \(0^\circ\)、高度 \(20,000 \mathrm{km}\) の位置から地球の中心方向を見るサンプルコードです。

Info

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

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

Local Latest Version CDN 0.9.6Module bundler (webpack)Module bundler (rollup)

CSS は Mapray のロゴやその他のリソースを表示するために必要になります。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="./v0.10.0/mapray.min.js"></script>
        <link rel="stylesheet" href="./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 access token, which can be created in Mapray Cloud.
    const cloudApi = new mapray.cloud.CloudApiV2({
        tokenType: mapray.cloud.CloudApi.TokenType.API_KEY,
        token: "<YOUR_MAPRAY_API_KEY>"
    });

    const viewer = new mapray.Viewer( "mapray-container", {
        image_provider: new mapray.StandardImageProvider( {
            url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/",
            format: "jpg",
            min_level: 2,
            max_level: 18,
        }),
        dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() )
    } );

    const camera = viewer.camera;
    const point = new mapray.GeoPoint( 0, 0, 20000000 );
    camera.view_to_gocs = point.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
    camera.near = 300000;
    camera.far  = 30000000;
</script>

Info

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

CSS は Mapray のロゴやその他のリソースを表示するために必要になります。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://resource.mapray.com/mapray-js/v0.9.6/mapray.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>";

    const viewer = new mapray.Viewer( "mapray-container", {
        image_provider: new mapray.StandardImageProvider( {
            url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/",
            format: "jpg",
            min_level: 2,
            max_level: 18,
        }),
        dem_provider: new mapray.CloudDemProvider( apikey )
    } );

    const camera = viewer.camera;
    const point = new mapray.GeoPoint( 0, 0, 20000000 );
    camera.view_to_gocs = point.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
    camera.near = 300000;
    camera.far  = 30000000;
</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/mapray-js

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

const path = require('path');

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

実装

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

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

window.startApp = container => {

    // Set up your access token, which can be created in Mapray Cloud.
    const cloudApi = new mapray.cloud.CloudApiV2({
        tokenType: mapray.cloud.CloudApi.TokenType.API_KEY,
        token: "<YOUR_MAPRAY_API_KEY>"
    });

    const viewer = new mapray.Viewer( container, {
        image_provider: new mapray.StandardImageProvider( { url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", format: "jpg", min_level: 2, max_level: 18 } ),
        dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() )
    } );

    const camera = viewer.camera;
    const point = new mapray.GeoPoint( 0, 0, 20000000 );
    camera.view_to_gocs = point.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
    camera.near = 300000;
    camera.far  = 30000000;
};

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() を呼び出します。

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

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 st --save-dev
npm install @mapray/mapray-js

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

import pluginNodeResolve from "@rollup/plugin-node-resolve";

export default function() {

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

    return bundle;
}

package.json の scripts 要素内に下記のようにコマンドを追加します。

{
    :
    "scripts": {
        "build": "rollup -c",
        "server": "st --no-cache -H 0.0.0.0 --port 7777 --index index.html --dir ./dist"
    }, 
    :
}

実装

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

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

window.startApp = container => {

    // Set up your access token, which can be created in Mapray Cloud.
    const cloudApi = new mapray.cloud.CloudApiV2({
        tokenType: mapray.cloud.CloudApi.TokenType.API_KEY,
        token: "<YOUR_MAPRAY_API_KEY>"
    });

    const viewer = new mapray.Viewer( container, {
        image_provider: new mapray.StandardImageProvider({
            url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/",
            format: "jpg",
            min_level: 2,
            max_level: 18,
        }),
        dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() )
    } );

    const camera = viewer.camera;
    const point = new mapray.GeoPoint( 0, 0, 20000000 );
    camera.view_to_gocs = point.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
    camera.near = 300000;
    camera.far  = 30000000;
};

Info

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

ビルドします。

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>

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

サーバを起動します。

npm run server

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