003-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>003-Leaflet-各地图切换</title>
    <link rel="stylesheet" href="../leaflet/leaflet.css">
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #baidu,
        #gaode,
        #tianditu {
            width: 100%;
            height: 100vh;
        }

        .tools {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 999;
        }

        .tools span {
            padding: 5px;
            background-color: #000;
            border-radius: 5px;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="baidu"></div>
    <div id="gaode"></div>
    <div id="tianditu"></div>
    <div class="tools">
        <span data-id="baidu">百度</span>
        <span data-id="gaode">高德</span>
        <span data-id="tianditu">天地图</span>
    </div>
    <script src="../leaflet/leaflet.js"></script>
    <script src="../plugs/proj4.js"></script>
    <script src="../plugs/proj4leaflet.min.js"></script>
    <script src="../plugs/leaflet.ChineseTmsProviders.js"></script>
    <script>
        //百度
        var baidu = L.tileLayer.chinaProvider('Baidu.Normal.Map', {
            maxZoom: 18,
            minZoom: 5
        });
        //百度地图初始化
        var baidu = L.map('baidu', {
            crs: L.CRS.Baidu,
            layers: [baidu],
            center: new L.LatLng(39.915085, 116.3683244),
            zoom: 13,
            zoomControl: false
        });
        //高德
        var gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
            maxZoom: 18,
            minZoom: 5
        });
        //高德地图初始化
        var gaode = L.map('gaode', {
            layers: [gaode],
            center: new L.LatLng(39.915085, 116.3683244),
            zoom: 13,
            zoomControl: false
        });
        //天地图
        var tianditu = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
            maxZoom: 18,
            minZoom: 5
        })
        //天地图地图初始化
        var baidu = L.map('tianditu', {
            layers: [tianditu],
            center: new L.LatLng(39.915085, 116.3683244),
            zoom: 13,
            zoomControl: false
        });
        //修改地图
        function chageMap(type) {
            console.log(type);
            document.querySelector('#baidu').style.display = type === 'baidu' ? 'block' : 'none';
            document.querySelector('#gaode').style.display = type === 'gaode' ? 'block' : 'none';
            document.querySelector('#tianditu').style.display = type === 'tianditu' ? 'block' : 'none';
        }
        //添加事件
        let myButton = document.querySelectorAll('span');
        myButton.forEach(f => {
            f.addEventListener('click', e => {
                chageMap(e.target.getAttribute('data-id'));
            })
        });

    </script>
</body>

</html>

　　二、效果

 

posted @ 2023-06-29 14:47  Fetion  阅读(78)  评论(0)    收藏  举报