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

Question

我正在尝试使用 leaflet 地图库获取图像叠加层的像素坐标（右 click/contextmenu）。本质上，当用户点击图片时，我需要找到用户点击图片的位置的 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。

这里是fiddlehttp://jsfiddle.net/rayshinn/yvfwzfw4/1/

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

有关

Answer 1

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

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

勾选this working fiddle

Answer 2

您收到 containerPoint，当您触发 contextmenu 事件时，它包含 x 和 y 坐标放置（容器方面）now.Since 您 know/can 检索地图容器的尺寸，并且您知道图像的原始尺寸..这还不足以进行计算吗？

例如，如果您知道地图容器宽度为 1000px...并且您收到 x 坐标为 500 的上下文菜单事件...那么您知道有人直接在中心单击，因为 500 / 1000(地图容器宽度) = 0.5 这意味着图像上的实际位置将是原始宽度（2000，根据您的变量 w）* 0.5 = 1000.

Answer 3

传单为您提供 x,y 沿 "image-map" div 的坐标，随着放大和缩小调整大小。 事件坐标不会缩放到您的图像大小。

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

Check my Fiddle

我通过获取事件坐标计算出你的 x,y，将它们乘以你的 var w 和 var h，然后 div 将它们乘以地图的高度和宽度：

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


}

Answer 4

解决这个问题需要利用地图工程将经纬度转换为图像中的坐标。

图上的Project方法就是魔法

http://leafletjs.com/reference.html#map-conversion-methods

投影将为您提供图像中的 X、Y。这些值将根据图像的缩放方式（即地图缩放级别）进行缩放。

计算点击的自然 (X,Y) 只是计算地图边界或叠加层大小的比例，然后将其除以投影点击坐标。

当您创建 imageOverlay 时，将其存储在一个变量中。需要参考它来确定图像层的比例因子。
点击时将点击的经纬度投影到 (x,y) 坐标中
将图片的当前宽高除以自然宽高（需要这样处理地图缩放引起的尺寸变化）
将投影的点击坐标除以比例因子。这将为您返回原始图像中的实际 X、Y 坐标，这就是我认为您想要的。下面的代码并查看 fiddle 以获取工作示例。 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);
}

希望对您有所帮助！

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

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

javascript

maps

google-maps-api-3

leaflet

Check my Fiddle