跳到主要内容
版本：9.12.0-beta

加载雨雪特效

支持添加下雨、下雪动画，可设置雨雪范围、颜色、大小等参数。

show
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>加载雨雪特效</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.12.0-beta/mapmost-webgl-min.js"></script>
</head>

<body>
<div id="map"></div>
<div id="btn-group">
   <button onClick="addLayerRain()">添加雨</button>
    <button onClick="updateRain()">更新雨</button>
    <button onClick="removeLayerRain()">移除雨</button>
    <button onClick="addLayerSnow()">添加雪</button>
    <button onClick="updateSnow()">更新雪</button>
    <button onClick="removeLayerSnow()">移除雪</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: '***', // 授权码,
    });

    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],
    ];

    // 添加下雨动画
    function addLayerRain() {
        let defaultOptions = {
            bounds: bounds, // 范围,最小经纬度和最大经纬度，西南角与东北角范围
            top: 1000, // 范围顶部高度，单位米
            count: 2000, // 雨点数量
            size: 1, // 雨点长度倍数
            opacity: 0.8, // 雨点透明度
            speed: 0.5, // 雨点速度
        };
        rainSystem = modelLayer.addRainSystem(defaultOptions);
    }

    // 更新雨点
    function updateRain() {
        rainSystem &&
          rainSystem.update({
            top: 2000, // 范围顶部高度，单位米
            // count: 5000, // 雨点数量
            size: 3, // 雨点长度
            opacity: 1, // 雨点透明度
            speed: 1, // 雨点速度
          });
    }

    // 移除下雨动画
    function removeLayerRain() {
        rainSystem && rainSystem.remove();
    }

    // 添加下雪动画
    function addLayerSnow() {
        let defaultOptions = {
          bounds: bounds, // 范围,最小经纬度和最大经纬度，西南角与东北角范围
          top: 1000, // 范围顶部高度，单位米
          count: 2000, // 雪花数量
          size: 40, // 雪花大小
          opacity: 0.8, // 雪花透明度
          speed: 1.0, // 雪花速度
        };
        snowSystem = modelLayer.addSnowSystem(defaultOptions);
    }

    // 更新雪花
    function updateSnow() {
        snowSystem &&
          snowSystem.update({
            top: 2000, // 范围顶部高度，单位米
            // count: 5000, // 雪花数量
            size: 100, // 雪花大小
            opacity: 1.0, // 雪花透明度
            speed: 2.0, // 雪花速度
          });
    }

    // 移除下雪动画
    function removeLayerSnow() {
        snowSystem && snowSystem.remove();
    }

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