Display clouds in the sky¶

Sample utilizing cloud layers to overlay clouds in the sky.

cloud_from_space.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Display clouds in the sky </title>
    <meta property="og:description" content="Sample utilizing cloud layers to overlay clouds in the sky." />
    <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%; }
    </style>
</head>

<body>
<div id="mapray-container"></div>
</body>
</html>

<script>
class EarthView extends maprayui.StandardUIViewer {
    constructor( container, options ) {
        super( container, options );
        this.time = 0.0;
    }
    onUpdateFrame( delta_time ) {
        super.onUpdateFrame( delta_time );
        // calculate the frame of cloud animation
        const dv = 1.0 / 18.0;
        let fade = this.time * dv > 1.0 ? 0 : this.time * dv;
        this.viewer.cloudVisualizer.setFade( fade );
        if ( fade === 0 && this.time != 0.0 ) {
            this.time = 0.0;
        } else {
            this.time += delta_time;
        }
    }
}

async function main()
{
    const cloudApi = new mapray.cloud.CloudApiV2({
        tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
        token: "<YOUR_MAPRAY_ACCESS_TOKEN>"
    });

    const uiviewer = new EarthView( "mapray-container", {
        dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() ),
        atmosphere: new mapray.Atmosphere(),
        sun_visualizer: new mapray.SunVisualizer( 32 ),
        moon_visualizer: new mapray.MoonVisualizer( 'https://resource.mapray.com/assets/images/moon.jpg' ),
        cloud_visualizer: new mapray.CloudVisualizer(),
        star_visualizer: new mapray.StarVisualizer( 'https://resource.mapray.com/assets/data/star75.json', 'https://resource.mapray.com/assets/images/starmap_512n2.jpg' ),
    } );

    await uiviewer.viewer.init_promise;

    uiviewer.setCameraPosition({
        longitude: 142.0,
        latitude: 20.0,
        height: 2500000
    });

    uiviewer.setLookAtPosition({
        longitude: 137.65906432922944,
        latitude:  36.294572127536995,
        height: 1000
    });

    uiviewer.viewer.cloudVisualizer.loadData( 'https://resource.mapray.com/assets/data/cloud_0.png' , 'https://resource.mapray.com/assets/data/cloud_1.png', 0.0 );
}

main();
</script>

Info

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