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)