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

Question

我是传单的新手，我需要根据传单地图中图像上的像素值绘制标记，将轴原点视为左下角。我该如何做到这一点？

我已经设置了一个图像叠加来绘制图像。同时设置贴图的边界。我也能画记号。我使用map.unproject()方法将像素值投影到图像上。我用的是CRS。就像坐标参考系一样简单。

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]在左下角。

Answer 1

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

你不需要这么做。屏幕坐标基于左上角，而L.CRS.Simple基于左下角。

我鼓励您重新阅读L.CRS.Simple的传单教程。