如何在点击时获取传单ImageOverlay的像素坐标

Question

我有一个传单地图，它由一个图块层和一个半透明的 imageOverlay 组成，将温度分布显示为彩色区域。叠加层放置在图块层内的特定边界处。当我点击叠加层上的某处时，我想弄清楚该点的像素具有什么颜色。

我的问题是根据 imageOverlay 到可见地图的偏移量和缩放级别将点击位置投影到 imageOverlay 上。最终我想获得图像的像素坐标（以自然分辨率）

代码大致如下：

var imgUrl = 'https://somewhere.somewhere/myImage.png';
var tilesUrl = 'https://somewhere.somewhere/{z}/{x}/{y}.png';
var tilesBounds = [...];
var imgBounds = [...];
var latlng = [...];

var mymap = L.map('mapid').setView(latlng, 9);
L.tileLayer(tilesUrl, {
    attribution: 'TILES',
    maxZoom: 12,
    minZoom: 7,
    id: 'tiles',
    tms: true,
    maxBounds: tilesBounds
}).addTo(mymap);

var imgOverlay = L.imageOverlay(imgUrl, imgBounds {
    attribution: 'dataimg',
    opacity: '0.4',
    id: 'dataImg',
    interactive: true
}).addTo(mymap);

imgOverlay.on('click',
  (e) => {

    var x = ???;
    var y = ???;

    var color = getColorAt(x, y);

  }
)

Answer 1

一个可能的解决方案是

获取 coordinates of the mouse relative to the image 当前大小
然后交叉相乘确定相对于图片原始大小的坐标

例如，imgWidth 和 imgHeight 是图像的原始尺寸：

imgOverlay.on('click', (leafletEvent) => {
    // see 
    var e = leafletEvent.originalEvent;
    var rect = e.target.getBoundingClientRect();
    var zoomedX = e.clientX - rect.left; //x position within the element.
    var zoomedY = e.clientY - rect.top;  //y position within the element

    const x = Math.round(zoomedX * imgWidth / rect.width);
    const y = Math.round(zoomedY * imgHeight / rect.height);
    console.log(x, y);
});

var map = L.map('map').setView([48.854, 2.2922926], 14);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

const bounds = [[48.85, 2.28], [48.86, 2.29]]
const imgOverlay = L.imageOverlay('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Tour_Eiffel_en_mai_2014.JPG/450px-Tour_Eiffel_en_mai_2014.JPG', bounds, {
    attribution: 'Nicolas Halftermeyer / CC BY-SA (https://creativecommons.org/licenses/by-sa/3.0)',
    id: 'dataImg',
    interactive: true
}).addTo(map);

const imgWidth = 450, imgHeight = 600;
imgOverlay.on('click', (leafletEvent) => {
    // see 
    var e = leafletEvent.originalEvent;
    var rect = e.target.getBoundingClientRect();
    var zoomedX = e.clientX - rect.left; //x position within the element.
    var zoomedY = e.clientY - rect.top;  //y position within the element

    const x = Math.round(zoomedX * imgWidth / rect.width);
    const y = Math.round(zoomedY * imgHeight / rect.height);
    document.getElementById('log').innerHTML+= x+","+y+"<br>";
});

#map {width: 400px; height: 200px;}
#log {position: absolute; top: 0; right:10px; width: 100px;}

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/>
<div style='position: relative'>
  <div id="map"></div>
  <div id='log'></div>
 </div>

如何在点击时获取传单ImageOverlay的像素坐标

How to get pixel coordinats of leaflet ImageOverlay on click

javascript

overlay

leaflet