單擊時使用傳單地圖庫獲取圖像疊加層的像素坐標（單擊鼠標右鍵）

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坐標，該div隨放大和縮小而調整了大小。 事件坐標不會縮放到您的圖像大小。

為了獲得相對於實際圖片尺寸的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. 單擊時將單擊的緯度投影到（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);
}

希望這可以幫助！

Answer 3

我不了解傳單，但您不需要它來實現這一目標。 使用javascript，您可以實現偵聽器並在標記中使用event.latLng來操縱信息。

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

檢查這個工作提琴

Answer 4

當您立即觸發contextmenu事件時，您將收到containerPoint ，其中包含x和y坐標放置（以容器為單位）。因為您知道/可以檢索Map容器​​的尺寸，並且知道圖像的原始尺寸。這樣足以進行計算嗎？

例如，如果您知道地圖容器的寬度為1000像素...並且收到一個x坐標為500的contextmenu事件，那么您知道有人直接在中心單擊，因為500/1000（地圖容器寬度）= 0.5，那表示圖像上的實際位置將是本機寬度（2000，根據您的變量w ）* 0.5 = 1000。