如何使用 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 的文檔