Mapbox Flutter：如何在功能点击上显示弹出窗口？

Question

我正在使用 mapbox_gl: ~0.16.0 插件开发 Flutter 应用程序，并且我很难实现当用户点击地图上的某个功能时显示弹出窗口的功能。由于我无法找到任何合适的基于插件的弹出控件或类似功能，因此我不确定如何合并该特定功能。 这是我的代码的简化版本：

/* view code */
 MapboxMap(
  onMapCreated: (mController) {
    mapboxMapController = mController;
    controller.onMapCreated(mController);
  },
  zoomGesturesEnabled: true,
  accessToken: "<MAPBOX ACCESS TOKEN>",
  initialCameraPosition: const CameraPosition(
      target:
          LatLng(47.59051426075817, -107.77329953835964),
      zoom: 15.0),
  trackCameraPosition: true,
  onCameraIdle: () {
    controller.getView(mapboxMapController);
  },
  styleString:
      "mapbox://styles/mapbox/outdoors-v12?optimize=true&attribution=false&logo=false",
  rotateGesturesEnabled: false, // Allow rotation gestures
  tiltGesturesEnabled: false, // Allow tilt gestures
);
/* view code */

/* controller code */
 void onMapCreated(MapboxMapController mapboxMap) async {
  var bounds = await mapboxMap.getVisibleRegion();

  double northeastLat = bounds.northeast.latitude;
  double northeastLng = bounds.northeast.longitude;
  double northwestLat = bounds.northeast.latitude;
  double northwestLng = bounds.southwest.longitude;
  double southeastLat = bounds.southwest.latitude;
  double southeastLng = bounds.northeast.longitude;
  double southwestLat = bounds.southwest.latitude;
  double southwestLng = bounds.southwest.longitude;

  String queryString =
      "myAPI.php?northeastLat=$northeastLat&northeastLng=$northeastLng&"
      "northwestLat=$northwestLat&northwestLng=$northwestLng&"
      "southeastLat=$southeastLat&southeastLng=$southeastLng&"
      "southwestLat=$southwestLat&southwestLng=$southwestLng&"
      "zmLvl=15&uid=100";

  Map<String, dynamic> mappedData = {};

  var servResJson = await sendDataServer(queryString, mappedData);
  var servRes = jsonDecode(jsonEncode(servResJson.data));
  geojson = Map<String, Object>.from(servRes);

  await Future.wait([
    mapboxMap.removeLayer("fills-count"),
    mapboxMap.removeLayer("fills-circle"),
    mapboxMap.removeLayer("fills-fills"),
    mapboxMap.removeSource("fills"),
    mapboxMap.addSource(
      "fills",
      GeojsonSourceProperties(
        data: geojson,
      ),
    ),
    mapboxMap.addFillLayer(
      "fills",
      "fills-fills",
      FillLayerProperties(
        fillColor: [
          "match",
          ["get", "status"],
          1, statusColors[1], // Status 1 - Blue
          2, statusColors[2], // Status 2 - Yellow
          3, statusColors[3], // Status 3 - Green
          4, statusColors[4], // Status 4 - Transparent
          convertColorToRgba(
              const Color.fromARGB(128, 246, 246, 246), 0), // Default color
        ],
        fillAntialias: true,
        fillOpacity: 0.6,
        fillOutlineColor: 'rgba(0, 0, 0, 1)',
      ),
      filter: ["has", "status"],
      enableInteraction: true,
    ),
  ]);
  
  update();
}
/* controller code */

这是我来自 API 的 GeoJSON 响应示例：

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": "56019",
            "status": 2,
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [
                            -107.774000467,
                            47.598100673
                        ],
                        [
                            -107.765000467,
                            47.598100673
                        ],
                        [
                            -107.765000467,
                            47.589100673
                        ],
                        [
                            -107.774000467,
                            47.589100673
                        ],
                        [
                            -107.774000467,
                            47.598100673
                        ]
                    ]
                ]
            },
            "properties": {
                "dbId": "56019",
                "status": 2,
                "uid": 100,
                "isBlocked": 0,
                "id": "56019",
                "left": -107.774000467,
                "top": 47.598100673,
                "right": -107.765000467,
                "bottom": 47.589100673
            }
        },
        // some more items
    ]
}

当用户点击 Mapbox 地图上的某个要素时，我想显示一个弹出窗口，其中包含所点击要素的 id。任何帮助或指导将不胜感激。

我不确定如何处理这个代码块，因为当我尝试它时，我收到的只是功能/属性 ID。是否可以在不创建新对话框小部件的情况下显示包附带的弹出窗口？

mapboxMap.onFeatureTapped.add((id, point, coordinates) {
  if (id != null) {
    debugPrint(
        'Tapped feature with ID - $id, Point - $point, Coordinates - $coordinates');
  }
});

我有这样的需求：

Answer 1

您可以添加一个flutteralertDialog：https://api.flutter.dev/flutter/material/AlertDialog-class.html