使用mapbox_maps_flutter时queryRenderedFeatures返回空列表问题

核心问题分析 #

你遇到的queryRenderedFeatures返回空列表的问题，主要来自两个关键遗漏：未添加GeoJSON数据源和查询图层范围不全，以下是具体修复步骤：

1. 补充添加GeoJSON数据源 #

你的代码只加载了图层配置，但没有将cluster_source.json对应的数据源注册到地图样式中。图层必须关联已存在的数据源才能正常渲染和被查询。在添加所有图层前，先添加数据源：

_controller.style.styleLayerExists('clusters').then((value) async {
  if (!value) {
    // 先加载并添加数据源（这一步你之前漏掉了）
    var clusterSource = await rootBundle.loadString('assets/cluster/cluster_source.json');
    await _controller.style.addStyleSource('markers', clusterSource);

    // 以下是你原有的加载图标、添加图层的代码
    final ByteData cpMarkerDarkByte = await rootBundle.load('assets/icons/cp_marker_dark.png');
    final Uint8List cpMarkerDarkList = cpMarkerDarkByte.buffer.asUint8List();

    final ByteData cpMarkerLightByte = await rootBundle.load('assets/icons/cp_marker_light.png');
    final Uint8List cpMarkerLightList = cpMarkerLightByte.buffer.asUint8List();

    await _controller.style.addStyleImage(
        'cp_marker_dark', 2, MbxImage(width: 64, height: 80, data: cpMarkerDarkList), false, [], [], null);

    var layer = await rootBundle.loadString('assets/cluster/cluster_layer.json');
    _controller.style.addStyleLayer(layer, null);

    var clusterCountLayer = await rootBundle.loadString('assets/cluster/cluster_count_layer.json');
    _controller.style.addStyleLayer(clusterCountLayer, null);

    var unclusteredPointLayer = await rootBundle.loadString('assets/cluster/unclustered_point_layer.json');
    _controller.style.addStyleLayer(unclusteredPointLayer, null);
  }
});

注意：数据源ID markers必须和你所有图层配置中的source字段完全一致。

2. 扩大查询的图层范围 #

你当前只查询了clusters图层，但未聚合的单个标记对应的图层是unclustered-point。需要将这两个图层都加入查询列表，才能覆盖点击聚合点和单个标记的场景：

Future<void> _onTapListener(ScreenCoordinate coord) async {
  final List<QueriedFeature?> features = await _controller.queryRenderedFeatures(
    RenderedQueryGeometry(value: jsonEncode(coord.encode()), type: Type.SCREEN_COORDINATE),
    // 同时查询聚合点和单个标记的图层
    RenderedQueryOptions(layerIds: ['clusters', 'unclustered-point'], filter: null),
  );

  // 处理查询结果
  if (features.isNotEmpty && features.first != null) {
    final feature = features.first!;
    print('点击的要素属性: ${feature.properties}');
    // 聚合点会包含point_count等专属属性
    if (feature.properties.containsKey('point_count')) {
      print('聚合点包含的点位数量: ${feature.properties['point_count']}');
    }
    // 单个标记可以获取你自定义的属性，比如image_prop
    if (feature.properties.containsKey('image_prop')) {
      print('单个标记的image_prop属性: ${feature.properties['image_prop']}');
    }
  } else {
    print('未查询到目标要素');
  }
}

3. 额外验证点 #

• 确认图层添加顺序：建议先添加聚合点图层，再添加未聚合点图层，避免图层遮挡导致点击检测失效。
• 检查cluster_source.json中的配置：确保cluster: true、clusterRadius、clusterMaxZoom参数符合你的业务需求，错误的聚合配置可能导致要素不显示或无法被查询。

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