单击（右键单击）时使用传单地图库获取图像叠加层的像素坐标

我正在尝试使用传单地图库获取单击（右键单击/上下文菜单）时图像叠加的像素坐标。本质上，当用户单击图像时，我需要找到用户单击图像的位置的 x、y 或宽度、高度。

目前这就是我所拥有的。

// Using leaflet.js to pan and zoom a big image.
// See also: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html

// create the slippy map
var map = L.map('image-map', {
    minZoom: 1,
    maxZoom: 4,
    center: [0, 0],
    zoom: 1,
    crs: L.CRS.Simple,
});

// dimensions of the image
var w = 2000,
    h = 1500,
    url = 'http://kempe.net/images/newspaper-big.jpg';

// calculate the edges of the image, in coordinate space
var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
var bounds = new L.LatLngBounds(southWest, northEast);

// add the image overlay, 
// so that it covers the entire map
L.imageOverlay(url, bounds).addTo(map);

// tell leaflet that the map is exactly as big as the image
map.setMaxBounds(bounds);

function onMapClick(e) {

 //returns on right click events   
 console.log(e);


}

//Hadnel on right click functions TODO: MOVE THIS LATER
map.on('contextmenu', onMapClick);

目前 onMapClick(e) 在检查单击时返回的事件时，我没有看到任何靠近我单击的位置的 x、y 或宽度和高度的所有返回坐标的证据。

本质上我想看到的是我单击的图像位置的 x、y 或宽度、高度，因为该图像的尺寸为 20000x15000。

这是小提琴http://jsfiddle.net/rayshinn/yvfwzfw4/1/ http://jsfiddle.net/rayshinn/yvfwzfw4/1/

不知道为什么，但当你一直缩小时，它似乎有点问题。只需全程放大即可阻止 jsfiddle 上的错误。这个bug不是重点，因为它不会发生在我本地的环境中！似乎与小提琴有关。

传单为您提供x,y沿“图像地图”div 的坐标，该 div 随放大和缩小而调整大小。事件坐标不会缩放到您的图像大小。

为了得到x,y相对于实际图片大小，您需要将坐标乘以当前 div 尺寸与全尺寸图像的比率方面。

检查我的小提琴 http://jsfiddle.net/dalper01/yvfwzfw4/6/

我通过获取事件坐标并将它们乘以您的 x,y 来计算您的 x,yvar w and var h并将它们除以地图的高度和宽度：

function onMapClick(e) {

    var mapWidth=map._container.offsetWidth;
    var mapHeight=map._container.offsetHeight;
    console.log(e.containerPoint.x * w / mapWidth);
    console.log(e.containerPoint.y * h / mapHeight);
    console.log(e);


}