圖示隨線段移動

範例展示

原始碼

copy
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>圖示隨線段移動 - Map8 Platform Documentation</title>
    <link rel="stylesheet" href="https://api.map8.zone/css/gomp.css?key=[YOUR_KEY_HERE]" />
    <style>
        #map{
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <button id="replay">重播</button>

    <script type="text/javascript" src="https://api.map8.zone/maps/js/gomp.js?key=[YOUR_KEY_HERE]"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.min.js"></script>
    <script type="text/javascript">
        gomp.accessToken = '[YOUR_KEY_HERE]';
        var map = new gomp.Map({
            container: 'map', // 地圖容器 ID
            style: 'https://api.map8.zone/styles/go-life-maps-tw-style-std/style.json', // 地圖樣式檔案位置
            maxBounds: [[105, 15], [138.45858, 33.4]], // 台灣地圖區域
            center: [120.97952, 24.77404], // 初始中心座標，格式為 [lng, lat]
            zoom: 13.12, // 初始 ZOOM LEVEL; [0-20, 0 為最小 (遠), 20 ;最大 (近)]
            minZoom: 6, // 限制地圖可縮放之最小等級, 可省略, [0-19.99]
            maxZoom: 19.99, // 限制地圖可縮放之最大等級, 可省略 [0-19.99]
            speedLoad: false,
            attributionControl: false
        }).addControl(new gomp.AttributionControl({
            compact: false
        }));

        function loadJSON(path, success, error){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function()
            {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        if (success)
                            success(JSON.parse(xhr.responseText));
                    } else {
                        if (error)
                            error(xhr);
                    }
                }
            };
            xhr.open("GET", path, true);
            xhr.send();
        }

        var route = null;
        var steps = 0;
        // 此範例所使用的檔案請見 https://www.map8.zone/js/vector/route1.json
        loadJSON('[YOUR_GEOJSON_FILE_HERE]', function(json) {
            route = json;
            steps = route.features[0].geometry.coordinates.length - 1;
        });
        var point = {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "properties": {},
                "geometry": {
                "type": "Point",
                "coordinates": [120.9612732, 24.7610188]
            }
            }]
        };    

        var counter = 0;

        map.on('load', function () {
            // 新增線段圖層及圖示圖層
            map.addSource('route', {
                type: "geojson",
                data: '[YOUR_GEOJSON_FILE_HERE]' // 此範例所使用的檔案請見 https://www.map8.zone/js/vector/route1.json
            });
    
            map.addSource('point', {
                type: "geojson",
                data: point
            });
    
            map.addLayer({
                "id": "route",
                "source": "route",
                "type": "line",
                "paint": {
                    "line-width": 6,
                    "line-color": "#ff79bc"
                }
            });
    
            map.addLayer({
                "id": "point",
                "source": "point",
                "type": "symbol",
                "layout": {
                    "icon-image": "triangle_15",
                    "icon-rotate": ["get", "bearing"],
                    "icon-rotation-alignment": "map",
                    "icon-allow-overlap": true,
                    "icon-ignore-placement": true
                }
            });

            function animate() {
                point.features[0].geometry.coordinates = route.features[0].geometry.coordinates[counter];

                point.features[0].properties.bearing = turf.bearing(
                    turf.point(route.features[0].geometry.coordinates[counter >= steps ? counter - 1 : counter]),
                    turf.point(route.features[0].geometry.coordinates[counter >= steps ? counter : counter + 1])
                );

                map.getSource('point').setData(point);

                if (counter < steps) {
                    requestAnimationFrame(animate);
                }
                
                counter = counter + 1;
            }

            document.getElementById('replay').addEventListener('click', function() {
                // 重設圖示起始座標
                point.features[0].geometry.coordinates = origin;
                
                // 更新資料來源圖層
                map.getSource('point').setData(point);
                
                // 重置計數器
                counter = 0;
                
                // 重播
                animate(counter);
            });

            // 開始播放
            animate(counter);
        });
    </script>
</body>
</html>