Thêm vùng

Ví dụ này vẽ vùng trên bản đồ từ dữ liệu GeoJSON
html
<!DOCTYPE html>
<html lang="vi">

<head>
    <meta charset="UTF-8">
    <title>VGM SDK Fill Layer Demo</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; font-family: sans-serif; }
        #map-container { width: 100%; height: 100%; }
    </style>
</head>

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

    <script>
        
        let currentFloor = null;
        let setViewRetryCount = 0;
        const MAX_SETVIEW_RETRIES = 20;
        const SETVIEW_RETRY_DELAY = 500;

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

        function renderFillArea(floorVal, attempt = 1) {
            const current = floorVal !== null ? parseInt(floorVal) : null;
            
            if (current !== 2) {
                try { sdk.removeLayer("area-fill-layer"); } catch (e) {}
                return;
            }

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

                sdk.addLayer({
                    id: "area-fill-layer",
                    source: {
                        type: "geojson",
                        data: {
                            type: "FeatureCollection",
                            features: [{
                                type: "Feature",
                                geometry: {
                                    type: "Polygon",
                                    coordinates: [[
                                        [105.77760, 21.05630],
                                        [105.77795, 21.05630],
                                        [105.77795, 21.05650],
                                        [105.77760, 21.05650],
                                        [105.77760, 21.05630] 
                                    ]]
                                }
                            }]
                        }
                    },
                    layer: {
                        type: "fill",
                        paint: {
                            "fill-color": "#00FF00",     
                            "fill-opacity": 0.5,          
                            "fill-outline-color": "#006600" 
                        }
                    },
                    floor: 2
                });

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

        function attemptSetViewAndFloor() {
            if (parseInt(currentFloor) === 2) return;
            if (setViewRetryCount >= MAX_SETVIEW_RETRIES) return;

            setViewRetryCount++;
            sdk.setView({
                lng: 105.77778, lat: 21.05641, zoom: 20, floor: 2
            });

            setTimeout(() => {
                if (parseInt(currentFloor) !== 2) {
                    attemptSetViewAndFloor();
                }
            }, SETVIEW_RETRY_DELAY);
        }

        sdk.on("FLOOR_CHANGED", ({ floor }) => {
            currentFloor = floor;
            try { sdk.removeLayer("area-fill-layer"); } catch (e) {}

            setTimeout(() => {
                renderFillArea(currentFloor);
            }, 300);
        });

        sdk.on("APP_READY", () => {
            // replace 5 by your site_id
            sdk.setSite(5);
            setTimeout(() => {
                setViewRetryCount = 0;
                attemptSetViewAndFloor();
            }, 1500);
        });

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

</html>
Thêm vùng ​

Thêm vùng
