leaflet學習(四)----球面座標系

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>

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