Add a DEM layer¶

0.10.0

Add a DEM layer

add_dem_layer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Add a DEM layer</title>
    <meta property="og:description" content="Add a DEM layer" />
    <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: 200px;
            top: 0;
            left: 0;
            padding: 10px;
        }
        .map-overlay .map-overlay-inner {
            background-color: #fff;
            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>
                    <input type="checkbox" id="wire_frame" checked> Wire frame
                </label>
            </fieldset>
        </div>
    </div>
</body>
</html>

<script>
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 maprayui.StandardUIViewer( "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() ),
    } );

    // Setup camera position
    uiviewer.setCameraPosition( {
        longitude: 139.07809014555153,
        latitude: 35.11836683287877,
        height: 315.41231526527554,
    } );

    uiviewer.setLookAtPosition( {
        longitude: 139.0772398543468,
        latitude: 35.11853399141087,
        height: 237.91778357233852,
    } );

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


    // Add DEM layer
    await uiviewer.viewer.dem_layers.add( new mapray.StandardDemProvider( cloud_api.getDemDatasetAsResource( "5075217265197056" ) ) );


    // Update depending on the UI
    document
        .getElementById( 'wire_frame' )
        .addEventListener( 'change', function () {
            uiviewer.viewer.render_mode = this.checked ?  mapray.Viewer.RenderMode.WIREFRAME : mapray.Viewer.RenderMode.SURFACE;
        } );
}

main();

</script>

Info

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