如何在集群上添加 onclick 事件？ - 颤振地图框答案

【问题标题】：How to add an onclick event on clusters? - Flutter MapBox如何在集群上添加 onclick 事件？ - 颤振地图框
【发布时间】：2022-12-13 17:58:17
【问题描述】：

我一直在非常努力地在我的集群上添加一个 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,
      ));
}

【问题讨论】：

标签： android flutter mapbox mapbox-gl

【解决方案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));
       }}}

希望有帮助:)

【讨论】：