Mapbox GL点击生成的省界图层缩放时被截断问题求助

核心问题原因 #

你遇到的多边形截断问题，本质是从Vector Tile中获取的几何是被瓦片切割后的片段，而非省份的完整多边形。Mapbox的Vector Tile会将大的地理要素分割成当前视口瓦片范围内的部分，所以点击时e.features[0].geometry.coordinates只是该瓦片内的片段，不是整个省份的完整边界。另外，每次点击都重复添加同名图层（mainLine、outline），也会导致图层叠加冲突，加重显示异常。

具体修复步骤 #

1. 提前准备完整的省份GeoJSON数据 #

不要依赖点击瓦片时返回的切割后几何，提前将西班牙各省的完整边界GeoJSON数据存储在前端（或通过接口获取），比如定义一个变量：

const provincesFullGeoJSON = {
  "type": "FeatureCollection",
  "features": [
    // 这里是所有省份的完整Feature数据，包含完整geometry和属性（比如id、名称）
  ]
};

2. 点击时匹配完整几何 #

点击provincias_fill图层时，通过特征的唯一标识（比如省份ID）从完整GeoJSON中找到对应的完整Feature，再更新数据源：

this.map.on('click', 'provincias_fill', (e) => {
  // 获取点击省份的唯一标识，比如id
  const provinceId = e.features[0].properties.id;
  // 从完整数据中找到对应省份的完整Feature
  const targetProvince = provincesFullGeoJSON.features.find(f => f.properties.id === provinceId);

  if (targetProvince) {
    this.map.getSource('provinceClicked').setData({
      "type": "FeatureCollection",
      "features": [targetProvince]
    });
  }

  // 处理图层：先检查是否存在，存在则更新，不存在再添加
  if (!this.map.getLayer('mainLine')) {
    this.map.addLayer({
      'id': 'mainLine',
      'type': 'fill',
      'source': 'provinceClicked',
      'layout': {},
      'paint': {
        'fill-color': '#0080ff',
        'fill-opacity': 0.1
      }
    });
  }

  if (!this.map.getLayer('outline')) {
    this.map.addLayer({
      'id': 'outline',
      'type': 'line',
      'source': 'provinceClicked',
      'layout': {},
      'paint': {
        'line-color': '#000',
        'line-width': 3
      }
    });
  }
});

3. 移除重复图层（可选） #

如果需要每次点击切换省份时清除之前的高亮，可以在更新数据前移除旧图层（如果存在）：

// 点击事件开头添加
if (this.map.getLayer('mainLine')) {
  this.map.removeLayer('mainLine');
}
if (this.map.getLayer('outline')) {
  this.map.removeLayer('outline');
}

额外注意事项 #

• 确保完整GeoJSON的多边形坐标是闭合的（首尾坐标一致），并且符合GeoJSON规范。
• 如果完整GeoJSON数据量较大，可以考虑通过后端接口根据省份ID返回单个省份的完整几何，减少前端加载压力。

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