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/leaflet@1.6.0/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/leaflet@1.6.0/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>
网友评论