Skip to main content

Vector dynamic water surface and reflection

Dynamic water surface and reflection effects can be achieved based on vector surface layers.

show
<!DOCTYPE html>
<html>
<head>
    <title>Vector dynamic water surface and reflection</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.16.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: '***', // Authorization code
        });

        map.on('load', () => {
            //Load the water layer
            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", // Dynamic water surface normal map
                    "fill-waterflow-noise": "./static/waterNoise.png", // Dynamic water noise map
                    "fill-waterflow-speed": 1, // Dynamic water flow speed
                    "fill-waterflow-time": "2024-08-02 12:00:00", // Dynamic water flow time
                    "fill-waterflow-reflect-sun": false, // Whether to reflect sunlight
                    // "fill-waterflow-color": "rgba(79, 191, 188, 1)", // Dynamic water surface color
                    // "fill-waterflow-reflect-color": "rgba(230, 147, 170, 1)" // Dynamic water flow reflection color
                    "fill-waterflow-reflect": true, // Whether to turn on water reflection
                    "fill-waterflow-reflect-wave-u": 0.1, // Reflection edge blur coefficient - horizontal direction
                    "fill-waterflow-reflect-wave-v": 0.1, // Reflection edge blur coefficient - vertical direction
                }
            })
        })
    </script>
</body>
</html>