我已经制作了简单的传单example。它渲染过程图块,并在每个图块上显示位置和缩放。
投影和CRS配置为将lat和lng直接映射到x和y,而在zoom = 20时不进行任何变换。您可以通过单击地图并查看带有坐标的弹出窗口来轻松地进行检查。
var naturalZoom = 20;
L.Projection.Direct = {
project: function (latlng) {
return new L.Point(latlng.lat, -latlng.lng);
},
unproject: function (point) {
return new L.LatLng(point.x, -point.y);
}
};
L.CRS.Wall = L.extend({}, L.CRS, {
projection: L.Projection.Direct,
transformation: new L.Transformation(1, 0, -1, 0),
scale: function (zoom) {
return Math.pow(2, zoom-naturalZoom);
}
});
var map = L.map('map', {
crs: L.CRS.Wall,
maxBounds: new L.LatLngBounds([0,0], [4096, 4096])
});
map.setView([0,0], naturalZoom);
我试图限制地图的边界(jsfiddle示例中代码的第26行注释),但是这破坏了整个图层的拖动。自定义crs和maxBounds是否有类似问题?这是传单库中的错误吗?
感谢您的任何帮助。
最佳答案
我认为问题是您的project/unproject
损坏了?无论如何,您无需手动执行任何操作,Leaflet.js提供了一个CRS,可在px和latlng之间进行转换,像这样设置地图:
var map = L.map('map', {
maxZoom: 20,
minZoom: 20,
crs: L.CRS.Simple
}).setView([0, 0], 20);
然后设置地图边界(我的图片为1024x6145):
var southWest = map.unproject([0, 6145], map.getMaxZoom());
var northEast = map.unproject([1024, 0], map.getMaxZoom());
map.setMaxBounds(new L.LatLngBounds(southWest, northEast));
然后,您可以通过以下方式添加标记:
var m = {
x: 102, // px coordinates on full sized image
y: 404
}
var marker = L.marker(map.unproject([m.x, m.y], map.getMaxZoom())).addTo(map);
请注意,我们使用
map.unproject
从px转换为latlng。我写了how to do this in more detail, including how to split up your image,但以上内容为您提供了基本要点。
关于javascript - 带有自定义投影的传单maxBounds,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14718223/