如何在传单地图中以左下角的轴原点绘制像素坐标

时间:2019-01-18 12:33:37

标签: javascript leaflet

我对传单不熟悉,我需要通过将轴原点视为左下角,在传单地图中基于图像上的像素值绘制标记。我该如何实现?

我已经设置了图像叠加层以绘制图像,还为地图设置了边界。我也可以绘制标记。我使用map.unproject()方法将像素值投影到图像上。我正在使用CRS.Simple作为坐标参考系统。

   var map = L.map('map', {
    crs: L.CRS.Simple,
    minZoom: -3,
    center: [0,-500],
    zoom: 2,
    maxZoom: 8
});

//height = 500 width = 900  
var southWest = map.unproject([0,500], map.getMaxZoom());
    var northEast = map.unproject([900,0], map.getMaxZoom());

var bounds = L.latLngBounds(southWest, northEast);
var image = L.imageOverlay('MyImage.bmp', bounds).addTo(map);

map.setMaxBounds(bounds);

var m1 = map.unproject([0,0], map.getMaxZoom());
var m2 = map.unproject([300,500], map.getMaxZoom())
var m3 = map.unproject([900,400], map.getMaxZoom())
var m4 = map.unproject([900,500], map.getMaxZoom())

L.marker(m1).addTo(map).bindPopup('m1');
L.marker(m2).addTo(map).bindPopup('m2');
L.marker(m3).addTo(map).bindPopup('m3');
L.marker(m4).addTo(map).bindPopup('m4');

当前,像素坐标[0,0]的标记出现在图像的左上方。我的坐标值是基于原点的左下角。我希望标记[0,0]位于左下角。

1 个答案:

答案 0 :(得分:1)

  

我使用map.unproject()方法将像素值投影到图像上。

您不需要这样做。屏幕坐标基于左上角,而L.CRS.Simple基于左下角。

我建议您重新阅读Leaflet tutorial on L.CRS.Simple