はじめに¶

第１章で、Mapray Cloudの使い方をマスターしたので、今度はmapray JSを使ったプログラミングをマスターしましょう。

開発環境¶

開発方法の比較

方法	本書での使用	特徴
`<script>`タグ	✅ 使用	簡単、環境構築不要
Node.js + npm	❌ 使用しない	高度、環境構築必要

Node.jsでの開発をご希望の場合は、講師にご質問ください。

今回のハンズオンでは、maprayJSのCDN版を使います。TypeScriptは使わず（npm packagesは利用しません)に説明します。よって、Visual Studio Codeなどのすぐに開発ができるエディタがあれば、参加することができます。

サーバー¶

開発時は何らかのローカルサーバーを利用すると便利です。好きな環境を用意してください。

mapray JS¶

mapray JSはバージョン0.9.6までがオープンソースライブラリとしてソニーグループのGithubで公開されています。このSDKは、非常に高速にデジタルツインをレンダリングすることができます。 Mapray Cloudで変換されたデータと連携して3次元データを表示します。今回は、 mapray JS v0.9.6を利用して、Mapray Cloudで表示していたデータを実際に表示できるように SDKの使い方をマスターしましょう。

参考資料¶

ハンズオンではAPIドキュメントを利用します。以下を参照しつつ学習を進めましょう。

Mapray 開発者向けドキュメント : Maprayの概要をはじめ、概念の説明、サンプルなど多数のコンテンツが用意されています。
maprayJS 0.9.6のAPIガイド : 本ハンズオンでは、0.9.6を利用します。Mapray 開発者向けドキュメントで検索すると、v0.10.1のAPIがヒットします。APIの仕様が若干異なったり、存在しない場合があるのでご注意ください。
Mapray Cloud API : Mapray CloudのRestAPIのReferenceです。

ライブラリ¶

npmでも配信されていますし、 Maprayが提供するサーバーでもライブラリを提供しています。今回のハンズオンでは、プログラミングの部分だけに集中したいので

構成¶

mapray JSは、

core package
ui package

の２つで構成されています。 core packageは、Maprayの核心部分で、非常に軽量で柔軟性の高いグラフィックスライブラリです。ゲームエンジン風な設計に、GISの概念を組み合わせています。 TypeScriptで実装され、classを継承することで機能を柔軟に拡張することができます。

一方ui packageは、リアルタイムコンピュータグラフィックス特有の複雑なカメラ操作などが簡単にできたりユーティリティ的な機能を実装するレイヤーになります。

基本的にはui packageを使って基本画面を作成して、細かい操作をするときにcore packageにアクセスする使い方を慣れないうちは推奨しています。

動作の基本¶

maprayJSはブラウザの描画側を全て担当しています。様々なデータを扱うことができますが、容量が大きくて、一般的に処理コストがかかるものは、 Mapray Cloudで事前にmaprayJSに最適化されたデータを生成します。事前にデータ変換するデータはMapray Cloudにアクセスする必要があります。

事前にデータ変換するデータ¶

Point Cloud Dataset
Building Dataset
Tileset Dataset
Vector Tiles Dataset
DEM Dataset
地形
2D Dataset (GeoJSON以外)

変換不要なデータ¶

2D Dataset (GeoJSON)
3D Dataset

Mapray Cloudへのアクセス¶

アクセスにはAPI KeyかOrganization Tokenを Mapray Cloudで発行する必要があります。 API Keyの方がシンプルですが、アクセス権限を付与したい場合は、Organization Tokenを利用します。