如何让Leaflet同时实现瓦片回退与灰度化效果？

这个问题其实很适合用Leaflet的类继承机制来解决——我们只需要创建一个同时继承L.TileLayer.Fallback和整合leaflet-grayscale功能的新类就行，不用改太多源码。核心是让灰度滤镜逻辑依附于具备回退功能的图层类，而非原生的L.TileLayer。

首先确保你按顺序加载依赖脚本：Leaflet核心 → Leaflet.TileLayer.Fallback → 下面的自定义代码。

// 创建继承自L.TileLayer.Fallback的灰度图层类
L.TileLayer.FallbackGrayscale = L.TileLayer.Fallback.extend({
  initialize: function(url, options) {
    // 先调用父类（Fallback）的初始化逻辑，保证回退功能正常运行
    L.TileLayer.Fallback.prototype.initialize.call(this, url, options);
    
    // 移植原leaflet-grayscale的初始化逻辑
    this._originalTileSize = this.options.tileSize;
    // 支持通过grayscale: false参数临时关闭灰度效果
    if (this.options.grayscale === false) {
      this._noGrayscale = true;
    }
  },

  // 重写createTile方法：先让Fallback完成瓦片创建（含回退逻辑），再给瓦片加灰度滤镜
  createTile: function(coords, done) {
    // 调用Fallback的createTile获取瓦片元素，确保回退逻辑生效
    const tile = L.TileLayer.Fallback.prototype.createTile.call(this, coords, done);
    
    // 如果不需要灰度，直接返回瓦片
    if (this._noGrayscale) return tile;
    
    // 应用灰度滤镜（原leaflet-grayscale的核心逻辑）
    const filter = 'grayscale(100%)';
    tile.style.filter = filter;
    tile.style.webkitFilter = filter;
    tile.style.mozFilter = filter;
    tile.style.msFilter = filter;
    tile.style.oFilter = filter;

    // 处理瓦片尺寸偏移（原灰度插件的兼容逻辑）
    if (this.options.tileSize !== this._originalTileSize) {
      tile.width = tile.height = this._originalTileSize;
    }

    return tile;
  }
});

// 添加快捷调用方式，和Leaflet原生图层的调用风格保持一致
L.tileLayer.fallbackGrayscale = function(url, options) {
  return new L.TileLayer.FallbackGrayscale(url, options);
};

现在你可以像使用普通Leaflet图层一样，同时启用回退和灰度功能：

const map = L.map('map').setView([51.505, -0.09], 13);

// 初始化带灰度+回退的图层
L.tileLayer.fallbackGrayscale('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  // Fallback插件配置：当前级别瓦片缺失时，回退到最高18级瓦片
  fallbackMaxZoom: 18,
  // 可选配置：设置grayscale: false可以临时关闭灰度效果
  grayscale: true
}).addTo(map);

• 完全保留了两个插件的原有功能：既具备瓦片缺失时的回退逻辑，又能实现地图灰度化；
• 配置灵活：可以通过参数随时开启/关闭灰度效果，也能正常使用Fallback的所有配置项；
• 无需修改原插件源码，通过自定义继承类实现功能整合，避免了后续插件更新的冲突。

内容的提问来源于stack exchange，提问作者JPM