Set dots per pixel¶

0.10.0

Set dots per pixel

set_dots_per_pixel.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Set dots per pixel</title>
    <meta property="og:description" content="Set dots per pixel" />
    <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;
            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 for="dots_per_pixel">Dots Per Pixel</label>
                <input type="range" id="dots_per_pixel" min="0.1" max="4.0" value="1" step="0.01">
                <span id="dots_per_pixel_value">1.0</span>
                <label>
                    <input type="checkbox" id="wire_frame" checked>Wire Frame
                </label>
            </fieldset>
        </div>
    </div>
</body>
</html>

<script>
    // 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: 138.72884,
        latitude:  35.31423,
        height: 6000.0,
    } );
    uiviewer.setLookAtPosition( {
        longitude: 138.72884,
        latitude: 35.36423,
        height: 3000.0
    } );

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


    // Set dots per pixel
    uiviewer.viewer.setDotsPerPixel( 1.0 );


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

</script>

Info

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