leaflet加載各類地圖

時間 2019-11-10

標籤 leaflet 加載各類地圖简体版

原文原文鏈接

Leaflet調用各類地圖的功能十分複雜，幸虧有leaflet.ChineseTmsProviders這個插件，這四種地圖直接就能夠加載進來，十分方便。css

下面是我作的例子：html

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。