基于 Leaflet 的缩放功能：在最后一层瓦片缺失时进行优化

引言：Leaflet 是一个广泛使用的开源 JavaScript 库，用于创建交互式、可定制的地图应用程序。在 Leaflet 中，默认情况下，瓦片地图是通过切分成多个瓦片来展示的，这些瓦片组合在一起形成完整的地图。然而，当地图的最后一层瓦片存在缺失或不完整时，可能会导致用户在缩放时出现显示问题。本文将介绍如何优化 Leaflet 缩放功能，以便在最后一层瓦片缺失时提供更好的用户体验

第一种方式

您可以使用参数 maxNativeZoom 来定义从哪一层瓦片开始进行缩放。具体来说，maxNativeZoom 参数用于设置地图的最大本机缩放级别，即地图所使用的原始瓦片的最高缩放级别

缺点：必须指定哪一层，但是瓦片的资源，最后一层是不确定的，打个比方，深圳的最后一层是18层，舟山港口的最后一层是17层，那这就不完美了，除非地图是指定区域使用，比如惠州某园区

var tileLayer = L.tileLayer(url, {
   
   
    maxZoom: 23,
    maxNativeZoom: 18,
});

第二种方式

基于第一种方式的缺点，做了优化，基于插件
Leaflet.TileLayer.Fallback（添加链接描述）
使用此插件，您无需显式指定 maxNativezoom 选项。平铺层首先尝试获取当前缩放的平铺图像，但在服务器没有该缩放级别的图像并返回404错误的区域，平铺层将自动请求较低的缩放。

// 引用以上插件后这样设置就好
var myTileLayer = L.tileLayer.fallback(url, {
   
   
	maxZoom: 22,
});
myTileLayer.addTo(map);

第三种方式

第二种方式只能在返回404错误时监听，这就有个问题了，比如他不是返回404错误，而是返回一张错误的图片，比如

到这里已经技穷，所以基于Leaflet.TileLayer.Fallback 插件源码做了一点小修改，由于这张错误瓦片没有什么唯一标识，比如url和坐标都不能作为唯一标识，所以打算用图片的responseText的长度作为图片的的唯一标识，源码在最后面

Leaflet.TileLayer.Fallback 插件 fallback.js，做了改动后的代码，缺点是多请求了一遍瓦片

L.TileLayer.Fallback = L.TileLayer.extend({
   
   
    options: {
   
   
        minNativeZoom: 0,
    },

    initialize: function (urlTemplate, options) {
   
   
        L.TileLayer.prototype.initialize.call(this, urlTemplate, options);
    },

    createTile: function (coords, done) {
   
   
        var tile = L.TileLayer.prototype.createTile.call(this, coords, done);
        tile._originalCoords = coords;
        tile._originalSrc = tile.src;

        return tile;
    },

    _createCurrentCoords: function (originalCoords) {
   
   
        var currentCoords = this._wrapCoords(originalCoords);

        currentCoords.fallback = true;

        return currentCoords;
    }