Question

我正在尝试将事件侦听器添加到具有mapbox gl的图像层，但似乎不起作用，使用这种类型的层甚至可能吗？这是一个演示问题的Codepen：

var mapStyle = {
  'version': 8,
  'sources': {},
  'layers': []
}

var map = new mapboxgl.Map({
  container: 'map',
  maxZoom: 5,
  minZoom: 1,
  zoom: 5,
  center: [-75.789, 41.874],
  style: mapStyle
})

map.on('load', function() {
  map.addSource('firstim', {
    type: 'image',
    url: 'https://small-systems.org/dev/093-hvb/cms/site/assets/files/1104/6_umspannwerk_sellerstrasse.700x0.jpg',
    coordinates: [
      [-80.425, 46.437],
      [-71.516, 46.437],
      [-71.516, 37.936],
      [-80.425, 37.936]
    ]
  })

  map.addLayer({
    id: 'images',
    type: 'raster',
    source: 'firstim',
    paint: { 'raster-opacity': 1 }
  })

  map.on('click', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['images'] });
    var clusterId = features[0];
    // console.log(clusterId)
  });

  map.on('click', 'images', function (e) {
    console.log(e)
  });  
})

我尝试使用map.on（'click'，layerID，function）在图层上添加一个事件，但是它不起作用。都不使用queryRenderedFeatures。

感谢您的帮助。

Answer 1

https://github.com/mapbox/mapbox-gl-js/issues/1404尚未实现。

作为一种解决方法，您需要监听所有点击事件，然后进行自己的测试以查看点击是否在图片范围内。

如何将事件侦听器添加到Mapbox图像/栅格图层？

1 个答案: