leaflet地图绘画引擎引用自己的背景做地图背景

this.map = L.map(“map”, {
zoom: 1, //缩放比列
minZoom: -5,
zoomControl: true, // + - 按钮
doubleClickZoom: false, // 禁用双击放大
attributionControl: false,// 移除右下角leaflet标识
maxZoom: 4,
center: [0, 0],
crs: L.CRS.Simple
});
let w = nowWidth,
h = nowHeight;
let url = process.env.VUE_APP_BASE_API + ‘/file’ + this.pngPath;
let image = L.imageOverlay(url, [[0, 0], [-h, w]]).addTo(this.map);
this.map.fitBounds([[0, 0], [-h, w]]);

但是自己的地图背景必须等比例的加载到map的容器中，所以在上树的初始化之前需要将自己的地理坐标转换成像素坐标。

首先根据地图背景的长宽和自己的map容器的长宽，来计算缩放比例
let mapZoom = 1; // 缩放比例
console.log(width + " " + height) // width和height 是自己接口背景地图的长宽
// 计算缩放比例
let mapContainterWidth = this. r e f s . m a p C o n t a i n t e r . c l i e