更新資料

此範例展示如何更新資料來源 (Source)。點擊「更新資料」按鈕即可顯示更新後的點。
自訂圖示範例請見點圖層自訂圖示。
範例展示

原始碼

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="update" disabled>更新資料</button>

    <script type="text/javascript" src="https://api.map8.zone/maps/js/gomp.js?key=[YOUR_KEY_HERE]"></script>
    <script type="text/javascript">
        var source = {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [121.520991, 25.046558]
                }
            },{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [121.525502, 25.045425]
                }
            },{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [121.523707, 25.044451]
                }
            }]
        };
        var newSource = {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [121.522227, 25.044451]
                }
            },{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [121.523544, 25.047023]
                }
            },{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [121.524837, 25.044845]
                }
            }]
        };

        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: [121.523366, 25.045826], // 初始中心座標，格式為 [lng, lat]
            zoom: 16, // 初始 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
        }));

        map.on('load', function(){
            map.loadImage('[YOUR_IMAGE_HERE]', function(error, image) {
                map.addImage('marker', image);
                map.addLayer({
                    'id': 'pois',
                    'type': 'symbol',
                    // 若於新增圖層時直接指定 Data，將會自動產生一個同名 id 的 Source
                    'source': {
                        'type': 'geojson',
                        'data': source
                    },
                    'layout': {
                        'icon-image': 'marker',
                        'icon-size ': 0.5,
                        'icon-offset': [0, -21],
                        'icon-allow-overlap': true
                    }
                });
            });
        });
        map.once('idle', function() {
            var updateBtn = document.getElementById("update");
            updateBtn.disabled = false;
            updateBtn.addEventListener("click",  function() {
                map.getSource('pois').setData(newSource)
            });
        });
    </script>
</body>
</html>