地圖範圍篩選點位

範例展示

原始碼

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 class="filter">
        <fieldset>
            <input id="filter" type="text" placeholder="輸入名稱以過濾結果" />
        </fieldset>
        <div id="list"></div>
    </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.230442, 24.955119], // 初始中心座標，格式為 [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
        }));

        var pois = [];

        // 新增訊息視窗 (尚未加入地圖)
        var popup = new gomp.Popup({
            closeButton: false
        });
        var filterEl = document.getElementById('filter');
        var listEL = document.getElementById('list');

        function renderList(features) {
            // 清除已存在的清單
            listEL.innerHTML = '';
            if (features.length) {
                features.forEach(function(feature) {
                    var prop = feature.properties;
                    var item = document.createElement('a');
                    item.href = "#";
                    item.textContent = prop.id + ' ' + prop.name;
                    item.addEventListener('mouseover', function() {
                        // 顯示訊息視窗
                        popup.setLngLat(feature.geometry.coordinates)
                            .setText(feature.properties.id + ' ' + feature.properties.name)
                            .addTo(map);
                    });
                    listEL.appendChild(item);
                });
            } else {
                var empty = document.createElement('p');
                empty.textContent = '拖移地圖以產生結果';
                listEL.appendChild(empty);

                map.setFilter('poi', ['has', 'name']);
            }
        }

        function normalize(string) {
            return string.trim().toLowerCase();
        }

        function getUniqueFeatures(array, comparatorProperty) {
            var existingFeatureKeys = {};
            var uniqueFeatures = array.filter(function(el) {
                if (existingFeatureKeys[el.properties[comparatorProperty]]) {
                    return false;
                } else {
                    existingFeatureKeys[el.properties[comparatorProperty]] = true;
                    return true;
                }
            });
            
            return uniqueFeatures;
        }

        map.on('load', function () {
            map.addSource("poi", {
                type: "geojson",
                data: "[YOUR_GEOJSON_FILE_HERE]" // 此範例所使用的檔案請見 https://www.map8.zone/js/vector/poi.json
            });

            map.addLayer({
                'id': 'poi',
                'type': 'circle',
                'source': 'poi',
                'paint': {
                    'circle-radius': {
                        'base': 1.75,
                        'stops': [[12, 10], [22, 30]]
                    },
                    'circle-color': [
                        'match',
                        ['get', 'class'],
                        'restaurant', '#ff8000',
                        'hospital', '#ad5a5a',
                        'park', '#009100',
                        'shop', '#004b97',
                        '#ccc' /* 其他類型 */
                    ]
                }
            });

            map.on('moveend', function() {
                var features = map.queryRenderedFeatures({layers:['poi']});
                
                if (features) {
                    var uniqueFeatures = getUniqueFeatures(features, "id");
                    renderList(uniqueFeatures);

                    filterEl.value = '';

                    pois = uniqueFeatures;
                }
            });

            map.on('mousemove', 'poi', function(e) {
                map.getCanvas().style.cursor = 'pointer';

                var feature = e.features[0];
                popup.setLngLat(feature.geometry.coordinates)
                .setText(feature.properties.id + ' ' + feature.properties.name)
                .addTo(map);
            });

            map.on('mouseleave', 'poi', function() {
                map.getCanvas().style.cursor = '';
                popup.remove();
            });

            filterEl.addEventListener('keyup', function(e) {
                var value = normalize(e.target.value);

                var filtered = pois.filter(function(feature) {
                var name = normalize(feature.properties.id + ' ' + feature.properties.name);
                    return name.indexOf(value) > -1;
                });

                renderList(filtered);
            });

            renderList([]);
        });
    </script>
</body>
</html>