传单：使用 CRS.Simple 在 createTile 中获取纬度/经度

Question

我有一个简单的虚构地图，我想使用 Leaflet 来控制它。它是一个平面二维平面，其“纬度/经度”/坐标系跨越[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()，这正是我在L.CRS.Simple.pointToLatLng 中反转的内容。坦率地说，我很茫然。

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 级瓷砖被分成 4 个 1 级瓷砖，16 个 2 级瓷砖，64 个 3 级瓷砖，依此类推，在 13 级最多 2^13 个瓷砖。这更容易通过玩@来可视化987654329@ 显示图块坐标，如：

    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);

第二：你想使用internal _tileCoordsToBounds method, defined at L.GridLayer。给它一组瓦片坐标，你会得到一个L.LatLngBounds，它的覆盖区域是这样的瓦片。

以下示例 (try it live here) 应该会让您步入正轨。记得阅读documentation for L.LatLngBounds。

    var grid = L.gridLayer({
        attribution: 'Grid Layer',
//      tileSize: L.point(100, 100),
    });

    grid.createTile = function (coords) {
        var tile = L.DomUtil.create('div', 'tile-coords');
        var tileBounds = this._tileCoordsToBounds(coords);
        tile.innerHTML = [coords.x, coords.y, coords.z].join(', ') + 
            "<br>" + tileBounds.toBBoxString();
        return tile;
    };

    map.addLayer(grid);