如何在传单中使用 TileLayer 和 TileLayer.WMS 添加多个图层答案

【问题标题】：How to add multiple layers using TileLayer and TileLayer.WMS in leaflet如何在传单中使用 TileLayer 和 TileLayer.WMS 添加多个图层
【发布时间】：2015-09-18 08:19:07
【问题描述】：

我是leafletjs 的新手。我正在制作一张仅呈现美国地图的地图，其中包含很少的图层选项，例如道路和主要道路等。我有一个使用WMS 协议的基础层，使用以下代码获取第一层的图块：

L.tileLayer.wms(......)

然后我有另一层来自不使用 WMS 协议的不同服务器。该服务器接受 bbox、height、width、lat、lng 等参数。我可以一次查询这个服务器的一个图块，所以我需要提供多个 ajax 调用来获取多个图块来覆盖我当前的视图，并在地图移动时更新所有图层。

我遇到的问题是如何让两个层一起工作？以及如何以leafletJS方式获取每个图块的边界框？以及如何在用户移动地图时继续更新“moveend”事件的所有图块？

使用leafletJS 0.7.3版！

感谢您的帮助

【问题讨论】：

我是这个地图业务的新手，如果我误导了你，对不起。我删除了 arcgis 标签。

标签： maps leaflet wms

【解决方案1】：

L.TileLayer 类中有未记录的函数：

L.TileLayer.getTileUrl(tilePoint)

为屏幕上的每个图块调用此函数。它使用x、y 和z 键（图块编号）接收哈希，并返回图块的图像 URL。您可以在 L.TileLayer 实例中重写此函数：

var layer = L.tileLayer(url);
layer.getTileUrl = function(tilePoint) {
    return 'http://example.com/' + tilePoint.z + '/' + tilePoint.y + '/' + tilePoint.x + '.png';
}

因此，您无需跟踪地图移动、图块的出现和消失等。

【讨论】：