Skip to main content

3D grid heat map

Supports loading 3D grid thermal layers on the map.

show
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Loading 3D mesh thermal layer</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%;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
</head>

<body>
    <div id="map"></div>
    <script>

        var map = new mapmost.Map({
            container: 'map',
            style: "<your style url>",
            center: [120.73012819402413, 31.299075859045416],
            zoom: 12.4,
            pitch: 63.03,
            bearing: 20,
            userId: '***', // Authorization code
        });

        map.on('load', function () {
            fetch("./grid.json")
                .then((res) => res.json())
                .then((response) => {
                    let data = response.features.map((da) => {
                        return da.geometry.coordinates
                    });
                    map.addLayer({
                        id: "grid-demo",
                        type: "grid",
                        cellSize: 10, //Single square size
                        colorRange: {
                            0: "#1a9850",
                            1: "#9fd568",
                            2: "#ffffbf",
                            3: "#fd9d62",
                            5: "#d73027",
                        }, // color range
                        coverage: 0.5, // The coverage rate of each honeycomb group mainly affects the size of a single honeycomb, and the value is between 0 and 1
                        heightMultiplier: 2, // height multiple
                        extrudable: true, // Whether it can be pulled up
                        ambientFactor: 0.22, // ambient light coefficient
                        directionalFactor: 0.12, // Parallel lighting coefficient
                        data: data, // data[[lng,lat],[lng,lat],[lng,lat],[lng,lat]]
                    });
                });
        })
    </script>
</body>

</html>