使用 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,
),
),
),
),
)
],
),
),
),
)
],
)
由于我找不到任何资源或文档,我不知道渲染图如何响应用户的缩放控制进行更新,也不知道该插件中的缩放事件如何真正运行。任何帮助或代码片段将不胜感激。谢谢!
// 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),);
}
}