1.球面座標系,由於地球是一個曲面,在平面地圖上需要定義CRS系統
2.如果是平面圖(如工位平面圖),定義CRS爲L.CRS.Simple,使用地圖不要加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--引入css-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<style>
html,body{
padding:0;
margin:0;
}
#mapid { height: 400px; width: 400px }
</style>
<body>
<div id="mapid"></div>
</body>
<!--引入js-->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<script>
const map=L.map('mapid',{
// 使用的座標系,當你不確定座標系是什麼時請不要更改
crs:L.CRS.Simple,
// 地圖的最小視圖。可以重寫地圖圖層的最小視圖
minZoom:1,
editable:true,
// 確定屬性控制是否默認加載在地圖上
attributionControl:false
}).setView([50,50],16);
const bounds=[[0,0],[100,100]];
// 用來在地圖上規定範圍內載入和顯示單幅圖像
const image=L.imageOverlay('./img/cat.jpeg',bounds).addTo(map);
// 將地圖視圖儘可能大地設定在給定的地理邊界內
map.fitBounds(bounds);
</script>
</html>