leaflet——地图加载

最新推荐文章于 2024-08-15 17:17:10 发布

black2222

最新推荐文章于 2024-08-15 17:17:10 发布

阅读量2.2k

点赞数

分类专栏： leaflet 文章标签： leaflet

本文链接：https://blog.csdn.net/black2Girl/article/details/85262140

版权

leaflet 专栏收录该内容

15 篇文章 5 订阅

订阅专栏

            var map = L.map('map', {
                center: [40, 100],
                zoom: 4
            });
            // 影像
            L.tileLayer("http://t{s}.tianditu.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
                subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
            }).addTo(map);
            // 地名标注
            L.tileLayer("http://t{s}.tianditu.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
                subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
            }).addTo(map);
            // 边界
            L.tileLayer("http://t{s}.tianditu.cn/ibo_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ibo&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
                subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
            }).addTo(map);

添加图片作为地图

除了以上常见的地图提供商的地图，在有些时候需要使用自己的地图，例如图片，这时就可以使用：

L.imageOverlay(imageUrl, imageBounds).addTo(mymap);

leaflet加载各种地图

Leaflet调用各种地图的功能十分复杂，使用leaflet.ChineseTmsProviders这个插件，这四种地图直接就可以加载进来，十分方便。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>地图加载</title>  
    <link href="leaflet/leaflet.css" type="text/css" rel="stylesheet"/> >  
    <script src="leaflet/leaflet.js"></script>  
    <script src="leaflet/leaflet.ChineseTmsProviders.js"></script>  
</head>  
<body>  
<div id="map" style="width: 100vw;height: 100vh">  
</div>  
<script>  
    /**  
     * 智图地图内容  
     */  
    var normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', {  
        maxZoom: 18,  
        minZoom: 5  
    });  
    var normalm2 = L.tileLayer.chinaProvider('Geoq.Normal.Color', {  
        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 normalm6 = L.tileLayer.chinaProvider('Geoq.Normal.Cold', {  
        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,  
        "智图多彩": normalm2,  
        "智图午夜蓝": normalm3,  
        "智图灰色": normalm4,  
        "智图暖色": normalm5,  
        "智图冷色": normalm6,  
        "天地图": normal,  
        "天地图影像": image,  
        "谷歌地图": normalMap,  
        "谷歌影像": satelliteMap,  
        "高德地图": Gaode,  
        "高德影像": Gaodimage,  
  
    }  
  
    var map = L.map("map", {  
        center: [31.59, 120.29],  
        zoom: 12,  
        layers: [normalm1],  
        zoomControl: false  
    });  
  
    L.control.layers(baseLayers, null).addTo(map);  
    L.control.zoom({  
        zoomInTitle: '放大',  
        zoomOutTitle: '缩小'  
    }).addTo(map);  
</script>  
</body>  
</html>