如何将 Leaflet 与 mbtiles 服务器一起使用，在 url

2024-06-02 • 问答

背景

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

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

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

要求

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

我尝试了什么

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

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

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

问题

谁能帮我理解：

consbio/mbtileserver 是否确实支持使用边界框而不是 z,x,y 的 URL 模板？
假设 Leaflet Angular 库可以与示例中的 Leaflet React 库执行相同的操作，我需要对地图控件配置进行哪些更改才能支持它？

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

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

现在您必须更改 tile 的 url 创建，为此创建一个新的 Tile 类并覆盖 getTileUrl 函数：

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

然后将图块添加到地图中：

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,45.089035564831036

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

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

此外，我认为您不必使用它，但我知道 WMS Layers 将 bbox 字符串添加到网址：Leaflet-Src

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

如何将 Leaflet 与 mbtiles 服务器一起使用，在 url

背景

要求

我尝试了什么

问题

marish 回答：如何将 Leaflet 与 mbtiles 服务器一起使用，在 url

大家都在问