如何仅在 Leaflet 的边界框内加载 WMS 切片？

Question

我有一个应用程序，我在其中使用 mapbox.js 为某个位置加载底图图块。然后，用户可以从 WMS 服务器加载大小为 256X256 的 WMS 图块，这些图块会加载到底图之上。

我正在使用 mapbox 和传单显示地图如下：

 window.map = L.map('map', { 'minZoom': minZoomLevel(), 'maxZoom': maxZoomLevel(), reuseTiles: true, unloadInvisibleTiles: true }).setView(["35.7804", "-78.6391"], 17)

然后我使用 Leaflet，向我的服务器发送请求，然后从那里向 WMS 服务器发送请求以使用以下方式加载图块：

wms = L.tileLayer.wms('/viewers/wms', {
    minZoom: 12,
    maxZoom: 25,
    layers: 'some layer name',
    format: 'image/png',

    updateWhenIdle: false,
    transparent: true,

    reuseTiles: true,
    showTheRasterReturned: true,

    COVERAGE_CQL_FILTER: 'featureId=\'' + featureId + '\''
});

当请求到达我的服务器时，BBOX 属性由具有不同坐标的传单自动添加（我认为它正在占用完整的视口），即

 Started GET
 "/viewers/wms?SERVICE=WMS&REQUEST=GetMap&VERSION=1.1.1&LAYERS=some
 layer
 name&STYLES=&FORMAT=image%2Fpng&TRANSPARENT=true&HEIGHT=256&WIDTH=256&REUSETILES=true&SHOWTHERASTERRETURNED=true&COVERAGE_CQL_FILTER=featureId%3D%279d3a23cba90680cecda337a926f563a6%27&SRS=EPSG%3A3857&**BBOX=-8755402.967897227,4285977.050006404,-8755097.219784087,4286282.798119542**" for 127.0.0.1 at 2018-06-27 16:51:01 -0400

一个 BBOX 属性是由传单动态添加的，如下所示

 BBOX=-8755402.967897227,4285977.050006404,-8755097.219784087,4286282.798119542"

虽然，我只想获取这些坐标的图块：

southWest ={lat: 35.77712238348847, lng: -78.64827990531921} 
northEast {lat: 35.783693840245284, lng: -78.62991213798523}

在L.tileLayer.wms 中设置BBOX 选项也无济于事，因为BBOX 坐标是由传单添加的。

Answer 1

传单正在按预期工作。

您只需要记住，虽然 Leaflet 使用不同的坐标参考系统 (CRS) 进行显示投影和 L.LatLngs。您在 EPSG:4326 (AKA equirectangular) 中指定 L.LatLngs（和边界等），Leaflet 会将所有内容转换为 EPSG:3857 (AKA Spherical Mercator)。

请注意 WMS 请求的 URL 如何包含 SRS=EPSG%3A3857 参数（这意味着 SRS=EPSG:3857 一次 URI-decoded）。这意味着 Leaflet 在 EPSG:3857 中提供坐标，并期望在 EPSG:3857 中投影图像。

如果您没有看到任何图像，这可能意味着您的 WMS 服务器不支持 EPSG:3857。另外，我鼓励您通读 Leaflet WMS/TMS tutorial，其中重点介绍了如何将不同的 CRS 与 WMS 栅格源一起使用。

虽然，我只想获取这些坐标的图块

然后使用bounds option of L.TileLayer.WMS。 （如果您在文档中没有看到此选项，请记住 L.TileLayer.WMS 继承自 L.TileLayer 的选项，而 L.TileLayer 又继承自 L.GridLayer 的选项）

像这样：

wms = L.tileLayer.wms('/viewers/wms', {
 minZoom: 12,
 maxZoom: 25,
 layers: 'some layer name',
 format: 'image/png',
 updateWhenIdle: false,
 transparent: true,
 reuseTiles: true,
 showTheRasterReturned: true,
 COVERAGE_CQL_FILTER: 'featureId=\'' + featureId + '\''

 bounds: L.latLngBounds([[35.77, -78.65],[35.78, -78.63]])
});