プログラミングモデル¶
ここでは、 Mapray JS を利用してアプリケーションを開発する際に必要な概念を説明します。
名前空間とクラス¶
Mapray JS API は TypeScript で実装されています。このため、以下の説明は TypeScript の仕様に準拠します。
Mapray JS API はすべて mapray 名前空間に属しています。
たとえば mapray 名前空間に含まれる Viewer クラスは、 mapray.Viewer のような記述で説明します。
import mapray from "@mapray/mapray-js";
上記のようにパッケージをインポートした場合、次のような TypeScript での記述で mapray.Viewer クラスのインスタンスを生成できます。
const viewer = new mapray.Viewer(...);
このとき、 viewer 変数に代入されたオブジェクトは、概念上 mapray.Viewer クラスのインスタンスです。
そのため、 mapray.Viewer クラスのインスタンスメソッド mapray.Viewer.getElevation() を次のように呼び出すことができます。
viewer.getElevation(...);
Viewer¶
最初に、コンテンツ開発者は、 Mapray エンジンが canvas 要素を配置するための親要素（div 要素など）を HTML 文書上に準備する必要があります。
Mapray エンジンの Viewer にその要素を指定すると、常にその親要素全体に canvas 要素を広げて表示します。
Mapray は Core Viewer が基本的な描画を行うクラスとなっており、容易に UI 操作を取り扱うことができる Standard Viewer も用意しています。
基本的な動作は Standard Viewer を利用することで賄うことができますが、内部的な動作として Mapray への理解を深めて複雑なプログラミングを行う場合は、 Core Viewer はぜひご理解いただきたい内容です。
詳細は下記を参照してください。
データプロバイダ¶
Mapray エンジンはレンダリング時に地表の形状や地図画像のデータを、インターネットなど外部から取得します。
デフォルトの地表の形状（DEM データ）は Mapray Cloud から提供されます。
最初に利用する画像プロバイダは、国土地理院の 標準地図 をおすすめしています。
ライセンス登録の必要がなく、 GIS で頻繁に利用されるタイル URL 形式に準拠しており、最初の利用には便利です。
地図画像データを指定するときは Viewer コンストラクタの image_provider オプションに ImageProvider の実装クラスのインスタンスを指定します。
Core Package では ImageProvider の実装クラスとして StandardImageProvider を用意しています。
画像プロバイダの詳細については Image Layer をご覧ください。
Core Package が用意している StandardImageProvider はサイト認証などの機能がないので、これらだけでは不十分なことがあります。
その場合、 ImageProvider のサブクラスとして独自の Provider をコンテンツ開発者が実装する必要があります。
独自の Provider については Original Provider をご覧ください。