Блог

Я пытаюсь добавить прослушиватель событий к слою изображения с помощью mapbox gl, но, похоже, это не работает, возможно ли это вообще с этим типом слоя? Вот codepen, демонстрирующий проблему:

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, функция), но это не работает. Также не работает использование queryRenderedFeatures.

Спасибо за любую помощь.

Это еще не реализовано https://github.com/mapbox/mapbox-gl-js/issues/1404.

В качестве обходного пути вам нужно будет прослушать все события щелчка, а затем выполнить свой собственный тест, чтобы увидеть, находится ли щелчок в пределах вашего изображения.