传单:使用 CRS 在创建磁贴中获取纬度/经度.简单

Question

我有一个简单的虚构地图，我想用传单来控制它。它是一个平面的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()，这正是我在L.CRS.Simple.pointToLatLng中逆转的。坦率地说，我不知所措。

Answer 1

首先，我鼓励您再次阅读有关L.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 个图块。通过使用显示磁贴坐标的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);

第二：你想使用内部_tileCoordsToBounds方法，在L.GridLayer定义。给它一组图块坐标，你会得到一个L.LatLngBounds，其中包含这种图块所覆盖的区域。

以下示例(在此处实时尝试(应该会让您步入正轨。请记住阅读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);