leaflet一些类中拥有“可扩展方法”：为编写子类提供入口方法。

	// image-specific code (override to implement e.g. Canvas or SVG tile layer)

	getTileUrl: function (tilePoint) {
		return L.Util.template(this._url, L.extend({
			s: this._getSubdomain(tilePoint),
			z: tilePoint.z,
			x: tilePoint.x,
			y: tilePoint.y
		}, this.options));
	},

L.TileLayer.getTileUrl
当新的瓦片载入时，此方法在L.TileLayer内部调用。通过做一个L.TileLayer子类，重写他的getTileUrl()方法，在其中可以自定义功能。

提供一个PlaceKitten(L.TileLayer子类)，用来随机产生Kitten的图片。

	L.TileLayer.Kitten = L.TileLayer.extend({
		getTileUrl: function(coords) {
			var i = Math.ceil( Math.random() * 4 );
			return "https://placekitten.com/256/256?image=" + i;
		},
		getAttribution: function() {
			return "<a href='https://placekitten.com/attribution.html'>PlaceKitten</a>"
		}
	});

	L.tileLayer.kitten = function() {
		return new L.TileLayer.Kitten();
	}

	L.tileLayer.kitten().addTo(self);

在上个例子中，L.TileLayer.Kitten 在使用的时候同时进行定义，对于插件来说，最好将插件代码分离到它自己的文件中，在使用时候再进行引用。
对于KittenLayer，应该创建一个文件L.KittenLayer.js，如下

另一个扩展方法是L.GridLayer.createTile()。当L.TileLayer作为一个图片的栅格容器。需要使用类似于HTML Elements去创建
栅格。
L.GridLayer允许创建img栅格。div、canvas、picture也是可行的。createTile()返回值必须是一个给与坐标的HTML Element，知道如何在DOM中如何操作Element在这里是很重要的。Leaflet需要HTML Element实例，那么由jQuery创建Element将无法使用。
在div中使用一个自定义的GridLayer显示坐标的例子，在我们为leaflet内部做debug时很有用处。也可以理解坐标是如何生效的。

L.GridLayer.DebugCoords = L.GridLayer.extend({
    createTile: function (coords) {
        var tile = document.createElement('div');
        tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
        tile.style.outline = '1px solid red';
        return tile;
    }
});

L.gridLayer.debugCoords = function(opts) {
    return new L.GridLayer.DebugCoords(opts);
};

map.addLayer( L.gridLayer.debugCoords() );

如果元素必须做一些异步初始化工作，在tile加载结束后(完全加载成功或者加载失败)，需要使用函数中第二个参数进行回调，在这里我们必须人为的延迟tile加载。

createTile: function (coords, done) {
    var tile = document.createElement('div');
    tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
    tile.style.outline = '1px solid red';

    setTimeout(function () {
        done(null, tile);	// Syntax is 'done(error, tile)'
    }, 500 + Math.random() * 1500);

    return tile;
}

使用这些自定义GridLayer，插件必须可以对组成Grid的HTML Element进行完全控制。少量的插件已经在使用canvas来做一些各为先进的功能。
一个非常基础的canvas GridLayer

L.GridLayer.CanvasCircles = L.GridLayer.extend({
    createTile: function (coords) {
        var tile = document.createElement('canvas');

        var tileSize = this.getTileSize();
        tile.setAttribute('width', tileSize.x);
        tile.setAttribute('height', tileSize.y);

        var ctx = tile.getContext('2d');

        // Draw whatever is needed in the canvas context
        // For example, circles which get bigger as we zoom in
        ctx.beginPath();
        ctx.arc(tileSize.x/2, tileSize.x/2, 4 + coords.z*4, 0, 2*Math.PI, false);
        ctx.fill();

        return tile;
    }
});

创建一个自定义的L.Layer是可行的，但是需要对Leaflet中HTML元素坐标有更深层的理解。版本中没有介绍的有：

在他们的核心处，所有的L.Layer都是map pane内的HTML元素，它们的位置与内容由layer的代码定义。当一个layer被实例化之后，无论怎样HTML元素不能再被创建。相反的，当layer加载到map之后，元素才被完成。layer是不知道map的，直到layer被map加载。

换句话说，map调用Layer的onAdd()方法，layer才创建它的HTML元素(通常称为container元素)并把元素加到map pane上。相对的，当layer从map上移除，它的onRemove()方法将被调用。在加载到map时，layer必须更新它的内容，当map更新视图时，它的元素需要重新定位。一个layer的框架：

L.CustomLayer = L.Layer.extend({
    onAdd: function(map) {
        var pane = map.getPane(this.options.pane);
        this._container = L.DomUtil.create(…);

        pane.appendChild(this._container);

        // Calculate initial position of container with `L.Map.latLngToLayerPoint()`, `getPixelOrigin()` and/or `getPixelBounds()`

        L.DomUtil.setPosition(this._container, point);

        // Add and position children elements if needed

        map.on('zoomend viewreset', this._update, this);
    },

    onRemove: function(map) {
        L.DomUtil.remove(this._container);
        map.off('zoomend viewreset', this._update, this);
    },

    _update: function() {
        // Recalculate position of container

        L.DomUtil.setPosition(this._container, point);        

        // Add/remove/reposition children elements if needed
    }
});

在一些应用不需要整个onAdd方法重构，而是父类方法可以重用，然后可以根据需要在初始化之前或之后添加一些方法。
提供一个例子，我们定义一个L.Polyline的子类，线条一直为红色：

L.Polyline.Red = L.Polyline.extend({
    onAdd: function(map) {
        this.options.color = 'red';
        L.Polyline.prototype.onAdd.call(this, map);
    }
});

转载自：https://blog.csdn.net/weixin_39279307/article/details/86489800