Flutter Mapbox GL中GeoJSON图层点击获取ID为空的解决求助

问题原因分析 #

你遇到的点击要素后id为空的问题，主要源于以下几点：

1. GeoJSON结构不匹配：你的Feature的id字段放在properties内部，而Mapbox默认识别的是Feature顶级的id字段，而非properties中的id。
2. 代码逻辑遗漏：loadGeoJSON方法未在onMapCreated中调用，导致geojsonString为空，且添加数据源时直接使用了未定义的geojson变量。
3. onFeatureTapped的局限性：该回调返回的id在Feature无顶级id时会为空，更可靠的方式是使用queryRenderedFeatures获取完整要素信息。

解决方案及代码修改 #

方案1：调整GeoJSON结构（推荐） #

将Feature的id从properties移到顶级位置，示例：

{
  "type": "Feature",
  "id": "5", // 移至Feature顶级
  "geometry": { ... },
  "properties": {
    "dbId": "5",
    "status": 4,
    // 移除properties内的id字段
    ...
  }
}

方案2：添加数据源时启用自动生成id #

如果无法修改GeoJSON，可以在添加GeojsonSourceProperties时设置generateId: true，让Mapbox自动为每个Feature生成唯一id：

await mapboxMap.addSource(
  "fills",
  GeojsonSourceProperties(
    data: jsonDecode(geojsonString),
    generateId: true, // 启用自动生成id
  ),
);

方案3：使用queryRenderedFeatures获取完整要素信息 #

若需要获取要素的所有属性（包括properties里的id），可在点击时调用queryRenderedFeatures，这比依赖onFeatureTapped的id更可靠：

修改onMapCreated中的点击回调：

mapboxMap.onMapClick.add((point, coordinates) async {
  // 查询点击位置的渲染要素
  List<Feature> features = await mapboxMap.queryRenderedFeatures(
    point,
    layers: ["fills"], // 指定仅查询fills图层
  );

  if (features.isNotEmpty) {
    Feature tappedFeature = features.first;
    // 获取properties里的id
    String featureId = tappedFeature.properties["id"];
    print("点击的要素ID: $featureId");
    print("完整要素属性: ${tappedFeature.properties}");
  }
});

完整修正后的Controller代码 #

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:get/get.dart';
import 'package:mapbox_gl/mapbox_gl.dart';

class HomeController extends GetxController {
  String geojsonString = "";

  Map<int, Color> statusColors = {
    1: const Color.fromARGB(128, 221, 143, 137),
    2: const Color.fromARGB(128, 68, 235, 73),
    3: const Color.fromARGB(128, 14, 125, 215),
    4: Colors.transparent,
  };

  @override
  void onInit() {
    super.onInit();
  }

  @override
  void onReady() {
    super.onReady();
  }

  @override
  void onClose() {}

  Future<void> loadGeoJSON() async {
    geojsonString = await rootBundle.loadString('assets/geo.geojson');
  }

  void onMapCreated(MapboxMapController mapboxMap) async {
    // 先加载并解析GeoJSON数据
    await loadGeoJSON();
    final geojsonData = jsonDecode(geojsonString);

    // 添加GeoJSON源，启用自动生成id（可选）
    await mapboxMap.addSource(
      "fills",
      GeojsonSourceProperties(
        data: geojsonData,
        generateId: true,
      ),
    );

    // 添加填充图层
    await mapboxMap.addFillLayer(
      "fills",
      "fills",
      const FillLayerProperties(
        fillColor: 'rgba(0, 0, 255, 0.4)',
        fillOpacity: 0.4,
      ),
      filter: ['==', ['get', 'status'], 1],
    );

    // 使用onMapClick结合queryRenderedFeatures获取要素信息
    mapboxMap.onMapClick.add((point, coordinates) async {
      List<Feature> features = await mapboxMap.queryRenderedFeatures(
        point,
        layers: ["fills"],
      );

      if (features.isNotEmpty) {
        var props = features.first.properties;
        print("点击要素的ID: ${props["id"]}");
        print("要素状态: ${props["status"]}");
        // 按需获取其他属性
      }
    });
  }
}

关键注意事项 #

• 确保loadGeoJSON方法被调用，且GeoJSON数据正确解析为JSON对象。
• 若依赖onFeatureTapped的id，必须保证Feature有顶级id字段，或启用generateId。
• queryRenderedFeatures可获取完整的要素属性，适合需要读取多个属性的场景。

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