Thêm Heatmap

Ví dụ này vẽ Heatmap trên bản đồ từ dữ liệu GeoJSON
html
</html>

<!DOCTYPE html>
<html lang="vi">

<head>
    <meta charset="UTF-8">
    <title>VGM SDK Heatmap</title>
    <script src="https://maps.vgm.ai/vgm-sdk/vgmmap-sdk.js?v=${new Date().getTime()}"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background: #f8f9fa;
        }

        #map-container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="map-container"></div>

    <script>
        const sdk = new window.VGMMap({
            container: document.getElementById('map-container'),
            apiBase: "https://maps.vgm.ai/vgm-sdk"
        });

        function renderSingleHeatmap(floorVal, attempt = 1) {
            const current = floorVal !== null ? parseInt(floorVal) : null;

            if (current !== 2) {
                try { sdk.removeLayer("heatmap-layer"); } catch (e) { }
                return;
            }

            try {
                try { sdk.removeLayer("heatmap-layer"); } catch (e) { }

                sdk.addLayer({
                    id: "heatmap-layer",
                    source: {
                        type: "geojson",
                        data: {
                            type: "FeatureCollection",
                            features: [{
                                type: "Feature",
                                geometry: {
                                    type: "Point",
                                    coordinates: [105.77768634755114, 21.05634740375425]
                                },
                                properties: { id: "536", weight: 9 }
                            }]
                        }
                    },
                    layer: {
                        type: "heatmap",
                        paint: {
                            "heatmap-weight": ["interpolate", ["linear"], ["get", "weight"], 0, 0, 10, 1],
                            "heatmap-color": [
                                'interpolate', ['linear'], ['heatmap-density'],
                                0, `rgba(255, 0, 0, 0)`,
                                0.01, `rgba(255, 0, 0, 0.5)`,
                                0.02, `rgba(255, 0, 0, 0.55)`,
                                0.03, `rgba(255, 0, 0, 0.6)`,
                                0.04, `rgba(255, 0, 0, 0.65)`,
                                0.05, `rgba(255, 0, 0, 0.7)`,
                                0.06, `rgba(255, 0, 0, 0.75)`,
                                0.07, `rgba(255, 0, 0, 0.8)`,
                                0.08, `rgba(255, 0, 0, 0.85)`,
                                0.09, `rgba(255, 0, 0, 0.9)`,
                                0.1, `rgb(255, 0, 0)`
                            ],
                            "heatmap-radius": [
                                "interpolate",
                                ["linear"],
                                ["zoom"],
                                17, 20,
                                22, 100
                            ],
                            "heatmap-opacity": 1
                        }
                    },
                    floor: 2 
                });

            } catch (error) {
                if (attempt <= 15) {
                    setTimeout(() => renderSingleHeatmap(floorVal, attempt + 1), 300);
                }
            }
        }

        sdk.on("FLOOR_CHANGED", ({ floor }) => {
            console.log("Floor changed to:", floor);

            try { sdk.removeLayer("heatmap-layer"); } catch (e) { }

            setTimeout(() => {
                renderSingleHeatmap(floor);
            }, 200);
        });

        sdk.on("APP_READY", () => {
            // replace 5 by your site_id
            sdk.setSite(5);

            setTimeout(() => {
                sdk.setView({
                    lng: 105.77768634755114,
                    lat: 21.05634740375425,
                    zoom: 19,
                    floor: 2
                });
            }, 1500);
        });

        sdk.init();
        window.sdk = sdk;
    </script>
</body>

</html>
Thêm Heatmap ​

Thêm Heatmap
