[MapboxGL]高亮包含相似數據的特性

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset='utf-8' />  
    <title></title>  
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />  
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>  
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />  
    <style>  
        body { margin:0; padding:0; }  
        #map { position:absolute; top:0; bottom:0; width:100%; }  
    </style>  
</head>  
<body>  
  
<style>  
.map-overlay {  
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;  
    background-color: #fff;  
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);  
    border-radius: 3px;  
    position: absolute;  
    width: 25%;  
    top: 10px;  
    left: 10px;  
    padding: 10px;  
    display: none;  
}  
</style>  
  
<p id='map'></p>  
<p id='map-overlay' class='map-overlay'></p>  
  
<script>  
mapboxgl.accessToken = '<your access token here>';  
var map = new mapboxgl.Map({  
    container: 'map',  
    style: 'mapbox://styles/mapbox/streets-v9',  
    center: [-98, 38.88],  
    minZoom: 2,  
    zoom: 3  
});  
  
var overlay = document.getElementById('map-overlay');  
  
// Create a popup, but don't add it to the map yet.  
var popup = new mapboxgl.Popup({  
    closeButton: false  
});  
  
map.on('load', function() {  
    // Add the source to query. In this example we're using  
    // county polygons uploaded as vector tiles  
    map.addSource('counties', {  
        "type": "vector",  
        "url": "mapbox://mapbox.82pkq93d"  
    });  
  
    map.addLayer({  
        "id": "counties",  
        "type": "fill",  
        "source": "counties",  
        "source-layer": "original",  
        "paint": {  
            "fill-outline-color": "rgba(0,0,0,0.1)",  /* 輪廓顏色 */  
            "fill-color": "rgba(0,0,0,0.1)"           /* 填充顏色 */  
        }  
    }, 'place-city-sm'); // Place polygon under these labels.  
  
    map.addLayer({  
        "id": "counties-highlighted",  
        "type": "fill",  
        "source": "counties",  
        "source-layer": "original",  
        "paint": {  
            "fill-outline-color": "#484896",  
            "fill-color": "#6e599f",  
            "fill-opacity": 0.75        /* 填充透明度 */  
        },  
        "filter": ["in", "COUNTY", ""]  /* 數據過濾器 */  
    }, 'place-city-sm'); // Place polygon under these labels.  
  
    map.on('mousemove', function(e) {   /* mousemove 鼠標指針移動時發生 */  
        var features = map.<strong>queryRenderedFeatures</strong>(e.point, {    /* queryRenderedFeatures  ([geometry], [parameters]):在特定的幾何形狀內查詢滿足條件的可視化的GeoJSON特性對象數組  */  
            layers: ['counties']  
        });  
  
        // Change the cursor style as a UI indicator.  
        map.getCanvas().style.cursor = features.length ? 'pointer' : '';  /* 設置鼠標樣式 */  
  
        // Remove things if no feature was found.  
        if (!features.length) {  
            popup.remove();  
            map.setFilter('counties-highlighted', ['in', 'COUNTY', '']);  /* 更新數據過濾器 */  
            overlay.style.display = 'none';       /* 隱藏該標簽 */  
            return;  
        }  
  
        // Single out the first found feature on mouseove.  
        var feature = features[0];  
  
        // Query the counties layer visible in the map. Use the filter  
        // param to only collect results that share the same county name.  
        var relatedFeatures = map.<strong>querySourceFeatures</strong>('counties', {    /* querySourceFeatures  (sourceID, [parameters]):在GeoJSON source或者矢量瓦片內查詢滿足條件的GeoJSON特性對象數組 */  
            sourceLayer: 'original',  
            filter: ['in', 'COUNTY', feature.properties.COUNTY]  /* ["in", key, v0, ..., vn] set inclusion: feature[key] ∈ {v0, ..., vn} */  
        });  
  
        // Render found features in an overlay.  
        overlay.innerHTML = '';  
  
        // Total the population of all features  
        var populationSum = relatedFeatures.<strong>reduce</strong>(function(memo, feature) {  
            return memo + feature.properties.population;  
        }, 0);  
  
        var title = document.createElement('strong');  
        title.textContent = feature.properties.COUNTY + ' (' + relatedFeatures.length + ' found)';  /* 更新文本內容 */  
  
        var population = document.createElement('p');  
        population.textContent = 'Total population: ' + populationSum.toLocaleString();  
  
        overlay.appendChild(title);  
        overlay.appendChild(population);  
        overlay.style.display = 'block';  
  
        // Add features that share the same county name to the highlighted layer.  
        map.setFilter('counties-highlighted', ['in', 'COUNTY', feature.properties.COUNTY]);   /* 更新高亮layer的過濾器,顯示相關數據 */  
  
        // Display a popup with the name of the county  
        popup.setLngLat(e.lngLat)  
            .setText(feature.properties.COUNTY)  
            .addTo(map);  
    });  
});  
</script>  
  
</body>  
</html> 

鼠標懸停在某個郡上面時,高亮使用相同郡名的其他郡

發佈留言