点击(右键单击)使用传单地图库获取图像叠加的像素坐标

Question

我正在尝试使用传单地图库在点击(右键单击/上下文菜单)上获取图像叠加的像素坐标.基本上当用户点击图像时,我需要找到用户点击图像的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/

不确定为什么但是当你一直缩放时它看起来有点儿麻烦.只需缩放即可停止jsfiddle上的错误.这个错误不是焦点,因为它不会发生在我的本地环境中!似乎与小提琴有关.

Answer 1

小册子为您提供沿着"图像映射"div 的x,y坐标,它通过放大和缩小来调整大小.事件坐标不会缩放到图像大小.

为了获得相对于实际图片尺寸的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);


}

Answer 2

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

地图上的Project方法很神奇

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

投影将为您提供图像中的X,Y.将根据图像缩放的方式(即地图缩放级别)缩放这些值.

计算点击的自然(X,Y)只是计算地图边界或覆盖尺寸的比例,然后将其除以投影的点击坐标.

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

2. 在单击项目上,将点击的lat lng转换为(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);
}

希望这可以帮助!