Question

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

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

而且我想知道获得相对于瓷砖的点击坐标的可能性。例如，如果图块的尺寸为64 * 64，并且单击位于图块的中心，那么如何获得点击[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在内部所做的事情：

int remove(ListNode * &head, int length)
{
    if(head == NULL)
    {
        // empty
        return 0;
    }

    ListNode *tmp;
    int removed = 0;

    // Remove elements from start of list
    while(true)
    {
        string str = head->word;
        if(str.size() > length)
        {
            // Remove head element
            tmp = head;
            head = head->next;
            delete tmp;
            ++removed;
            if (head == NULL)
            {
                return removed;
            }
        }
        else
        {
            // No more head elements to remove
            break;
        }
    }

    // Remove elements from middel to end
    tmp = head;
    while(tmp->next)
    {
        string str = tmp->next->word;
        if(str.size() > length)
        {
            // Remove element tmp->next
            ListNode *tmp2 = tmp->next;
            tmp->next = tmp->next->next;
            delete tmp2;
            ++removed;
        }
        else
        {
            // Keep current tmp->next and move to next element
            tmp = tmp->next;
        }
    }

    return removed;
}

如何通过单击Leaflet map获取tile的X Y Z坐标

3 个答案: