使用 Mapbox 地图在 Flutter 中显示地图图层中的功能 ID

Question

我正在开发一个利用 Mapbox 地图的 Flutter 应用程序，当用户单击特定地图图层时，我在显示要素 ID 方面面临着挑战。 所以基本上，我的 Flutter 应用程序中有一个 Mapbox 地图，我在其中加载了具有各种功能的 GeoJSON 数据，并使用 mapbox_maps_flutter 根据其状态分配了不同的图层：^0.5.1,

当用户单击特定图层（那些网格）内的某个要素时，我想以弹出窗口、Snackbar 或任何其他用户友好的方式显示其要素 ID。 由于没有关于点击或点击事件如何工作的明确文档或说明，我无法满足我的要求

/*view page code */
SizedBox(
  height: Get.height,
  child: Obx(() => MapWidget(
        key: const ValueKey("mapWidget"),
        onMapCreated: controller.onMapCreated,
        cameraOptions: CameraOptions(
            center: Point(
                    coordinates:
                        Position(-107.882000467, 47.616100673))
                .toJson(),
            zoom: controller.zoom.value),
        resourceOptions: ResourceOptions(
          accessToken: "<MAPBOX ACCESSS TOKEN>",
        ),
      )),
)
/* view page code */

/* controller page code */
Rx<MapboxMap?> mapboxMap = Rx<MapboxMap?>(null);

Future<void> onMapCreated(MapboxMap mapboxMap) async {
    this.mapboxMap.value = mapboxMap;

    // Load GeoJSON data
    var data = await rootBundle.loadString('assets/geo.geojson');
    var geoJson = json.decode(data);
    var geoJsonFeatures = geoJson['features'];

    // Create a Map to store colors based on status
    Map<int, Color> statusColors = {
      1: Color.fromARGB(128, 247, 247, 0), // 50% opacity
      2: Color.fromARGB(128, 24, 225, 31), // 50% opacity
      3: Color.fromARGB(128, 13, 104, 185), // 50% opacity
      4: const Color.fromARGB(0, 229, 210, 210), // Custom color for status 4
    };

    // Filter GeoJSON features based on status and create separate sources
    for (var status in statusColors.keys) {
      var filteredFeatures = geoJsonFeatures
          .where((feature) =>
              feature['properties'] != null &&
              feature['properties']['status'] == status)
          .toList();

      var filteredGeoJson = {
        'type': 'FeatureCollection',
        'features': filteredFeatures,
      };

      await mapboxMap.style.addSource(GeoJsonSource(
        id: 'fill_source_$status',
        data: json.encode(filteredGeoJson), // Ensure GeoJSON is a string
      ));

      await mapboxMap.style.addLayer(FillLayer(
        id: 'fill_layer_$status',
        sourceId: 'fill_source_$status',
        fillColor: statusColors[status]?.value ?? Colors.transparent.value,
        fillOutlineColor: Colors.black.value,
        fillOpacity: .5,
      ));
    }
  }
/* controller page code*/

这是我的示例 geojson 数据，

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -107.900000467,
              47.598100673
            ],
            [
              -107.891000467,
              47.598100673
            ],
            [
              -107.891000467,
              47.589100673
            ],
            [
              -107.900000467,
              47.589100673
            ],
            [
              -107.900000467,
              47.598100673
            ]
          ]
        ]
      },
      "properties": {
        "dbId": "5",
        "status": 4,
        "uid": null,
        "isBlocked": 0,
        "id": "5",
        "left": -107.900000467,
        "top": 47.598100673,
        "right": -107.891000467,
        "bottom": 47.589100673
      }
    },...    
  ]
}

我已经查看了 Mapbox 地图文档，但找不到实现此特定功能的明确示例。任何帮助或代码片段将不胜感激。谢谢！

Answer 1

由于他们的文档仅列出了少量成分（mapbox_maps_flutter：~0.5.1），我使用了不同的包，mapbox_gl：~0.16.0，来满足我的需求。

/* view code */
MapboxMap(
    onMapCreated: controller.onMapCreated,
    zoomGesturesEnabled: true,
    accessToken:"<MAPBOX ACCESS TOKEN>",
    initialCameraPosition: const CameraPosition(
        target: LatLng(47.60498923803516, -107.06846142289754),
        zoom: 12),
)
/* view code */
* controller code */
void onMapCreated(MapboxMapController mapboxMap) async {
    // await getJson();

Create a Map to store colors based on status
    Map<int, String> statusColors = {
      1: convertColorToRgba(const Color.fromARGB(128, 221, 143, 137), 1),
      2: convertColorToRgba(const Color.fromARGB(128, 68, 235, 73), 1),
      3: convertColorToRgba(const Color.fromARGB(128, 14, 125, 215), 1),
      4: 'rgba(0, 0, 255, 0.0)', // Transparent color for status 4
    };

   //Add the GeoJSON source to the map
    await mapboxMap.addSource("fills", GeojsonSourceProperties(data: geojson));

   //Add the fill layer with the specified color and filter
    await mapboxMap.addFillLayer(
      "fills",
      "fills",
      FillLayerProperties(
        fillColor: [
          "step", ["get", "status"],
          statusColors[1], 1,
          statusColors[2], 2,
          statusColors[3], 3,
          statusColors[4], 4,
          'rgba(0, 0, 255, 0.0)' // Default color
        ],
        fillOpacity: 0.4,
        fillOutlineColor: 'rgba(0, 0, 0, 1)',
      ),
      filter: [
        "has",
        "status"
      ], // Add filter to only render features with a "status" property
      enableInteraction: true,
    );
    
    update();
  }
* controller code */

这段代码运行良好；此外，这个包还有一些专用函数来实现特定的功能，例如

onFeatureTap

，并且他们有足够的社区资源。 如需更多参考，您可以查看此 GitHub 文档： https://github.com/flutter-mapbox-gl/maps/tree/b2bfef669e42397704b6f43d55b5df67b18c0fa8/example/lib