美文网首页
leaflet学习(四)----球面坐标系

leaflet学习(四)----球面坐标系

作者: 悦者生存 | 来源:发表于2020-01-02 10:15 被阅读0次

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>

相关文章

网友评论

      本文标题:leaflet学习(四)----球面坐标系

      本文链接:https://www.haomeiwen.com/subject/silgoctx.html