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

Getting pixel coordinates of an image overlay using leaflet map library on click (right click)

本文关键字：图像 覆盖 获取 坐标 像素 地图 单地图 右键 点击      更新时间：2023-09-26

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

目前在MapClick（e）上，在检查点击返回的事件后，我没有看到任何证据表明所有返回的坐标在我点击的位置的x、y或宽度和高度附近。

本质上，我想看到的是我点击的图像的x、y或宽度、高度，假设图像的尺寸为20000x15000。

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

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

传单将为您提供"图像地图"div的x，y坐标，该div会随着放大和缩小而调整大小事件坐标不会按您的图像大小缩放

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

检查我的Fiddle

我通过获取事件坐标，将其乘以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);

}

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

地图上的项目方法是神奇的

http://leafletjs.com/reference.html#map-转换方法

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

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

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

  2. 点击投影点击到（x，y）坐标

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

  4. 将投影的单击坐标除以比例因子。这将给你返回原始图像中的X，Y坐标，这就是我认为你想要的。下面的代码和检查小提琴工作的例子。http://jsfiddle.net/muglio/h5st7bpt/

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

希望这能有所帮助！

我不知道传单，但你不需要它来实现这一点。使用javascript，您可以实现一个监听器，并在标记中使用event.latLng来处理信息。

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

检查此工作小提琴

现在触发contextmenu事件时，您正在接收containerPoint，其中包含x和y坐标放置（容器方向）。由于您知道/可以检索Map容器的维度，并且您知道图像的本机维度。。这难道不足以计算吗？

例如，如果你知道地图容器的宽度是1000px。。。如果你收到一个上下文菜单事件，其中x坐标为500……那么你知道有人直接点击了中心，因为500/1000（映射容器宽度）=0.5，这意味着图像上的实际位置将是原生宽度（2000，根据变量w）*0.5=1000。

相关文章：