leaflet 加载百度地图-替换自定义图层-叠加图层（加载到一定层级加载局部地图-无缝切换）

加载leaflet，proj4插件

导入leaflet.js ,leaflet.css

导入proj4-compressed.js ,proj4leaflet.js，leaflet-bmap.js

proj4链接

leaflet-bmap.js 内容如下

 var crs =
     new L.Proj.CRS('EPSG:900913',
	'+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs',
{
    resolutions: function () {
        level = 19
        var res = [];
        res[0] = Math.pow(2, 18);
        for (var i = 1; i < level; i++) {
            res[i] = Math.pow(2, (18 - i))
        }
        return res;
    }(),
    origin: [0,0],
    bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
});

leaflet加载百度地图

<div id="lmap" style="width:100%;height:100%;position:absolute;top:0;right:0;">div>

var	lmap = L.map('lmap',{crs:crs,center:L.latLng(39.915052,116.403954),zoom:16,  maxZoom: 18,maxNativeZoom: 18,
    minZoom: 5});
    
lmap.addLayer(new L.TileLayer('http://online{s}.map.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20190929', {
        maxZoom: 18,
        minZoom: 5,
        subdomains: [0,1,2],
        tms: true
    }););

替换自定义图层

重写L.TileLayer.getTileUrl 函数，切片地址换成自定义地址。

L.TileLayer.MyTileLayer  = L.TileLayer.extend({
    getTileUrl: function(coords) {
     //  直接在切片图层上修改，替换为自定义地址
        var urlArgs,
            getUrlArgs = this.options.getUrlArgs;

        if (getUrlArgs) { //自定义切片地址函数
            var urlArgs = getUrlArgs(tilePoint);
        } else {
            urlArgs = {
                z: tilePoint.z,
                x: tilePoint.x,
                y: tilePoint.y
            };
        }

        return L.Util.template(this._url, L.extend(urlArgs, this.options, {s: this._getSubdomain(tilePoint)}));
  }
});

L.tileLayer.myTileLayer = function (url, options) {
    return new L.TileLayer.MyTileLayer(url, options);
};

var url = ',
    options = {
        subdomain: '012',
        getUrlArgs: function (tilePoint) {
        //写自己的逻辑，返回切片地址
            return  ;
        }        
    };
L.tileLayer.myTileLayer (url, options).addTo(lmap);

叠加自定义图层

显示两个切片图层，先加载百度切片图层，然后加载自定义图层

##加载百度切片图层

//加载百度地图代码

 var	lmap = L.map('lmap',{crs:crs,center:L.latLng(39.915,116.404),zoom:16,  maxZoom: 21,maxNativeZoom: 21,
    minZoom: 5});
new L.TileLayer('http://online{s}.map.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z=>{z}&styles=pl&scaler=1&udt=20190929 ', {
    maxZoom: 21,
    minZoom: 5,
  subdomains: [0,1,2],
tms: true
}).addTo(lmap);

##加载自定义图层
重新L.TileLayer.getTileUrl 函数

L.TileLayer.MyTileLayer2   = L.TileLayer.extend({
    getTileUrl: function(coords) {
     
        // console.log("coords---->",coords);
        console.log("我的TileLayer方法")
		//替换加载自定义切片地址
        if(coords.z == 19){
            console.log("getTileUrl的方法"+coords.z)
            return 'tiles/' + coords.z + '/' + ((coords.y + 27081) * 1 + 2) + '.' +  (coords.x - 105707 + 1) + '.jpg';
        }else if(coords.z == 20){
            return 'tiles/' + coords.z + '/' + ((coords.y + 54163) * 1 + 2) + '.' + (coords.x - 211414 + 1) + '.jpg';
        }else if(coords.z == 21){
            return 'tiles/' + coords.z + '/' + ((coords.y + 108327) * 1 + 2) + '.' + (coords.x - 422828 + 1) + '.jpg';
        }
        // return L.Util.template(this._url, L.extend(data, this.options));

    }
});


//加载叠加切片图层
L.tileLayer.myTileLayer2    = function() {
    return new L.TileLayer.MyTileLayer2   ('http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1&v=020 ', {
        maxZoom: 21,
        minZoom: 5,
        subdomains: [0,1,2],
        tms: true
    });
}

lmap.addLayer( L.tileLayer.myTileLayer2() );