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

2022-01-12 00:00:00 leaflet javascript google-maps-api-3 maps

我正在尝试使用传单地图库在单击(右键单击/上下文菜单)时获取图像叠加层的像素坐标.本质上，当用户点击图片时，我需要找到用户点击图片位置的 x、y 或宽度、高度.

I'm trying to get the pixel coordinates of an image overlay on click (right click/contextmenu) using the leaflet map library. Essentially when a user clicks on the image, I need to find the x,y or width,height of where the user clicked on the image.

目前这就是我所拥有的.

Currently this is what I have.

// 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 或宽度和高度.

Currently onMapClick(e) upon inspecting the returned events on click I see no evidence of all returned coordinates any where near to the x,y or width and height of the location I clicked.

鉴于图像的尺寸为 20000x15000，基本上我想看到的是我单击的图像位置的 x、y 或宽度、高度.

Essentially what I would like to see is the x,y or width,height of the location of the image I clicked given that the image is 20000x15000 in dimension.

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

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

推荐答案

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

The leaflet is giving you the x,y coordinates along the "image-map" div which resizes with the zoom in and out. The event coordinates do not scale to your image size.

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

In order to get x,y relative to actual picture size, you need to multiply the coordinates against the ratio of current div dimensions and full sized image dimensions.

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

I calculated your x,y by taking the events coordinates, multiplying them by your var w and var h and dividing them by the maps height and width:

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


}

相关文章