Mapbox,将鼠标悬停在侧边栏元素上时反弹相应的标记

时间:2019-06-29 17:01:46

标签: javascript mapbox

当我将对应的项目悬停在侧边栏上时,我想突出显示地图上的标记。

我在地图上以及侧边栏上都显示了相同的项目。

因此,我希望您将鼠标悬停在侧栏上的某个项目上,相应的标记会弹起,移动或执行某些操作。

我有一个map.on('load', function() {...}

在我加载来源markers,激活阴茎并添加一些图层的地方,

源是我使用后端数据构建的geojson文件。

我在哪里加载源,激活使用者并添加一些图层:

  map.on('load', function() {
    map.addSource('users', {
    type: "geojson",
    data: markers,
    cluster: true,
    });

      map.addLayer({
        id: "singles",
        type: "circle",
        source: "users",
        filter: ["!has", "point_count"],
        paint: {
            'circle-radius': {
                'base': 10,
                'stops': [[5, 20], [15, 500]]
            },
            'circle-color': '#ddffc8',
          }
      });

    map.addLayer({
      id: "clusters",
      type: "circle",
      source: "users",
      filter: ["has", "point_count"],
      paint: {
        "circle-color": '#ddffc8',
        'circle-radius': {
            'base': 10,
            'stops': [[5, 20], [15, 500]]
        },
      }
    });

    map.addLayer({
      id: "cluster-count",
      type: "symbol",
      source: "users",
      filter: ["has", "point_count"],
      layout: {
      "text-field": "{point_count_abbreviated}",
      "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
      "text-size": 12
      }
    })
})

我可以访问GeoJson,但是它只是一个包含每个标记信息的json文件,其中没有诸如marker.bounce之类的属性...

那么,当我将鼠标悬停在侧边栏项目上时,如何使相应的标记出现或者更改图标或执行某些操作呢?

谢谢。

0 个答案:

没有答案