leaflet 叠加天地图、谷歌、高德等瓦片

最新推荐文章于 2025-07-04 10:00:50 发布

原创最新推荐文章于 2025-07-04 10:00:50 发布 · 3.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#leaflet

leaflet 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种基于Leaflet.js的地图图层切换器实现方案，涵盖了多种地图服务，包括智图、天地图、谷歌地图、高德地图等。通过自定义的JavaScript函数，实现了地图的初始化，并提供了丰富的地图图层供用户选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/leaflet.css">
    <script src="./js/leaflet.js"></script>
    <script src="./js/Leaflet.ChineseTmsProviders.js"></script>
    <style>
        #map{
            width: 100%;
            height: calc(100vh);
            
        }
    </style>
</head>

<body onload="initMap()">
    <div id="map"></div>
    <script>
        function initMap() {
            var map = L.map('map', {
                center: [39.910864, 116.481736],
                zoom: 9,
                maxZoom: 10
            });
            /**
             * 智图地图内容
             */
            var normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', {
                maxZoom: 18,
                minZoom: 5
            });
            var normalm3 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
                maxZoom: 18,
                minZoom: 5
            });
            var normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {
                maxZoom: 18,
                minZoom: 5
            });
            var normalm5 = L.tileLayer.chinaProvider('Geoq.Normal.Warm', {
                maxZoom: 18,
                minZoom: 5
            });
            /**
             * 天地图内容
             */
            var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
                    maxZoom: 18,
                    minZoom: 5
                }),
                normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
                    maxZoom: 18,
                    minZoom: 5
                }),
                imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
                    maxZoom: 18,
                    minZoom: 5
                }),
                imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
                    maxZoom: 18,
                    minZoom: 5
                });

            var normal = L.layerGroup([normalm, normala]),
                image = L.layerGroup([imgm, imga]);
            /**
             * 谷歌
             */
            var normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', {
                    maxZoom: 18,
                    minZoom: 5
                }),
                satelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', {
                    maxZoom: 18,
                    minZoom: 5
                });
            /**
             * 高德地图
             */
            var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
                maxZoom: 18,
                minZoom: 5
            });
            var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
                maxZoom: 18,
                minZoom: 5
            });
            var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
                maxZoom: 18,
                minZoom: 5
            });
            var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga]);



            var baseLayers = {
                "智图地图": normalm1,
                "智图午夜蓝": normalm3,
                "智图灰色": normalm4,
                "智图暖色": normalm5,
                "天地图": normal,
                "天地图影像": image,
                "谷歌地图": normalMap,
                "谷歌影像": satelliteMap,
                "高德地图": Gaode,
                "高德影像": Gaodimage,

            }
            L.layerGroup([imgm,imga]).addTo(map);
            L.control.layers(baseLayers, null).addTo(map);
        }
    </script>
</body>

</html>