leaflet - 在 Leaflet 中使用多个图 block 层时，避免加载不可见的图 block

Question

我正在使用Leaflet有两个瓷砖层。第一个，我将其称为地下室瓷砖层，为整个世界提供瓷砖。第二个覆盖由反弹选项定义的特定区域中的地下室瓷砖层。我将其称为覆盖图 block 层。代码如下所示:

var map = L.map('map');

// OpenstreetMap tile layer as basement
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// overlaying tile layer for specific region defined by bounds
L.tileLayer('http://{s}.examples.com/overlay/{z}/{x}/{y}.png', {
  bounds: L.latLngBounds(L.latLng(59.321966, 18.05943), L.latLng(59.328469, 18.076167));
}).addTo(map);

覆盖的图 block 层不透明。因此，对于边界区域，只有覆盖图 block 层的图 block 可见。不需要地下室瓷砖层提供的瓷砖。但我还没有找到一种方法来阻止Leaflet加载这些不必要的图 block 。我很高兴收到任何提示。

我考虑过使用图 block 事件来中断不需要的图 block 的加载。但据记录的图 block 事件无法操纵图 block 加载。

这是一个JSFiddle展示行为。正如你所见，例如tile 14/4825/6155.png 是从 openstreetmap.org 加载的，即使它是不可见的。

在我的用例中，另一种想法使它变得更加复杂:叠加 map 具有严格的边界，因为它是由历史 map 生成的。因此，覆盖 map 的边界处的图 block 是透明的。在这些区域中，必须加载地下室 map 的图 block 。

Answer 1

感谢评论中的 @FrankPhillips 提示，我发现我可以覆盖 L.GridLayer 中的 _isValidTile 方法来实现该功能。我可以添加一个hole选项作为bounce选项的相反选项。

L.ExtendedTileLayer = L.TileLayer.extend({    
    _isValidTile: function (coords) {
        var crs = this._map.options.crs;

        if (!crs.infinite) {
            // don't load tile if it's out of bounds and not wrapped

            /*
             * this._globalTileRange is not defined
             * not quite sure why
             */
            var globalTileRange = this._map.getPixelWorldBounds( coords.z );

            var bounds = globalTileRange;
            if ((!crs.wrapLng && (coords.x < bounds.min.x || coords.x > bounds.max.x)) ||
                (!crs.wrapLat && (coords.y < bounds.min.y || coords.y > bounds.max.y))) { return false; }
        }

        var tileBounds = this._tileCoordsToBounds(coords);

        // don't load tile if it doesn't intersect the bounds in options
        if (this.options.bounds &&
            ! L.latLngBounds(this.options.bounds).intersects(tileBounds)) {
            return false;
        }

        // don't load tile if it does intersect the hole in options
        if (this.options.hole &&
            L.latLngBounds(this.options.hole).intersects(tileBounds)) {
            return false;
        }

        return true;
    },
});

var map = L.map('map', {
    center: [40.777838, -73.968654], 
    zoom: 14
});

new L.ExtendedTileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    hole: L.latLngBounds(
        L.latLng(40.791853, -73.967128),
        L.latLng(40.781455, -73.955713)
    )
}).addTo(map);

L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
    attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.',
    bounds: L.latLngBounds(
        L.latLng(40.791853, -73.967128),
        L.latLng(40.781455, -73.955713)
    )
}).addTo(map);

我updated JSFiddle显示它正在工作。

_isValidTile 大部分只是从 Leaflet 原始版本复制而来。我必须重新实现 this._globalTileRange 因为 is 未定义。代码仅适用于 leaflet-src.js，因为 _isValidTime 在生产版本中被丑化。