Skip to main content

Load rain and snow effects

Supports adding rain and snow animations, and can set rain and snow range, color, size and other parameters.

show
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>Loading rain and snow effects</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        #btn-group {
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
</head>

<body>
<div id="map"></div>
<div id="btn-group">
   <button onClick="addLayerRain()">Add Rain</button>
    <button onClick="updateRain()">Update Rain</button>
    <button onClick="removeLayerRain()">Remove Rain</button>
    <button onClick="addLayerSnow()">Add snow</button>
    <button onClick="updateSnow()">Update Snow</button>
    <button onClick="removeLayerSnow()">Remove snow</button>
</div>
<script>
    let map = new mapmost.Map({
        container: 'map',  
        style: "<your style url>", 
        center: [120.71755968678801, 31.32662823446909], 
        zoom: 15, 
        pitch: 60, 
        bearing: 0, 
        userId: '***', // Authorization code,
    });

    let modelLayer, rainSystem, snowSystem;
    map.on('load', function () {

        let options = {
            id: 'model_id',
            type: 'model',
            callback: function (group, layer) {
                modelLayer = layer;
            }
        };
        map.addLayer(options);
    })

    let bounds = [
        [120.65240673235422, 31.30970784728885],
        [120.69494764193712, 31.332059997009225],
    ];

    //Add rain animation
    function addLayerRain() {
        let defaultOptions = {
            bounds: bounds, // range, minimum latitude and longitude and maximum latitude and longitude, southwest corner and northeast corner range
            top: 1000, //Height of the top of the range, in meters
            count: 2000, // number of raindrops
            size: 1, // raindrop length multiple
            opacity: 0.8, // Raindrop transparency
            speed: 0.5, // Raindrop speed
        };
        rainSystem = modelLayer.addRainSystem(defaultOptions);
    }

    //Update raindrops
    function updateRain() {
        rainSystem &&
          rainSystem.update({
            top: 2000, //Height of the top of the range, in meters
            // count: 5000, // Number of raindrops
            size: 3, // raindrop length
            opacity: 1, // Raindrop transparency
            speed: 1, // Raindrop speed
          });
    }

    //Remove rain animation
    function removeLayerRain() {
        rainSystem && rainSystem.remove();
    }

    //Add snow animation
    function addLayerSnow() {
        let defaultOptions = {
          bounds: bounds, // range, minimum latitude and longitude and maximum latitude and longitude, southwest corner and northeast corner range
          top: 1000, //Height of the top of the range, in meters
          count: 2000, // number of snowflakes
          size: 40, //Snowflake size
          opacity: 0.8, // Snowflake transparency
          speed: 1.0, // snowflake speed
        };
        snowSystem = modelLayer.addSnowSystem(defaultOptions);
    }

    // Update snowflake
    function updateSnow() {
        snowSystem &&
          snowSystem.update({
            top: 2000, //Height of the top of the range, in meters
            // count: 5000, // Number of snowflakes
            size: 100, //Snowflake size
            opacity: 1.0, // Snowflake transparency
            speed: 2.0, // snowflake speed
          });
    }

    //Remove snow animation
    function removeLayerSnow() {
        snowSystem && snowSystem.remove();
    }

</script>
</body>
</html>