Leaflet：将地图坐标投影到像素坐标

Question

我想要实现的是当在地图上绘制一个矩形时，我想将这个矩形地图坐标投影到原始图像的坐标 space 中，以便我可以裁剪原始图像和向用户提供下载 link。

但是我在将矩形地图坐标投影到原始图像中的准确像素坐标时遇到问题。

我认为以下方法可行，但它生成的像素坐标不正确。

map.on('draw:created', function(e){
    var type = e.layerType,
    layer = e.layer;

    if(type == 'rectangle'){
    if(rectangle){
        drawnItems.removeLayer(rectangle);
    }
    rectangle = layer;
    drawnItems.addLayer(rectangle);

    var north_west = rectangle.getBounds().getNorthWest();
    var south_east = rectangle.getBounds().getSouthEast();

    var top_left_pixel = map.project([north_west.lat, north_west.lng], map.getMaxZoom());
    var bottom_right_pixel = map.project([south_east.lat, south_east.lng], map.getMaxZoom());

    alert("top_left_pixel: " + (top_left_pixel.x / 4) + ", " + (top_left_pixel.y / 4) + " bottom_right_pixel: " + (bottom_right_pixel.x / 4) + ", " + (bottom_right_pixel.y / 4));
    }
});

这是从地图坐标（左图）到像素坐标（右图）的不准确投影示例。

我做错了什么？

Answer 1

事实证明我没有做错，上面的想法很完美。

我使用的是原始图像的宽度和高度，但是在处理过程中 MapTiler 更改了基本图像的分辨率。我通过重新生成图块并检查由 MapTiler 生成的示例 leaflet.html 来解决这个问题。我很惊讶地看到边界被设置为 2*（原始基础图像的宽度）和 1.99*（原始基础图像的高度）。

考虑到这些信息修正了我不准确的预测。

Leaflet：将地图坐标投影到像素坐标

Leaflet: project map coordinates to pixel coordinates

leaflet

maptiler