如何通过单击传单地图获取瓷砖的 X Y Z 坐标

Question

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

我想使用 Leaflet 通过我自己的图块生成器显示自定义地图。切片由脚本动态生成，具体取决于计划显示的位置（脚本的 URL 请求中的参数 {x}、{y}、{z}） 地图将是可缩放的（从 0 到 10），最大缩放大小约为 16000 * 16000 个图块，最小为 16 * 16 个图块），它将显示各种对象，每个对象都在一个单独的图块中。 每个 64 * 64 像素的瓦片是地图上的对象。 对于每个对象（方形瓷砖），我想通过 AJAX 请求发送到服务器来显示鼠标点击的信息。为了优化目标，我不想预先加载有关所有对象的所有信息。 我的主要问题 - 我无法理解如何正确获取鼠标单击的瓷砖的 X Y Я 坐标。 本质上是因为从服务器加载的每个图块都绑定到网格 {x}、{y}、{z}，所以我想通过点击获取这些 {x}、{y}、{z}映射并将它们发送给进一步的 AJAX 请求，以获取有关对象的信息。 现在可以将点击点作为 Latlng 坐标或相对于地图左上角的像素坐标来获取，我无法引用瓦片网格。

而且我还想知道获取点击相对于磁贴的坐标的可能性。例如，如果 tile 的尺寸为 64 * 64，并且 click 在 tile 的中心，那么如何获取 click [32, 32] 的相对坐标？ 因为如果我们知道图块的{X}、{Y}、{Z}坐标以及图块内点击的相对X*和Y*坐标，那么我们可以做“通用替代坐标网格”。

这可能不是问题，而且可以轻松解决，但我从未使用过任何 Maps API，因此我想知道这个问题的答案。

提前感谢您的帮助！

Answer 1

这是一个获取点击的图块的缩放、X 和 Y 坐标的工作示例（使用 openstreet 地图）：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;
}

基于https://stackoverflow.com/a/19197572的回答

Answer 2

您可以使用Leaflet API 中的mouseEventToLayerPoint 和mouseEventToContainerPoint 方法将屏幕上的像素转换为相对于地图左上角的像素，然后使用一些数学运算，您可以在瓷砖。

Answer 3

这是 Leaflet 在内部所做的：

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 }