Set water polygon parameter

0.10.1

Set water polygon parameter

set_water_polygon_parameter.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Set water polygon parameter</title>
    <meta property="og:description" content="Set water polygon parameter" />
    <meta name="mapray-version" content="0.10.1">
    <meta name="mapray-api-status" content="experimental">
    <script src="./v0.10.6/mapray.min.js"></script>
    <script src="./v0.10.6/maprayui.min.js"></script>
    <link rel="stylesheet" href="./v0.10.6/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 .select-fieldset {
            display: block;
        }
        .map-overlay-inner fieldset {
        border: none;
            padding: 0;
            margin: 0 0 10px;
        }
        .map-overlay-inner fieldset:last-child {
            margin: 0;
        }
        .map-overlay-inner select {
            width: 100%;
        }
        .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 class="select-fieldset">
                <label for="wind_fetch">Fetch (distance the wind blows over the water)</label>
                <select id="wind_fetch" name="wind_fetch">
                    <option value="100">River (100 m)</option>
                    <option value="5574" selected>Lake (5.6 km)</option>
                    <option value="10000">Bay (10 km)</option>
                    <option value="30000">Open sea (30 km)</option>
                </select>
            </fieldset>
            <fieldset>
                <label for="turbidity">Turbidity <span id="turbidity_value">0.35</span></label>
                <input type="range" id="turbidity" min="0" max="1" step="0.05" value="0.35">
            </fieldset>
            <fieldset>
                <label for="wind_speed">Wind speed <span id="wind_speed_value">6</span> m/s</label>
                <input type="range" id="wind_speed" min="0" max="20" step="0.5" value="6">
            </fieldset>
            <fieldset>
                <label for="wave_height_scale">Wave height &times; <span id="wave_height_scale_value">1</span></label>
                <input type="range" id="wave_height_scale" min="0" max="3" step="0.1" value="1">
            </fieldset>
            <fieldset>
                <label for="shore_break_scale">Shore break &times; <span id="shore_break_scale_value">0.6</span></label>
                <input type="range" id="shore_break_scale" min="0" max="1" step="0.05" value="0.6">
            </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() ),
        sun_visualizer: new mapray.SunVisualizer( 32 ),
        atmosphere: new mapray.Atmosphere(),
    } );

    // Setup camera position
    uiviewer.setCameraPosition( {
        longitude: 138.8813839790466,
        latitude: 35.41599948957569,
        height: 1003.4868803909048,
    } );

    uiviewer.setLookAtPosition( {
        longitude: 138.8124600651,
        latitude: 35.3937341103,
        height: 1080,
    } );

    // Sun direction
    const theta = - Math.PI / 180.0 * 180;
    const x = Math.cos(theta);
    const y = Math.sin(theta);
    uiviewer.viewer.sun.setSunDirection( [ x, y, 0 ] );

    // Create water polygon visualizer
    const visualizer = new mapray.WaterPolygonEntityVisualizer();

    // Create water polygon entity
    const resources =  [cloud_api.getDatasetAsResource("5103308951781376")];
    const entities = await mapray.WaterPolygonEntity.loadWaterPolygonGeoJSON(
        uiviewer.viewer.scene, resources, {
            altitude_mode: mapray.AltitudeMode.ABSOLUTE,
            height: 988.5353277977556,
            visualizer: visualizer,
        }
    );

    // The surface is described by the sea state, not by individual wave numbers.
    // Wind speed drives wave height, phase speed and whitecaps together; fetch sets
    // how far the wind has blown; turbidity sets how the water absorbs and scatters light.
    const V = mapray.WaterPolygonEntityVisualizer;

    const bind = function( id, apply ) {
        const input = document.getElementById( id );
        const label = document.getElementById( id + "_value" );
        const update = function () {
            const value = input.type === "range" ? Number( input.value ) : input.value;
            if ( label ) label.textContent = input.value;
            apply( value );
        };
        input.addEventListener( input.type === "range" ? "input" : "change", update );
        update();
    };

    bind( "wind_fetch",        ( v ) => visualizer.setWindFetch( Number( v ) ) );
    bind( "turbidity",         ( v ) => visualizer.setWaterTurbidity( v ) );
    bind( "wind_speed",        ( v ) => visualizer.setWindSpeed( v ) );
    bind( "wave_height_scale", ( v ) => visualizer.setWaveHeightScale( v ) );
    bind( "shore_break_scale", ( v ) => visualizer.setShoreBreakScale( v ) );
}

main();

</script>

Info

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