Question

我有一个简单的虚构图，我想使用Leaflet进行控制。这是一个平面2D平面，其“纬度/经度” /坐标系从[0,0]到[999,999]。

我已自定义地图，如下所示：

window.map = L.map('leaflet-map', {
    crs: L.CRS.Simple,
    center: [500, 500],
    zoom: 13,
    maxBounds: [
        [0, 0],
        [999, 999],
    ],
    layers: [new MyLayer()],
});

要绘制此地图，我创建了一个新图层MyLayer，它扩展了gridLayer：

export var MyLayer = GridLayer.extend({
    createTile: function(coords, done) {
        var error;
        var xmlhttprequest = new XMLHttpRequest();
        xmlhttprequest.addEventListener('readystatechange', function() {
            done(error, dothething());
        });
        xmlhttprequest.open('GET', /* url */);
        xmlhttprequest.send();
    },
});

我遇到的问题是URL接受[0,0]至[999,999]坐标系作为参数，但是我找不到如何实际获得它们的方法。我了解可能会有一些小数，但我可以floor适当地使用。

当以[500, 500, 13]为中心时，coords对象包含{ x: 15516, y: -21558, z: 13 }。传递给L.CRS.Simple.pointToLatLng(coords, coords.z)后，我得到{ lat: 2.631591796875, lng: 1.89404296875 }。

我已下载源代码，试图了解如何从Map._move(center, zoom, data)进行这种转换，但是似乎要做的只是调用this.options.crs.latLngToPoint()，这正是我在{{1}中所做的反向操作}。坦率地说，我很茫然。

Answer 1

首先，我鼓励您再次阅读Leaflet tutorial on L.CRS.Simple。让我从那里引用一个相关的内容：

在CRS.Simple中，一个水平地图单元被映射到一个水平像素，并具有垂直方向。 [...]我们可以将minZoom设置为小于零的值：

因此，实际上，您没有理由默认降低L.CRS.Simple地图上的13级缩放比例。对于[0,0]-[999,999]地图，请使用零缩放级别作为概览，或使用map.fitBounds([[0,0],[999,999]])。

createTile()方法接收的值是平铺坐标，而不是CRS坐标。级别0的磁贴分为四个级别1的磁贴，十六个级别2的磁贴，64个级别3的磁贴，依此类推，在级别13处最多2 ^ 13个磁贴。通过使用{ {1}}显示图块坐标，例如：

L.GridLayer

第二：您要使用internal _tileCoordsToBounds method, defined at L.GridLayer。给它提供一组图块坐标，您将获得一个var grid = L.gridLayer({ attribution: 'Grid Layer', // tileSize: L.point(100, 100), }); grid.createTile = function (coords) { var tile = L.DomUtil.create('div', 'tile-coords'); tile.innerHTML = [coords.x, coords.y, coords.z].join(', '); return tile; }; map.addLayer(grid);，该图块覆盖了该图块。

以下示例（try it live here）应该使您步入正轨。记住也要阅读documentation for L.LatLngBounds。

L.LatLngBounds

手册：使用CRS在createTile中获取纬度/经度

1 个答案: