点群

ここでは、Mapray Cloudにアップロードして点群を表示する方法と、ファイルサーバに点群データをアップロードして点群を表示する方法について説明します。

1. 点群（Mapray Cloud）

Mapray Cloudへファイルをアップロードして点群を表示する方法について説明します。

1.1. 点群のアップロード

Mapray Cloudの点群データセットページからアップロードします（解説ページ）。

現在 las 形式に対応しています。バージョン1.2, 1.3の色付き点群に対応しています。

1.2. 点群の表示

src/index.js を下記のように修正します。

ACCESS_TOKEN に取得したMapray Cloudトークンを指定します。
USER_ID にユーザIDを指定します。
datasetId にアップロードしたデータセットのIDを指定します。

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

const ACCESS_TOKEN = "MTU*************************************";
const USER_ID = "567*************";

window.startApp = id => {
  const stdViewer = new maprayui.StandardUIViewer(id, ACCESS_TOKEN);

  const maprayApi = new mapray.cloud.CloudApiV1({
    basePath: "https://cloud.mapray.com",
    version: "v1",
    userId: USER_ID,
    token: ACCESS_TOKEN,
  });

  const datasetId = "573*************";
  const resource = maprayApi.getPointCloudDatasetAsResource( datasetId );

  const pointCloudProvider = new mapray.RawPointCloudProvider( resource );
  const pointCloud = stdViewer.viewer.point_cloud_collection.add( pointCloudProvider );

  // 点群位置にカメラを移動します
  maprayApi.getPointCloudDataset( datasetId )
    .then(dataset => {
      const bbox = dataset.bbox;
      stdViewer.startFlyCamera({
        time: 3.0,
        iscs_end: new mapray.GeoPoint(
          (bbox[0] + bbox[3])/2,
          (bbox[1] + bbox[4])/2,
          (bbox[2] + bbox[5])/2,
        ),
        end_altitude: 100,
        end_from_lookat: 100,
      });
    });
};

1.3. 実行結果

2. 点群（Static File Server）

Mapray Cloudを使わず、ファイルサーバに点群データをアップロードして点群を表示する方法について説明します。（現時点でこの方法は一般的に公開されている方法ではないため、通常のドキュメントには記載されていない方法となります。）

2.1. 点群データの準備

点群データの生成方法については別途資料をご確認ください。点群データは下記のような構成になっています。

- Root
  |-- info.json
  |-- 0
  |-- 1
  |-- 2
  |-- 3
  |   :
  '-- 4

ルートディレクトリに info.json があり点群タイルに関する情報が含まれています。この構成のままサーバへアップロードします。

下記のURLにアクセスすることで上記 info.json へアクセスできるものとして以降の説明をします。

http://localhost:8888/point-data/info.json

2.2. 点群の表示

src/index.js を下記のように修正します。

ACCESS_TOKEN に取得したMapray Cloudトークンを指定します。

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

const ACCESS_TOKEN = "MTU*************************************";

window.startApp = id => {
  const stdViewer = new maprayui.StandardUIViewer(id, ACCESS_TOKEN);

  const resource = new mapray.URLResource("http://localhost:8888/point-data/info.json");

  const pointCloudProvider = new mapray.RawPointCloudProvider( resource );
  const pointCloud = stdViewer.viewer.point_cloud_collection.add( pointCloudProvider );

  // 点群位置にカメラを移動します
  resource.load({ type: mapray.Resource.ResourceType.JSON })
    .then(info => {
      const bbox = info.bbox;
      stdViewer.startFlyCamera({
        time: 3.0,
        iscs_end: new mapray.GeoPoint(
          (bbox[0] + bbox[3])/2,
          (bbox[1] + bbox[4])/2,
          (bbox[2] + bbox[5])/2,
        ),
        end_altitude: 300,
        end_from_lookat: 100,
      });
    });
};

2.3. 実行結果

Mapray Cloudを使う場合と同様に下記のように表示されます。

pointCloud への操作はMapray Cloudを使う場合と同様に行うことができます。

3. 点群表示の変更

読み込む点群を細かくする例（デフォルトは0.7です）。

pointCloud.setPointsPerPixel(1.0);

読み込む点群の描画形状やサイズを変更する例。

pointCloud.setPointShape(mapray.PointCloud.PointShapeType.GRADIENT_CIRCLE);
pointCloud.setPointSizeType(mapray.PointCloud.PointSizeType.PIXEL);
pointCloud.setPointSize(10);

より詳細な例はデバッグ用コードをご参照ください。

4. 点群が地形と重なる問題について

点群が地形より下にある場合に点群を確認することができなくなることがあります。暫定的な対処方法として地形を非表示にすることで点群を見える状態にできます。

stdViewer.viewer.render_mode = mapray.Viewer.RenderMode.WIREFRAME;