0

我制作了简单的传单示例。它渲染程序图块，每个图块都显示位置和缩放。投影和 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 有类似的问题？这可能是传单库中的错误吗？

感谢您的任何帮助。

4

1 回答 1

2

我认为问题是你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。

我更详细地写了如何执行此操作，包括如何拆分图像，但以上内容为您提供了基本要点。

于 2013-03-02T04:39:56.687 回答