单击(右键单击)时，使用传单地图库获取图像叠加层的像素坐标 [英] Getting pixel coordinates of an image overlay using leaflet map library on click (right click)

问题描述

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

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

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上的错误.此错误不是重点，因为它在我的本地环境中不会发生！似乎与小提琴有关.

推荐答案

该传单为您提供了沿图像地图" div的 x，y 坐标，该div随放大和缩小而调整大小. 事件坐标无法缩放到您的图片大小.

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


}

这篇关于单击(右键单击)时，使用传单地图库获取图像叠加层的像素坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！