javascript - 单击(右键单击)使用传单 map 库获取图像叠加层的像素坐标

Question

我正在尝试使用传单 map 库在单击(右键单击/上下文菜单)时获取图像叠加层的像素坐标。本质上，当用户点击图片时，我需要找到用户点击图片的位置的 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。

这是 fiddle http://jsfiddle.net/rayshinn/yvfwzfw4/1/

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

Answer 1

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

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

Check my Fiddle

我通过获取事件坐标、将它们乘以您的 var w 和 var h 并将它们除以 map 的高度和宽度来计算您的 x、y:

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);


}