Get the nearest point's position in the point cloud¶

0.10.0

Get a nearest point position in the point cloud

get_nearest_position.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Get the nearest point's position in the point cloud</title>
    <meta property="og:description" content="Get a nearest point position in the point cloud" />
    <meta name="mapray-version" content="0.10.0">
    <meta name="mapray-api-status" content="experimental">
    <script src="./v0.10.1/mapray.min.js"></script>
    <script src="./v0.10.1/maprayui.min.js"></script>
    <link rel="stylesheet" href="./v0.10.1/mapray.css">
    <style>
        body {margin: 0; padding: 0;}
        html, body, div#mapray-container { height: 100%; }
        .map-overlay {
            font: 12px/20px "Robot", sans-serif;
            position: absolute;
            width: 300px;
            top: 0;
            left: 0;
            padding: 10px;
        }
        .map-overlay .map-overlay-inner {
            background-color: #fff;
            color: #000;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
            border-radius: 3px;
            padding: 10px;
            margin-bottom: 10px;
        }
        .map-overlay-inner fieldset {
        border: none;
            padding: 0;
            margin: 0 0 10px;
        }
        .map-overlay-inner fieldset:last-child {
            margin: 0;
        }
        .map-overlay-inner label {
            display: block;
            font-weight: bold;
            margin: 0 0 5px;
        }
    </style>
</head>

<body>
    <div id="mapray-container"></div>
    <div class="map-overlay top">
        <div class="map-overlay-inner">
            <fieldset>
                <label>Get the nearest point's position</label>
                <span id="picked_point_lat">Please pick the point</span><br>
                <span id="picked_point_lon"></span><br>
                <span id="picked_point_alt"></span>
            </fieldset>
        </div>
    </div>
</body>
</html>

<script>
class PointCloudView extends maprayui.StandardUIViewer {
    constructor( container, options ) {
        super( container, options );
    }

    onMouseUp( point, event ) {
        super.onMouseUp( point, event );

        const pick_result = this.viewer.pick( point, { exclude_category: mapray.Viewer.Category.GROUND } );
        if ( pick_result && pick_result.point_cloud ) {
            const p = pick_result.point_cloud.getNearestPointPosition( pick_result.position );
            console.log( "nearest point:", p );

            if ( p ) {
                const pin_pos = new mapray.GeoPoint();
                pin_pos.setFromGocs( p );
                const pin = new mapray.PinEntity( this.viewer.scene );
                pin.addPin( pin_pos );
                this.clearEntities();
                this.addEntity( pin );

                document.getElementById( 'picked_point_lat' ).textContent = pin_pos.latitude.toString();
                document.getElementById( 'picked_point_lon' ).textContent = pin_pos.longitude.toString();
                document.getElementById( 'picked_point_alt' ).textContent = pin_pos.altitude.toString();
            }
        }
    }
}

async function main() {
    // Create Mapray Cloud API. Set up your access token, which can be created in Mapray Cloud.
    const cloud_api = new mapray.cloud.CloudApiV2( {
        tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
        token: "<YOUR_MAPRAY_ACCESS_TOKEN>",
    } );

    // Create viewer
    const uiviewer = new PointCloudView( "mapray-container", {
        image_provider: new mapray.StandardImageProvider( {
            url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", format: "jpg", min_level: 2, max_level: 18,
        } ),
        dem_provider: new mapray.StandardDemProvider( cloud_api.getDefaultDemAsResource() ),
    } );

    // Wait for the initialization process to complete.
    await uiviewer.viewer.init_promise;

    // Setup camera position
    uiviewer.setCameraPosition( {
        longitude: 138.73011944,
        latitude: 35.35539722,
        height: 4200,
    } );

    uiviewer.setLookAtPosition( {
        longitude: 138.73133611,
        latitude:  35.35990555,
        height: 3776,
    } );

    // Display wire frame
    uiviewer.viewer.render_mode = mapray.Viewer.RenderMode.WIREFRAME;

    // Add point cloud data
    uiviewer.viewer.point_cloud_collection.add( new mapray.StandardPointCloudProvider( { url: "https://opentiles.mapray.com/pc/raw/virtualshizuoka/mount-fuji/info.json" } ) );
}

main();

</script>

Info

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