如何通过单击传单地图获取瓷砖的 X Y Z 坐标 [英] How to get X Y Z coordinates of tile by click on Leaflet map

问题描述

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

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

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

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.

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

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".

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

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.

提前感谢您的帮助！

推荐答案

下面是一个获取点击磁贴的缩放、X 和 Y 坐标的工作示例(使用 openstreet 地图):http://jsfiddle.net/84P9r/

Here is a working example for getting Zoom, X, and Y coordinates of clicked tile (using openstreet map): 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

这篇关于如何通过单击传单地图获取瓷砖的 X Y Z 坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！