Thêm điểm

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

<head>
    <meta charset="UTF-8">
    <title>VGM SDK POI</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;

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

        function renderPoints(floorVal, attempt = 1) {
            const currentParsedFloor = parseInt(floorVal);
            const targetParsedFloor = parseInt(2);

            if (isNaN(currentParsedFloor) || currentParsedFloor !== targetParsedFloor) {
                try { sdk.removeLayer("poi-layer"); } catch (e) {} // Đảm bảo xóa nếu có lỗi trước đó
                return; 
            }

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

                // Thử vẽ điểm
                sdk.addLayer({
                    id: "poi-layer",
                    source: {
                        type: "geojson",
                        data: {
                            type: "FeatureCollection",
                            features: [
                                {
                                    type: "Feature",
                                    geometry: {
                                        type: "Point",
                                        coordinates: [105.77768634755114, 21.05634740375425]
                                    },
                                    properties: { id: "536" }
                                }
                            ]
                        }
                    },
                    layer: {
                        type: "circle",
                        paint: {
                            "circle-radius": 8,
                            "circle-color": "#FF0000",
                            "circle-stroke-width": 2,
                            "circle-stroke-color": "#FFFFFF"
                        }
                    },
                    floor: 2 
                });


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

        let setViewRetryCount = 0;
        const MAX_SETVIEW_RETRIES = 20; 
        const SETVIEW_RETRY_DELAY = 400; 

        function attemptSetViewAndFloor() {
            const targetParsedFloor = parseInt(2);

            if (parseInt(currentFloor) === targetParsedFloor) {
                return; 
            }

            if (setViewRetryCount >= MAX_SETVIEW_RETRIES) {
                return; // Dừng nếu đã thử quá nhiều lần
            }

            setViewRetryCount++;

            sdk.setView({
                lng: 105.77768634755114,
                lat: 21.05634740375425,
                zoom: 20,    
                floor: 2 
            });

            setTimeout(() => {
                if (parseInt(currentFloor) !== targetParsedFloor) {
                    attemptSetViewAndFloor(); 
                } else {
                    setViewRetryCount = 0; 
                }
            }, SETVIEW_RETRY_DELAY);
        }

        sdk.on("FLOOR_CHANGED", ({ floor }) => {
            renderPoints(floor);
        });

        // Khi SDK khởi tạo xong và sẵn sàng
        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 điểm ​

Thêm điểm
