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)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章