Javascript 单击（右键单击）使用传单地图库获取图像覆盖的像素坐标

我正在尝试使用传单地图库在单击（右键单击/上下文菜单）时获取图像覆盖的像素坐标。基本上，当用户单击图像时，我需要找到用户单击图像的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);

当前onmaplick（e）在检查单击时返回的事件时，我没有看到所有返回坐标的证据，这些坐标靠近我单击的位置的x、y或宽度和高度

基本上，我希望看到的是我单击的图像位置的x、y或宽度、高度，假设图像的尺寸为20000x15000

这是小提琴

---

不知道为什么，但当你一直向外放大时，它似乎有点不对劲。只要一直放大它，就可以阻止JSFIDLE上的错误。这个bug不是焦点，因为它不会发生在我的本地环境中！似乎与小提琴有关。

我不知道传单，但你们不需要它来实现这一点。使用javascript，您可以实现一个侦听器，并在标记中使用

event.latLng

来操作信息

google.maps.event.addListener(map, 'click', function(event) {
    marker.setPosition(event.latLng);   
});

---

选中您正在接收的

containerPoint

，当您现在触发contextmenu事件时，它包含x和y坐标位置（容器方向）。由于您知道/可以检索地图容器的尺寸，并且您知道图像的本机尺寸。这难道不足以进行计算吗

---

e、 g如果您知道地图容器宽度为1000px…并且您收到一个contextmenu事件，其中x坐标为500…那么您知道有人直接在中心单击，因为500/1000（地图容器宽度）=0.5，这意味着图像上的实际位置将是本机宽度（2000，根据您的变量

w

）*0.5=1000。

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

为了得到相对于实际图片大小的x，y，需要将坐标乘以当前div维度和全尺寸图像的维度之比

我通过获取事件坐标，将它们乘以

var w

和

var h

并除以地图的高度和宽度来计算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);


}

---

要解决此问题，您需要使用地图项目将纬度和经度转换为图像中的坐标

地图上的项目方法就是魔术

投影将给出图像中的X，Y。这些值将根据图像的缩放方式（即地图缩放级别）进行缩放

计算点击的自然（X，Y）只是计算地图边界或覆盖大小的比例，然后除以投影点击坐标

创建imageOverlay时，将其存储在变量中。需要参考它来确定图像层的比例因子

单击时，将单击的横向投影到（x，y）坐标中

将图像的当前宽度和高度除以自然宽度和高度（您需要这样做来处理由地图缩放引起的大小更改）

将投影的单击坐标除以比例因子。这将返回原始图像中的实际X，Y坐标，这是我认为您想要的。下面的代码和检查工作的例子小提琴

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

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

function onMapClick(e) {
    //Project the map click to x,y coordinates
    //This projection is the actual XY coordinates of the image layer
    //This coordinate is scaled by the amount the image is zoomed.
    var clientClick = map.project(e.latlng);

    //Grab the original overlay
    var overlayImage = overlay._image;

    //Calculate the current image ratio from the original (deals with zoom)
    var yR = overlayImage.clientHeight / overlayImage.naturalHeight;
    var xR = overlayImage.clientWidth / overlayImage.naturalWidth;

    //scale the click coordinates to the original dimensions
    //basically compensating for the scaling calculated by the map projection
    var x = clientClick.x / xR;
    var y = clientClick.y / yR;
    console.log(x,y);
}

---

希望这有帮助

你能发一把小提琴吗？嗨，乔迪，我不是在找地图上的拉特，朗。我想找到图像的x，y，我明白了。。。。你能发布一个提琴或一些例子让我们看到这个问题吗？这个解决方案即使地图被调整了大小也有效。当地图被缩小并且不是FIDLE容器的100%宽度和高度时，它似乎不适用于JSFIDLE，但我相信这是JSFIDLE的产物。是古玩，并将其与我的解决方案进行比较，并将验证此解决方案在地图调整大小时是否有效。@muglio，我尝试了不同大小的测试，始终能够获得成功。我可能不理解你描述的bc用例，这听起来像是一个适合我的场景……我同意你的答案。这很好，我投了更高的票。我在我的回答中说，这是不同的，你应该得到赏金。为了澄清，我试图指出JSFIDLE的一个问题。我在jsfiddle之外测试了您的解决方案，它是有效的。@muglio，我想是的。你说得很仔细。但我不知道如何复制它。谢谢。让我们看看哪种解决方案最适合OP.嗨，muglio，非常感谢您花时间和精力来帮助我解决这个问题！非常感谢。@BaconJuice没问题。