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

Question

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

https://codepen.io/anon/pen/drBdLm

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。

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