跳到主要内容
版本：9.4.0

矢量动态水面及倒影

可根据矢量面图层，实现动态水面和倒影效果。

show
<!DOCTYPE html>
<html>
<head>
    <title>矢量动态水面及倒影</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.4.0/mapmost-webgl-min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map">
    </div>
    <script>
        let map = new mapmost.Map({
            "center": [120.68018564545082,31.322791013611152],
            "zoom": 14.15319350373788,
            "bearing": -55.96845736318619,
            "pitch": 84.99999999999999,
            container: 'map',
            style: "<your style url>",
            sky: 'light',
            userId: '***', // 授权码
        });

        map.on('load', () => {
            // 加载水面图层
            map.addLayer({
                "id": "water-fill",
                "type": "fill",
                "source": "nature",
                "source-layer": "river_g",
                "minzoom": 0,
                "maxzoom": 22,
                "filter": ["all"],
                "layout": { "visibility": "visible" },
                "paint": {
                    "fill-opacity": 1,
                    "fill-waterflow-normal": "./static/waterBump.png", // 动态水面法线贴图
                    "fill-waterflow-noise": "./static/waterNoise.png", // 动态水面噪声贴图
                    "fill-waterflow-speed": 1, // 动态水面水流速度
                    "fill-waterflow-time": "2024-08-02 12:00:00", // 动态水面时间
                    "fill-waterflow-reflect-sun": false, // 是否反射太阳光
                    // "fill-waterflow-color": "rgba(79, 191, 188, 1)", // 动态水面颜色
                    // "fill-waterflow-reflect-color": "rgba(230, 147, 170, 1)" // 动态水面反射颜色
                    "fill-waterflow-reflect": true, // 是否开启水面倒影
                    "fill-waterflow-reflect-wave-u": 0.1, // 反射边缘模糊系数-水平方向
                    "fill-waterflow-reflect-wave-v": 0.1, // 反射边缘模糊系数-竖直方向
                }
            })
        })
    </script>
</body>
</html>