Leaflet:项目地图坐标到像素坐标

时间:2015-04-10 17:00:51

标签: leaflet maptiler

我想要实现的是当在地图上绘制矩形时,我想将此矩形地图坐标投影到原始图像的坐标空间中,以便我可以裁剪原始图像并提供下载链接到用户。

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

我认为以下方法可行,但其产生的像素坐标不正确。

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));
    }
});

以下是从地图坐标(左图)到像素坐标(右图)的精确投影示例。

Map selection Image selection

我做错了什么?

1 个答案:

答案 0 :(得分:0)

实际上事实证明我没有做错任何事情,上述想法完美无缺。

我正在使用原始图像的宽度和高度,但是在处理过程中MapTiler更改了基本图像的分辨率。我通过重新生成切片并检查MapTiler生成的示例leaflet.html来解决这个问题。我惊讶地发现边界被设置为2 *(原始基本图像的宽度)和1.99 *(原始基本图像的高度)。

考虑到这些信息会导致我的预测不准确。