时间戳

首页 > 解决方案 > 鼠标事件处理程序在 vue-mapbox 包中不起作用

vue.js - 鼠标事件处理程序在 vue-mapbox 包中不起作用

问题描述

当用户单击集群时，我试图让我的地图放大到集群。该地图是使用 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. @click.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
      ]
    }
  },

标签： vue.jsmouseeventmapbox-gl-js

解决方案

这有效...

  //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
      ]
    }
  },

推荐阅读