如何使用 Leaflet 和 mbtiles 服务器指定边界框而不是 url 中的缩放级别和 x、y 平铺坐标

Question

背景

我正在使用以下客户端和服务器技术：

1. map 服务器作为容器来自https://github.com/consbio/mbtileserver/
2. Angular 7的Leaflet's库

如此处所述： https://leafletjs.com/reference-0.7.7.html#tilelayer TileLayer 控件使用 url 模板：'http://{s}.somedomain.com/blabla/{z}/{x }/{y}.png'

要求

我的客户要求我将上面的 map 服务器替换为部署在他的网络上的另一个服务器。
我想在对客户端进行最小更改的同时支持新服务器（特别是我想继续使用Leaflet map 控件）。

我试过的

我有一个使用新服务器的客户端示例。 该示例是用React编写的，并且还使用了Leaflet map 控件。

但是，我注意到它发送到服务器的 URL 没有使用上述模板。 相反，它包含一个查询字符串并包含 BBox 类型的参数，我假设它指的是边界框。

不幸的是，我没有客户端的源代码，也没有完整的 URL 作为示例。

问题

有人可以帮我理解：

1. 是否确实存在由 consbio/mbtileserver 支持的 URL 模板，它使用边界框而不是 z、x、y？
2. Assuming the Leaflet Angular library can do the same as the Leaflet React library in the example, what changes do I need to make to the map control configuration to support it?

Answer 1

我还没有找到 100% 正确的答案，但我有几个步骤可以帮助你。 但我不知道 mbtileserver 部分如何工作。

如果你想获得瓷砖的边界，你可以使用私有方法L.GridLayer._tileCoordsToBounds(coordsOfTile)

现在您必须更改 url 创建 tile，为此创建一个新 Tile Class 并覆盖getTileUrl function：

L.CustomTile = L.TileLayer.extend({
    getTileUrl: function (coords) {
      var bbox = this._tileCoordsToBounds(coords).toBBoxString();
      console.log(bbox);
      var url = L.TileLayer.prototype.getTileUrl.call(this, coords);
      return url + '&bbox='+ bbox;
    },
  });

然后将图块添加到 map：

new L.CustomTile('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
  }).addTo(map);

然后这将请求像这样的图块：

https://a.tile.openstreetmap.org/6/31/23.png?bbox=-5.625,40.979898069620155,0,45.089035564831036

如果不需要{s} ， {z} ，...，您可以简单地删除模板

如果您不知道 url 应该是什么样子，那么实现自定义请求将非常困难......

另外我认为您不必使用它，但我知道WMS 层将 bbox 字符串添加到 url： Leaflet-Src

请检查您的 leaflet 版本，最新版本是 1.7.1，因为您链接了 0.7.7 的文档