圖層開關控制

範例展示

原始碼

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>
    <div id="toggle"></div>

    <script type="text/javascript" src="https://api.map8.zone/maps/js/gomp.js?key=[YOUR_KEY_HERE]"></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: [121.54224, 25.04142], // 初始中心座標，格式為 [lng, lat]
            zoom: 13.18, // 初始 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.addSource('busline', {
                type: 'geojson',
                data: "[YOUR_GEOJSON_FILE_HERE]", // 此範例所使用的檔案請見 https://www.map8.zone/js/vector/bus_line.json
            });
            map.addLayer({
                'id': 'bus_line',
                'type': 'line',
                'source': 'busline',
                'layout': {
                    'visibility': 'visible',
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': '#91a7ff',
                    'line-width': 3
                }
            });

            map.addSource('busstop', {
                type: 'geojson',
                data: '../js/vector/bus_stop.json'
            });
            map.addLayer({
                'id': 'bus_stop',
                'type': 'circle',
                'source': 'busstop',
                'layout': {
                    'visibility': 'visible'
                },
                'paint': {
                    'circle-radius': 6,
                    'circle-color': '#3b5bdb'
                },
            });
        });

        var toggleableLayerIds = [ 'bus_line', 'bus_stop' ];
    
        for (var i = 0; i < toggleableLayerIds.length; i++) {
            var id = toggleableLayerIds[i];
            
            var link = document.createElement('a');
            link.href = '#';
            link.className = 'active';
            link.textContent = id;
            
            link.onclick = function (e) {
                var clickedLayer = this.textContent;
                e.preventDefault();
                e.stopPropagation();
                
                var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
                
                if (visibility === 'visible') {
                    map.setLayoutProperty(clickedLayer, 'visibility', 'none');
                    this.className = '';
                } else {
                    this.className = 'active';
                    map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
                }
            };
            
            var layers = document.getElementById('toggle');
            layers.appendChild(link);
        }
    </script>
</body>
</html>