Flutter中使用mapbox_gl进行缩放控制：^0.16.0

Question

使用 mapbox_gl: ~0.16.0 插件，我正在开发一个 Flutter-Mapbox 应用程序。 我已使用 api 获取的 GeoJSON 数据源向地图添加了填充图层，但我仍然需要添加类似于以下内容的放大和缩小控件： 由于我无法通过 mapbox_gl 找到任何合适的基于插件的缩放控制属性或属性，因此我创建了自己的缩放控制器设计。但是我不知道如何实现放大和缩小功能。 这是我的简化代码片段：

// view code
Stack(
  children: [
    SizedBox(
      height: Get.height,
      child: GetBuilder<HomeController>(
        init: HomeController(),
        initState: (_) {},
        builder: (_) {
          return 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),
            doubleClickZoomEnabled: true,
            trackCameraPosition: true,
            onCameraIdle: () {
              controller.getView(mapboxMapController);
            },
            myLocationEnabled: false,
            styleString: "mapbox://styles/mapbox/outdoors-v12",
            compassEnabled: true, // Show the compass button
            rotateGesturesEnabled: false, // Allow rotation gestures
            tiltGesturesEnabled: false, // Allow tilt gestures
            
          );
        },
      ),
    ),
    ...other widgets
    Positioned(
      bottom: 150,
      right: 10,
      child: Container(
        decoration: BoxDecoration(
            color: white, borderRadius: BorderRadius.circular(6)),
        width: 37,
        child: Padding(
          padding: const EdgeInsets.symmetric(
              vertical: 5.0, horizontal: 5),
          child: Column(
            children: [
              InkWell(
                onTap: () {
                  controller.zoomIn();
                },
                child: const SizedBox(
                  child: DecoratedBox(
                    decoration: BoxDecoration(
                      color: white,
                    ),
                    child: Padding(
                      padding: EdgeInsets.all(3.0),
                      child: Icon(
                        Icons.add,
                        color: black,
                        size: 23,
                      ),
                    ),
                  ),
                ),
              ),
              const SizedBox(
                height: 4,
              ),
              Container(
                height: 1,
                color: const Color.fromARGB(255, 226, 226, 226),
              ),
              const SizedBox(
                height: 4,
              ),
              InkWell(
                onTap: () {
                  controller.zoomOut();
                },
                child: const SizedBox(
                  child: DecoratedBox(
                    decoration: BoxDecoration(
                      color: white,
                    ),
                    child: Padding(
                      padding: EdgeInsets.all(3),
                      child: Icon(
                        Icons.remove,
                        color: black,
                        size: 23,
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    )
  ],
)

由于我找不到任何资源或文档，我不知道渲染图如何响应用户的缩放控制进行更新，也不知道该插件中的缩放事件如何真正运行。任何帮助或代码片段将不胜感激。谢谢！

Answer 1

  // Method to handle zoom in
  Future<void> zoomIn(MapboxMapController mapboxMap) async {
    double currentZoom = mapboxMap.cameraPosition!.zoom;

    CameraPosition newCameraPosition = CameraPosition(
      target: mapboxMap.cameraPosition!.target,
      zoom: currentZoom + 1,
    );

    mapboxMap.animateCamera(CameraUpdate.newCameraPosition(newCameraPosition));
  }

  // Method to handle zoom out
  Future<void> zoomOut(MapboxMapController mapboxMap) async {
    double currentZoom = mapboxMap.cameraPosition!.zoom;

    if (currentZoom > 1) {
      CameraPosition newCameraPosition = CameraPosition(
        target: mapboxMap.cameraPosition!.target,
        zoom: currentZoom - 1,
      );

      mapboxMap
          .animateCamera(CameraUpdate.newCameraPosition(newCameraPosition),);
    }
  }