mapbox 高亮相同特征的要素数据

一、完整代码

二、效果截图

三、 代码分析

1. 添加矢量瓦片数据源

   map.addSource('counties', {
       'type': 'vector',
       'url': 'mapbox://mapbox.82pkq93d'
   });

2. 添加矢量瓦片底图图层

   
   // Add transparent county polygons
   // for default display.
   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 polygons under labels, roads and buildings.
       'building'
   );

3. 添加矢量瓦片高亮图层

   map.addLayer(
       {
           'id': 'counties-highlighted',
           'type': 'fill',
           'source': 'counties',
           'source-layer': 'original',
           'paint': {
               'fill-outline-color': '#484896',
           'fill-color': '#6e599f',
           'fill-opacity': 0.75
           },
           // Display none by adding a
           // filter with an empty string.
           'filter': ['in', 'COUNTY', '']
       },
       // Place polygons under labels, roads and buildings.
       'building'
   );

4. 底图图层添加鼠标移入事件

   map.on('mousemove', 'counties', (e) => {
   
   }

5. 底图图层鼠标移出事件

   map.on('mouseleave', 'counties', () => {
   
   }

6. 获取相关联要素数据信息

   // 1 鼠标移入图层后修改鼠标手势
   map.getCanvas().style.cursor = 'pointer';
   
   // 2 获取鼠标移入第一个要素
   const feature = e.features[0];
   
   // 3 根据第一个要素的属性信息，根据图层获取与该属性相同的要素
   const relatedCounties = map.querySourceFeatures('counties', {
       sourceLayer: 'original',
       filter: ['in', 'COUNTY', feature.properties.COUNTY]
   });
   
   // 4 对关联关联要素数据进行去重
   const uniqueCounties = getUniqueFeatures(relatedCounties, 'FIPS');
   
   function getUniqueFeatures(features, comparatorProperty) {
       const uniqueIds = new Set();
       const uniqueFeatures = [];
       for (const feature of features) {
           const id = feature.properties[comparatorProperty];
           if (!uniqueIds.has(id)) {
               uniqueIds.add(id);
               uniqueFeatures.push(feature);
           }
       }
       return uniqueFeatures;
   }
   
   // 5 获取去重后关联图层人口总和
   const populationSum = uniqueCounties.reduce((memo, feature) => {
       return memo + feature.properties.population;
   }, 0);
   
   // 6 创建dom展示人口相关信息
   const title = document.createElement('strong');
   title.textContent =
       feature.properties.COUNTY +
       ' (' +
       uniqueCounties.length +
   ' found)';
    
   const population = document.createElement('div');
   population.textContent =
       'Total population: ' + populationSum.toLocaleString();
    
   overlay.innerHTML = '';
   overlay.style.display = 'block';
    
   overlay.appendChild(title);
   overlay.appendChild(population);
   
   // 7 修改高亮图层过滤条件显示高亮要素
   map.setFilter('counties-highlighted', [
       'in',
       'COUNTY',
       feature.properties.COUNTY
   ]);
   
   // 8 根据过滤条件清空高亮要素
   map.setFilter('counties-highlighted', ['in', 'COUNTY', '']);