002-Leaflet-图层切换

一、代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>002-Leaflet-图层切换</title>
    <link rel="stylesheet" href="../leaflet/leaflet.css">
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script src="../leaflet/leaflet.js"></script>
    <script>
        //白昼图层
        let day = L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}', {
            attribution: '<a href="https://www.cnblogs.com/RadyGo/">我的博客</a>'
        });
        //午夜图层
        let night = L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', {
            attribution: '<a href="https://www.cnblogs.com/RadyGo/">我的博客</a>'
        });
        //地图初始化
        var map = L.map('map', {
            layers: [day],
            center: new L.LatLng(39.915085, 116.3683244),
            zoom: 13,
            zoomControl: false
        });
        //添加点位
        L.marker([39.915085, 116.3683244]).addTo(map)
            .bindPopup('可自定义的弹框内容。')
            .openPopup();

        //基础图层
        var baseLayers = {
            "白昼": day,
            "午夜": night
        };
        //添加图层控件到地图上
        L.control.layers(baseLayers).addTo(map);    
    </script>
</body>

</html>

二、效果

 

posted @ 2023-05-19 18:09  Fetion  阅读(262)  评论(0)  编辑  收藏  举报