Leaflet 使用图片作为地图

Leaflet 使用图片作为地图

关键代码：

L.CRS.Simple.transformation = new L.Transformation(1, 0, 1, 0); // 坐标原点切换为左上角

var map = new L.Map('map', {
    crs: L.CRS.Simple, // 设置地图坐标模式为简单模式
    center: [0, 0], // 地图中心
    zoom: -0.5, // 缩放比例
    maxZoom: 1.9, // 最大缩放比例
    minZoom: -1.7, // 最小缩放比例
    zoomSnap: 0.1, // 缩放级别会捕捉到最接近的整数
    attributionControl: false, // 移除右下角leaflet标识
    doubleClickZoom: false, // 禁用双击放大
    zoomControl: false // 禁用 + - 缩放按钮
});

function loadMap(imgUrl, width, height) {
    let imageBounds = [[0, 0], [height, width]]; // [[0, 0], [高, 宽]]
    let imageLayer = L.imageOverlay(imgUrl, imageBounds);
    map.addLayer(imageLayer);
    map.panTo(new L.LatLng(imageBounds[1][0] / 2.0, imageBounds[1][1] / 2.0), { animate: false });
}

loadMap('images/building-images/010101.png', 1516, 1080)