Mouseevent处理程序在vue-mapbox程序包中不起作用

Question

当用户单击群集时，我试图使我的地图放大到群集。该地图是使用mapbox gl和Vue-Mapbox构建的。我知道我可以使用getClusterExpansionZoom（）方法来执行此操作，但是第一步是检测用户单击了哪个群集。我的@click处理程序未检测到点击。为什么不？我必须改变什么？干杯

<template>
<div>
<MglMap>
      <MglGeojsonLayer
        class="mgl-clusters-layer"
        layerId="clustersLayerId"
        :layer="clustersLayer"
        :source="clustersSource"
        sourceId="clustersSourceId"
        @click="clickedCluster()"
      />
</div>
</template>

这些变体也不起作用...

1. @ click =“ clickedCluster”
2. @ map-click =“ clickedCluster（）”
3. @@。prevent =“ clickedCluster”

这里是我的事件处理程序...

  methods: {
    clickedCluster() {
      console.log("clicked cluster");
    }
  }

这里是clustersSource对象的定义

 clustersSource: {
    type: "geojson",
    cluster: true,
    clusterRadius: 25,
    clusterProperties: { sum: ["+", ["get", "docCount"]] },
    data: {
      type: "FeatureCollection",
      features: []
    }
  },

简单geojson点的data.features数组

这里是clustersLayer的定义...

clustersLayer: {
    id: util.getRandomValue(),
    type: "circle",
    filter: ["has", "point_count"],
    paint: {
      "circle-color": "#6a0dad",
      "circle-opacity": 0.4,
      "circle-stroke-color": "#6a0dad",
      "circle-stroke-width": 1,
      "circle-radius": [
        "step",
        ["get", "sum"],
        8,
        100,
        10,
        1000,
        12,
        10000,
        14,
        100000,
        16,
        1000000,
        18
      ]
    }
  },

Answer 1

此方法...

  //Make map zoom to a districts cluster when user clicks the cluster
  this.map.on("click", "clustersLayerId", function(e) {
    var features = $this.map.queryRenderedFeatures(e.point, {
      layers: ["clustersLayerId"]
    });
    $this.map.easeTo({
      center: features[0].geometry.coordinates,
      zoom: $this.map.getZoom() + 1
    });
  });

您还必须在clustersLayer对象中指定ID ...

clustersLayer: {
    id: "clustersLayerId",
    type: "circle",
    filter: ["has", "point_count"],
    paint: {
      "circle-color": "#6a0dad",
      "circle-opacity": 0.4,
      "circle-stroke-color": "#6a0dad",
      "circle-stroke-width": 1,
      "circle-radius": [
        "step",
        ["get", "sum"],
        8,
        100,
        10,
        1000,
        12,
        10000,
        14,
        100000,
        16,
        1000000,
        18
      ]
    }
  },