Point Cloud¶

Mapray JS は Mapray Cloud へアップロードした点群データを表示することができます。

Mapray Cloud へのアップロード¶

サンプルコード¶

Mapray Cloud からデータを取得するには CloudApiV2 を利用します。

CloudApiV2 の getPointCloudDatasetAsResource に利用したいデータセットの ID を指定することで、 Mapray Cloud を利用するためのリソースが取得できます。

このリソースを StandardPointCloudProvider のコンストラクタに指定することで、データプロバイダが作成され、それを Viewer の point_cloud_collection.add に指定することで、点群が表示されます。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://resource.mapray.com/mapray-js/v0.9.6/mapray.min.js"></script>
        <script src="https://resource.mapray.com/ui/v0.9.6/maprayui.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>
    async function main() {
        // Set up your apikey, which can be created in Mapray Cloud.
        const apikey = "<YOUR_MAPRAY_API_KEY>";

        // The StandardUIViewer in the ui package includes mouse-based camera manipulation.
        const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey);

        // Change rendermode to wire frame.
        // uiviewer.viewer.render_mode = mapray.Viewer.RenderMode.WIREFRAME;

        const maprayApi = new mapray.cloud.CloudApiV2({
            tokenType: mapray.cloud.CloudApi.TokenType.API_KEY,
            token: apikey
        });

        const datasetId = "5112306723717120";
        const resource = maprayApi.getPointCloudDatasetAsResource( datasetId );

        const provider = new mapray.StandardPointCloudProvider( resource );
        const point_cloud = await uiviewer.viewer.point_cloud_collection.add( provider );
w
        // Change the point cloud parameters.
        // point_cloud.setPointShape( mapray.PointCloud.PointShapeType.GRADIENT_CIRCLE );
        // point_cloud.setPointSizeType( mapray.PointCloud.PointSizeType.PIXEL );
        // point_cloud.setPointSize( 10 );

        // Move camera to the point of dataset.
        uiviewer.startFlyCamera({
            time: 3.0,
            iscs_end: new mapray.GeoPoint( 137.72484317430775, 34.7117398130867, 0 ),
            end_altitude: 10,
            end_from_lookat: 250,
            target_clamp: false
        });
    }

    main();
</script>

Info

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

Info

datasetIdは、あなたがアップロードしたデータセットのIDに置き換えて下さい。

Warning

point_cloud_collection.add は非同期で処理されるため、 await や then で追加処理完了を待ってから Dataset に対する処理を行う必要があります。

点群表示の変更¶

点群を細かくする¶

デフォルトは 0.7 です。

pointCloud.setPointsPerPixel( 1.0 );

描画形状やサイズを変更する¶

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

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

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

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

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