Mapbox GL JS：搜索高亮多边形时出现裁剪问题求解决方案

问题根源 #

你当前使用map.queryRenderedFeatures()获取多边形的方式存在缺陷——这个API仅能返回当前地图视口范围内实际渲染出的图形片段，无法获取完整的行政区划多边形，因此高亮时只会显示视口内的局部区域，出现裁剪效果。

解决方案 #

改用以下两种方式之一获取完整多边形：

方法1：通过Geocoding结果的要素ID匹配矢量图层完整要素 #

利用Geocoding返回的features[0].id（行政区划唯一标识），直接从Vector Source中查询对应完整要素：

geo.geocode('mapbox.places', searchAreaName, function (err, geoData) {
  if(geoData) {
    const targetFeatureId = geoData.features[0].id;
    // 从vector source中查询完整要素
    map.current.querySourceFeatures('state', {
      sourceLayer: 'boundaries_admin_1',
      filter: ['==', 'id', targetFeatureId]
    }).then(fullFeatures => {
      if(fullFeatures.length > 0) {
        // 直接使用完整要素添加到Draw控件
        draw.add(fullFeatures[0]);
      } else {
        console.log('未找到匹配的完整要素');
      }
    });
  }
});

方法2：让Geocoding直接返回完整多边形 #

在Geocoding请求中指定类型与几何参数，直接获取完整的多边形数据：

// 修改Geocoding请求，指定返回多边形
geo.geocode('mapbox.places', searchAreaName, {
  types: 'admin1', // 匹配boundaries-adm1-v3的层级
  geometry: 'polygon'
}, function (err, geoData) {
  if(geoData && geoData.features[0].geometry.type === 'Polygon') {
    // 直接用返回的完整多边形添加到Draw
    draw.add(geoData.features[0]);
  } else {
    console.log('未获取到完整多边形');
  }
});

额外注意事项 #

• 确保你的Mapbox Token拥有访问mapbox.boundaries-adm1-v3矢量图层的权限
• 使用方法1时，需确认Geocoding返回的id与矢量图层中的id字段匹配（可通过console.log(fullFeatures[0])查看字段详情）
• 移除原代码中基于queryRenderedFeatures的逻辑，避免逻辑冲突

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