如何在集群上添加onclick事件?- Flutter MapBox

Question

我一直在努力在我的集群上添加一个onClick功能，在地图上放大一点，但我不知道如何做到这一点，我找不到任何帮助的文档。

我一直在尝试与controller.onCircleTapped和controller.onFeatureTapped工作，但我不明白它是如何工作的，或者如何将回调链接到特定的集群。

谢谢大家!

下面是我当前的代码:

Future<void> addGeojsonCluster() async {
var geojson = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "pois" } },
"features": [
for(var marker in markers){
"type" : "Feature", "properties" : {"id" : marker.title}, "geometry": {"type" : "Point", "coordinates" : [marker.longitude, marker.latitude] }
},
]
};
await controller.addSource(
"poi",
GeojsonSourceProperties(
data: geojson,
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius:
50,  // Radius of each cluster when clustering points (defaults to 50)
)
);
await controller.addLayer(
"poi",
"poi-circles",
const CircleLayerProperties(
circleColor: [
Expressions.step,
[Expressions.get, 'point_count'],
'#51bbd6', //blue
100,
'#f1f075', //yellow
750,
'#f28cb1' //pink
],
circleRadius: [
Expressions.step,
[Expressions.get, 'point_count'],
20,
100,
30,
750,
40
]),
);
await controller.addSymbolLayer(
"poi",
"unclustered-point",
const SymbolLayerProperties(
textField: [Expressions.get, "id"],
textHaloWidth: 1,
textSize: 12.5,
textHaloColor: '#ffffff',
textOffset: [
Expressions.literal,
[0, 2]
],
iconImage: "images/mapbox_circle_marker.png",
iconSize: 2,
iconAllowOverlap: true,
textAllowOverlap: true,
textColor: '#000000',
textHaloBlur: 1,
),
filter: [
'!',
['has', 'point_count']
],
enableInteraction: true,
);
await controller.addLayer(
"poi",
"poi-count",
const SymbolLayerProperties(
textField: [Expressions.get, 'point_count_abbreviated'],
textFont: ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
textSize: 12,
));
}

Answer 1

需要在全图上注册一个OnTapListener，并查询全图上的所有地物

MapWidget(
onTapListener: _clickMap,
)

在_clickMap中，您查询地图上显示的所有内容，并根据返回决定要做什么。这里我放大到集群的下一个步骤。请记住，目前sdk中有一个已确认的错误。OnTapListener不是返回ScreenCoordinates，而是返回地理坐标。所以你需要先用pixelForCoordinate来转换它们。

void _clickMap(ScreenCoordinate coordinate) async {
ScreenCoordinate coordin = await mapboxMap!.pixelForCoordinate({
"coordinates": [coordinate.y, coordinate.x]
});
List<QueriedFeature?> features = await mapboxMap!.queryRenderedFeatures(
RenderedQueryGeometry(
type: Type.SCREEN_COORDINATE, value: json.encode(coordin.encode())),
RenderedQueryOptions(
layerIds: ['clusters', "unclustered-point"], filter: null));
if (features.isNotEmpty) {
if ((features[0]!.feature["properties"] as Map)['cluster'] != null) {
FeatureExtensionValue cluster = await mapboxMap!
.getGeoJsonClusterExpansionZoom(
'earthquakes', features[0]!.feature);
mapboxMap?.easeTo(
CameraOptions(
center: Point(
coordinates: Position(
(features[0]!.feature['geometry'] as Map)["coordinates"][0],
(features[0]!.feature['geometry'] as Map)["coordinates"][1],
)).toJson(),
zoom: double.parse(cluster.value!),
bearing: 0,
pitch: 0),
MapAnimationOptions(duration: 500, startDelay: 0));
}}}

希望有帮助:)