如何将事件侦听器添加到地图框图像/栅格图层?

问题描述 投票:0回答:1

我正在尝试使用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。

谢谢你的帮助。

mapbox mapbox-gl-js mapbox-gl
1个回答
1
投票

这还没有实施https://github.com/mapbox/mapbox-gl-js/issues/1404

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

© www.soinside.com 2019 - 2024. All rights reserved.