ios - Flutter 点击手势不适用于 UiKitView 和 MapBox

Question

我正在尝试找到将 MapBox 与 Flutter 结合使用的最佳方法，而 UiKitView/AndroidView 似乎是一个不错的方法。

我已经成功设置了一个 UiKitView，它加载带有注释和绘制折线的 MapBox，但是尝试使用 MapBox 允许的一些手势，例如点击注释以显示标注或使用 long 将注释放置在 map 上按下手势不起作用。应用程序运行时我没有看到任何错误或任何内容，因此很难判断是否出了问题或者只是没有执行任何操作。

某些手势确实有效，例如平移 map 或双击放大，但我想从 MapBox 获取全部或至少大部分功能。我也尝试过为 UiKitView 返回一个正常的 UIView 并传递手势，但我也没有任何运气，所以我认为我没有正确处理手势。

下面是 UiKitView 的实现

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Map App'),
        ),
        body: Container(
          child: Center(
              child: SizedBox(
                  height: double.infinity, width: double.infinity, child: MapBoxUIKitView())
              ),
        ),
      ),
    );
  }
}

class MapBoxUIKitView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MapBoxUIKitViewState();
  }
}

class MapBoxUIKitViewState extends State<MapBoxUIKitView> {
  @override
  Widget build(BuildContext context) {
    return UiKitView(
      viewType: "com.mapapp/mapbox_uikitview",
      gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[
        new Factory<OneSequenceGestureRecognizer>(
            () => new EagerGestureRecognizer())
      ].toSet(),
    );
  }
}

下面是 AppDelegate.swift

import UIKit
import Flutter
import Mapbox

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    let mapBoxViewFactory = MapBoxViewFactory()
    registrar(forPlugin: "MapApp").register(mapBoxViewFactory, withId: "com.mapapp/mapbox_uikitview")

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

public class MapBoxViewFactory : NSObject, FlutterPlatformViewFactory {
    public func create(withFrame frame: CGRect, viewIdentifier viewId: Int64, arguments args: Any?) -> FlutterPlatformView {
        return MapBoxView(frame, viewId: viewId, args: args)
    }
}

public class MapBoxView : NSObject, FlutterPlatformView, MGLMapViewDelegate {
    let frame: CGRect
    let viewId: Int64
    var mapView: MGLMapView!

    init(_ frame: CGRect, viewId: Int64, args: Any?) {
        self.frame = frame
        self.viewId = viewId
    }

    public func view() -> UIView {
        let url = URL(string: "mapbox://styles/mapbox/streets-v11")
        mapView = MGLMapView(frame: frame, styleURL: url)
        mapView.delegate = self

        mapView.setCenter(CLLocationCoordinate2D(latitude: 45.522585, longitude: -122.685699), zoomLevel: 9, animated: false)

        var coordinates = [
        CLLocationCoordinate2D(latitude: 45.522585, longitude: -122.685699),
        CLLocationCoordinate2D(latitude: 45.534611, longitude: -122.708873),
        CLLocationCoordinate2D(latitude: 45.530883, longitude: -122.678833),
        CLLocationCoordinate2D(latitude: 45.547115, longitude: -122.667503),
        CLLocationCoordinate2D(latitude: 45.530643, longitude: -122.660121)
        ]

        let shape = MGLPolylineFeature(coordinates: &coordinates, count: UInt(coordinates.count))
        let source = MGLShapeSource(identifier: "route-source", features: [shape], options: nil)

        let lineStyle = MGLLineStyleLayer(identifier: "route-style", source: source)
        lineStyle.lineColor = NSExpression(forConstantValue: #colorLiteral(red: 0.1897518039, green: 0.3010634184, blue: 0.7994888425, alpha: 1))
        lineStyle.lineWidth = NSExpression(forConstantValue: 3)

        mapView.style?.addSource(source)
        mapView.style?.addLayer(lineStyle)

        mapView.addAnnotation(shape)
        let annotation = MGLPointAnnotation()
        annotation.coordinate = CLLocationCoordinate2D(latitude: 45.522585, longitude: -122.685699)
        annotation.title = "Annotation"
        mapView.addAnnotation(annotation)

        let longPress = UILongPressGestureRecognizer(target: self, action: #selector(didLongPress(_:)))
        mapView.addGestureRecognizer(longPress)

        return mapView
    }

    // Implement the delegate method that allows annotations to show callouts when tapped
    func mapView(_ mapView: MGLMapView, annotationCanShowCallout annotation: MGLAnnotation) -> Bool {
        return true
    }

    @objc func didLongPress(_ sender: UILongPressGestureRecognizer) {
        guard sender.state == .began else { return }

            let point = sender.location(in: mapView)
            let coordinate = mapView.convert(point, toCoordinateFrom: mapView)

            let annotation = MGLPointAnnotation()
            annotation.coordinate = coordinate
            annotation.title = "Long Press"
            mapView.addAnnotation(annotation)
    }
}

对所有代码感到抱歉，但我认为展示全部代码会很有用。谢谢

Answer 1

您可能想查看mapbox_gl plugin对于 flutter 。它将原生 Android/iOS Mapbox map View 显示为支持所有常用手势的 Flutter 小部件，这似乎就是您想要实现的目标。