Thêm đường

Thêm đường từ GEOJSON
html
<!DOCTYPE html>
<html lang="vi">

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

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

        function renderRoute(floorVal, attempt = 1) {
            if (parseInt(floorVal) !== 2) return;

            try {
                try { sdk.removeLayer("top-route-line"); } catch (e) { }

                sdk.addLayer({
                    id: "top-route-line",
                    source: {
                        type: "geojson",
                        data: {
                            type: "FeatureCollection",
                            features: [{
                                type: "Feature",
                                geometry: {
                                    type: "LineString",
                                    coordinates: [
                                        [105.77797234328985, 21.056404931800174],
                                        [105.77794803128499, 21.056401914642418],
                                        [105.77793283897691, 21.056399878333355],
                                        [105.77792097582527, 21.056398469096813],
                                        [105.77789831941548, 21.05639581158348],
                                        [105.77789398324761, 21.05642396864741],
                                        [105.77789238783964, 21.056435867094866],
                                        [105.7778681575815, 21.05643284826107],
                                        [105.77778502748511, 21.056421700120648],
                                        [105.77777049184549, 21.0564197509984],
                                        [105.77777565087018, 21.05638454858875],
                                        [105.77779892621918, 21.056387554010197]
                                    ]
                                }
                            }]
                        }
                    },
                    layer: {
                        type: "line",
                        paint: {
                            "line-color": "#007AFF", 
                            "line-width": 6,         
                            "line-opacity": 1
                        },
                        layout: {
                            "line-cap": "round",
                            "line-join": "round"
                        }
                    },
                    floor: 2
                });
            } catch (error) {
                if (attempt <= 15) {
                    setTimeout(() => renderRoute(floorVal, attempt + 1), 300);
                }
            }
        }

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

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

            setTimeout(() => {
                sdk.setView({
                    lng: 105.77789, 
                    lat: 21.05641,
                    zoom: 20,
                    floor: 2 
                });
            }, 1500);
        });

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

</html>
Thêm đường ​

Thêm đường
