MapLibreGL按区域特征过滤标记点失效问题求助

问题描述 #

使用MapLibreGL开发带聚类功能的门店定位器，已实现左侧列表与地图标记点的双向联动。现在需要添加复选框组件，按门店的region属性过滤标记点，但点击复选框后所有标记点消失，无法实现预期的筛选效果。

现有代码 #

HTML复选框部分

<div>
  <input id="region1" type="checkbox" />
  <label for="region1">Region One</label>
</div>
<div>
  <input id="region2" type="checkbox" />
  <label for="region2">Region 2</label>
</div>

过滤逻辑JS部分

function getSelectedRegions() {
  const selectedRegions = [];
  const regionCheckboxes = document.querySelectorAll('input[type=checkbox]:checked');
  regionCheckboxes.forEach(checkbox => selectedRegions.push(checkbox.id));
  return selectedRegions;
}

function filterMarkers() {
  const selectedRegions = getSelectedRegions();
  const mapSource = map.getSource('places');
  if (selectedRegions.length === 0) {
    setAllMarkersVisible(mapSource); 
    return;
  }
  mapSource.setData({
    ...stores,
    features: stores.features.filter(feature => 
      selectedRegions.includes(feature.properties.region))
  });
}

function setAllMarkersVisible(mapSource) {
  mapSource.setData(stores); 
}

地图初始化JS部分

map.on('load', () => {
  map.addSource('places', {
    'type': 'geojson',
    'data': stores,
    'cluster': true,
    'clusterMaxZoom': 14,
    'clusterRadius': 50
  });

  map.addLayer({
    id: 'clusters',
    type: 'circle',
    source: 'places',
    filter: ['has', 'point_count'],
    paint: {
      'circle-color': [
        'step',
        ['get', 'point_count'],
        '#525CA3',
        100,
        '#525CA3',
        750,
        '#525CA3'
      ],
      'circle-radius': [
        'step',
        ['get', 'point_count'],
        20,
        100,
        30,
        750,
        40
      ]
    }
  });

  map.addLayer({
    id: 'cluster-count',
    type: 'symbol',
    source: 'places',
    filter: ['has', 'point_count'],
    layout: {
      'text-field': '{point_count_abbreviated}',
      'text-font': ['Open Sans Light'],
      'text-size': 12,
      "icon-image": "{marker-symbol}",
      "icon-size": 0.20
    },
    paint: {
      "text-color": "#ffffff"
    }
  });

  map.addLayer({
    id: 'unclustered-point',
    type: 'circle',
    source: 'places',
    filter: ['!', ['has', 'point_count']],
    paint: {
      'circle-color': '#525CA3',
      'circle-radius': 15,
      'circle-stroke-width': 1,
      'circle-stroke-color': '#fff'
    }
  });
});

问题排查 #

1. 筛选值不匹配：当前代码用checkbox.id作为筛选依据，但stores中feature.properties.region的实际值（如Region One）与checkbox.id（如region1）不一致，导致过滤后没有匹配的要素，标记点全部消失。
2. 缺少事件监听：代码未给复选框绑定change事件，点击复选框时不会触发filterMarkers函数（若手动添加过事件可忽略此点）。

修正方案 #

1. 修改复选框HTML，添加对应region的value

将复选框的value设为stores中实际的region值，确保筛选时能精准匹配：

<div>
  <input id="region1" type="checkbox" value="Region One" />
  <label for="region1">Region One</label>
</div>
<div>
  <input id="region2" type="checkbox" value="Region 2" />
  <label for="region2">Region 2</label>
</div>

2. 调整getSelectedRegions函数，获取复选框的value

不再使用checkbox.id，改用checkbox.value匹配实际的region值：

function getSelectedRegions() {
  const selectedRegions = [];
  const regionCheckboxes = document.querySelectorAll('input[type=checkbox]:checked');
  regionCheckboxes.forEach(checkbox => selectedRegions.push(checkbox.value));
  return selectedRegions;
}

3. 给复选框添加事件监听

在地图初始化完成后，给所有复选框绑定change事件，触发过滤逻辑：

// 在map.on('load')的末尾添加
document.querySelectorAll('input[type=checkbox]').forEach(checkbox => {
  checkbox.addEventListener('change', filterMarkers);
});

4. 验证region值匹配

确保stores.features中每个要素的properties.region值与复选框的value完全一致（包括大小写、空格），比如如果region值为region_one，复选框的value也需设为region_one。

额外优化 #

若需支持动态生成区域复选框，可遍历stores中的唯一region值自动创建，避免手动编写HTML：

// 获取所有唯一的region值
const uniqueRegions = [...new Set(stores.features.map(f => f.properties.region))];
// 假设页面中有一个用于放置复选框的容器
const filterContainer = document.getElementById('filter-container');

uniqueRegions.forEach(region => {
  const div = document.createElement('div');
  const checkboxId = `region-${region.replace(/\s+/g, '-')}`;
  div.innerHTML = `
    <input id="${checkboxId}" type="checkbox" value="${region}" />
    <label for="${checkboxId}">${region}</label>
  `;
  filterContainer.appendChild(div);
  div.querySelector('input').addEventListener('change', filterMarkers);
});

内容的提问来源于stack exchange，提问作者blogob