如何解决如何将 Leaflet 与 mbtiles 服务器一起使用,在 url
背景
我正在使用以下客户端和服务器技术:
- 地图服务器作为来自 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: '© <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 的文档
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。