如何通过点击单张地图获得X Y Z坐标?

I want to ask for help to deal with the possible use of non-standard coordinates on the map Leaflet.

我想请求帮助处理地图传单上可能使用的非标准坐标。

I want to use Leaflet to display custom maps with my own tile generator. Tiles are generated on the fly by script, depending on where it is planned to display (parameters {x}, {y}, {z} in the URL request to the script) Map will be zoomable (from 0 to 10), size of ~16000 * 16000 tiles in maximum zoom, and 16 * 16 tiles in a minimum) and it will display a variety of objects, each object in a separate tile. Each tile of 64 * 64 pixels is the object on map. For each object (a square-tile) I want to display it`s information on mouse click, by sending via AJAX request to the server. I did not want to pre-load all information about all objects for the goal of optimization. My main issue - I cannot understand how to correctly get the X Y Я coordinates of the tile on which mouse clicked. Essentially because each tile when it is loaded from the server is bound to the grid {x}, {y}, {z}, and so I want to get these {x}, {y}, {z} from clicks on the map and send them for further AJAX request for getting information about the object. Now it is possible to get click point as Latlng coordinates or coordinates in pixels relative to the upper-left corner of the map, which I cannot reference to tiles grid.

我想用传单来显示定制地图和我自己的瓷砖发电机。瓷砖由脚本生成的动态,根据计划来显示(参数{ x },{ y },{ z } URL请求的脚本)将被缩放的地图(从0到10),大小~ 16000 * 16000的瓷砖最大缩放,和16 * 16块最低),它会显示一个各种各样的对象,每个对象在一个单独的瓷砖。64 * 64像素的每一块都是地图上的对象。对于每个对象(正方形)，我希望通过向服务器发送AJAX请求来显示鼠标单击的信息。我不想预先加载所有对象的所有信息，以达到优化的目的。我的主要问题——我不明白如何正确的X YЯ坐标的瓷砖鼠标点击。本质上，因为每个从服务器加载的瓦片都绑定到网格{x}、{y}、{z}，所以我希望从映射的点击中得到这些{x}， {y}， {z}，并将它们发送给进一步的AJAX请求以获取关于该对象的信息。现在可以将点击点作为Latlng坐标或相对于地图左上角的像素坐标，我不能引用tiles网格。

And also I wanted to know the possibility to get the coordinates of the click relative to the tile. For example, If the tile has dimensions of 64 * 64, and click was in the center of the tile, so how can I get relative coordinate of click [32, 32]? Because If we knowing {X}, {Y}, {Z} coordinates of the tile and relative X* and Y* coordinates of click inside the tile, then we can do “universal alternative coordinate grid”.

我还想知道如何得到相对于瓦片的点击坐标。例如，如果瓦片的尺寸为64 * 64，并且点击位于瓷砖的中心，那么我如何得到相对坐标的点击[32,32]?因为如果我们知道瓦片的{X}、{Y}、{Z}坐标和相对X*和Y*坐标，那么我们就可以做“通用的替代坐标网格”。

May be this is not a problem and it can be solved easily, but I've never worked with any Maps API, and therefore I want to know the answer to this question.

可能这不是一个问题，它可以很容易地解决，但是我从来没有使用过任何地图API，因此我想知道这个问题的答案。

Thanks in advance for your help!

感谢您的帮助!

3 个解决方案

#1

Here is a working example for getting Zoom, X, and Y coordinates of clicked tile (using openstreet map): http://jsfiddle.net/84P9r/

这里有一个工作示例，用于获取单击tile(使用openstreet map)的缩放、X和Y坐标:http://jsfiddle.net/84P9r/。

function getTileURL(lat, lon, zoom) {
    var xtile = parseInt(Math.floor( (lon + 180) / 360 * (1<<zoom) ));
    var ytile = parseInt(Math.floor( (1 - Math.log(Math.tan(lat.toRad()) + 1 / Math.cos(lat.toRad())) / Math.PI) / 2 * (1<<zoom) ));
    return "" + zoom + "/" + xtile + "/" + ytile;
}

based on an answer https://*.com/a/19197572

基于一个答案，https://*.com/a/19197572。

#2

You can use the mouseEventToLayerPoint and mouseEventToContainerPoint methods in the Leaflet API to convert pixels onscreen to pixels relative to the top-left of the map, and then using a little math, you can derive the location within a tile.

您可以在Leaflet API中使用mouseEventToLayerPoint和mouseEventToContainerPoint方法，将屏幕上的像素转换为相对于地图左上角的像素，然后使用少量的数学，您可以在一个tile中获得位置。

#3

This is what Leaflet does internally:

这是传单在内部做的:

var tileSize = [256, 256]
var pixelPoint = map.project(e.latlng, map.getZoom()).floor()
var coords = pixelPoint.unscaleBy(tileSize).floor()
coords.z = map.getZoom() // { x: 212, y: 387, z: 10 }

#1