UP | HOME

DeveloperGuide

この章では、maprayJSの利用手順や、maprayJSを使うためにはどのような知識が必要かを説明します。

1. maprayJSとは

maprayJSはWebブラウザに3次元地図をリアルタイムに表示するためのJavaScriptライブラリです。このライブラリを使うとHTML文書の特定の要素内に、任意の視点からの3D地図をレンダリングできます。

2つのレベルで開発を行うことができます。

コアライブラリ(@mapray/mapray-js
レンダリングに必要な最小構成のライブラリとなっています。
コアライブラリを直接利用する場合は、マウス操作やカメラ操作など基本機能から実装する必要があります。
ソースコードAPI
UIライブラリ(@mapray/ui
コアライブラリに加えて、一般的な地図アプリケーションのベースとなる機能が実装されたライブラリとなっています。
マウス操作やキーボード操作などが実装されているため、簡単にアプリケーションを実装することができます。
ソースコードAPI

また、UIライブラリを導入することで使えるStandardUIViewerを使えば、マウスの基本的な操作を実現できます。デフォルトの操作に操作を加えたい時は、StandardUIViewerの関数をoverrideすることで、細かな動作をカスタマイズすることができます。

1.1. 基本概念

maprayJSライブラリ(コア)の基本的な内容について解説します。
ドキュメンテーションを読む >

1.2. UIライブラリ

Mapray UIライブラリの概要と、利用手順を説明します。
ドキュメンテーションを読む >

1.3. マウス操作のカスタマイズ

StandardUIViewerのマウス操作をカスタマイズする例を示します。
ドキュメンテーションを読む >

2. 必要な知識

maprayJS APIを利用するコンテンツ開発者は、次の技術を理解している必要があります。

  • HTML5とJavaScriptによるWebアプリケーションの開発
  • ベクトルと行列の計算

Maprayエンジンの内部では3次元の位置や方向を4次元ベクトル(同次座標)で表し、その座標変換を4 × 4行列で行います。そのため一部のAPIにはベクトルや行列を扱うものが存在し、変換行列を計算するための知識がコンテンツ開発者にも必要になります。

2.1. 座標系

3Dモデルの配置に関連する座標系について説明します。
ドキュメンテーションを読む >

3. その他

QuickStartのモジュール形式で開発したアプリケーションに対して、さらにカスタマイズした例などを説明します。

3.1. 高度なトピック

maprayJSライブラリを利用した開発の高度なトピックについて説明します。
ドキュメンテーションを読む >

3.2. エンティティ

簡単なカメラ操作やエンティティの追加方法について説明します。
ドキュメンテーションを読む >

3.3. 3Dデータ

Mapray Cloudにアップロードした3Dデータを表示する例を示します。
ドキュメンテーションを読む >

3.4. 点群

Mapray Cloudとファイルサーバにアップロードした点群を表示する方法について説明します。
ドキュメンテーションを読む >