leaflet 加载百度瓦片 与 加载普通谷歌瓦片方法都一样,都是 L.map('cssid', mapOption);
mapOption 坐标系 crs 需要使用 900913 , layer中 tms 需要为true。
注意:普通谷歌瓦片的坐标系原点是 origin: [-180, 90] ,百度地图的瓦片坐标系原点是 origin: [0, 0]。
以下是主要代码:
const CRS_900913 = 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 < 19; i++) {
res[i] = Math.pow(2, (18 - i))
}
return res;
}(),
origin: [0, 0],
bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
});
// 自己下载的 百度离线瓦片地址
let encryptUrl = 'http://ip/{z}/{x}/{y}.png';
let tempLayer = this.L.tileLayer(encryptUrl, {
minZoom: 0,
maxZoom: 18,
tms: true // 这里需要为true 否则 y 为负数
});
let mapOptions = {
crs: CRS_900913,
center: this.L.latLng(Number(39.909187), Number(116.397451)),
zoom: 6,
minZoom: 0,
maxZoom: 18,
layers: tempLayer,
};
this.L.map('cssid', mapOptions);