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

edqdpe6u 于 2022-12-14 发布在 Flutter

关注(0)|答案(1)|浏览(157)

我一直在努力尝试在我的集群上添加一个onClick函数，它可以在Map上进行一点缩放，但我不知道如何做到这一点，而且我在文档中也找不到任何帮助。
我一直在尝试使用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,
      ));
}

'

flutter

来源：https://stackoverflow.com/questions/74732956/how-to-add-an-onclick-event-on-clusters-flutter-mapbox

1条答案

按热度按时间

qacovj5a1#

您需要在整个Map上注册一个OnTapListener，并查询Map上的所有要素。

MapWidget(
 onTapListener: _clickMap,
)

在_clickMap中，您可以查询Map上显示的所有内容，并根据返回的结果决定要做什么。在这里，我放大到下一个集群步骤。请记住，目前sdk中存在一个已确认的bug。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));
       }}}

希望能有所帮助：）

赞(0）回复(0）举报 2022-12-14

我来回答

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

1条答案

相关问题

热门标签

最新问答