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>

leaflet加载各种地图的更多相关文章

  1. Flex加载google地图、百度地图以及天地图作底图

    一  Flex加载Google地图作底图 (1)帮助类GoogleLayer.as /* * 根据输入的地图类型加载Google地图(by chenyuming) */ package Layers ...

  2. ArcGIS API for Silverlight 加载google地图

    原文:ArcGIS API for Silverlight 加载google地图 using System; using System.Net; using System.Windows; using ...

  3. ArcGIS API for Silverlight加载google地图（后续篇）

    原文:ArcGIS API for Silverlight加载google地图(后续篇) 之前在博客中(http://blog.csdn.net/taomanman/article/details/8 ...

  4. Delphi中用Webbrowser加载百度地图滚轮失效（ApplicationEvents里使用IsChild提前判断是哪个控件的消息）

    在Delphi中使用Webbrowser加载百度地图时,点击了其它界面,再回到百度地图中,即使点击了鼠标,再用滚轮也不能缩 放地图,除非点地图里面的自带的控件,之后才能缩放,原因是因为其它窗体控件获得 ...

  5. OpenLayers加载QQ地图(转)

    OpenLayers加载QQ地图 http://www.openlayers.cn/portal.php?mod=view&aid=4 2012-10-21 17:22| 发布者: admin ...

  6. ArcGIS API for JavaScript 4.4 版本加载谷歌地图

    ArcGIS API for JavaScript 4.X 版本升级后,API发生了很大的变化. 其中就支持了WebEarth展示,主要是通过 esri/views/SceneView 实现的. 在新 ...

  7. Global Mapper如何加载在线地图

    Global Mapper是一个比较好用的GIS数据处理软件,官网:http://www.bluemarblegeo.com/products/global-mapper.php ,除使用ArcGIS ...

  8. arcgis 加载高德地图 es6的方式

    目前很多arcgis 加载高德地图是dojo的方式 外部引入文件,现在改成这种方式 /** * Created by Administrator on 2018/5/14 0014. */ impor ...

  9. arcgis JavaScript 加载 mapbox地图

    mapbox 地图现在是越来越好看了, 随便试 /** * Created by Administrator on 2018/5/15 0015. */ import * as esriLoader ...

随机推荐

  1. JavaScript学习总结（五）

    之前的几讲中我们曾经说过,JavaScript中是没有类的概念的.但是我们讲过对象,那么这个对象是怎么来的呢? 只要有函数即可创建对象 自定义对象 自定义对象的方式: 1. 使用无参的函数创建对象 & ...

  2. opencv进行视频播放每帧处理，读取视频失败

    cv::VideoCapture capture(filename); if (!capture.isOpened()) { cout << "open video error& ...

  3. h5-应用级缓存

    1.html代码及css代码 <!DOCTYPE html> <!--manifest="应用程序缓存清单文件的路径 建议文件的扩展名是appcacje,这个文件的本质就是 ...

  4. Python笔记_第四篇_高阶编程_进程、线程、协程_1.进程

    1. 多任务原理: 现代操作系统,像win,max os x,linux,unix等都支持多任务. * 什么叫做多任务? 操作系统可以同时运行多个任务. * 单核CPU实现多任务原理? 操作系统轮流让 ...

  5. js实现placehoider效果

    placeholder作为input输入框提示语很好用,但是低版本ie却不支持,对于只有提示语的输入框并不适用 <input type="text" value=" ...

  6. 01 语言基础+高级：1-10 JDK8新特性_day12【函数式接口】

    day12[函数式接口] 主要内容自定义函数式接口函数式编程常用函数式接口 教学目标能够使用@FunctionalInterface注解能够自定义无参无返回函数式接口能够自定义有参有返回函数式接口能够 ...

  7. Web 全栈大会：万维网之父的数据主权革命

    大家好,今天我和大家分享一下由万维网之父发起的一场数据主权革命.什么叫数据主权?很容易理解,现在我们的数据是把持在巨头手里的,你的微信通讯录和聊天记录都无法导出,不管是从人权角度还是从法理角度,这些数 ...

  8. Cannot read property 'XXXX' of null/undifined

    这个问题可能的原因有很多 1.如果你的js直接写在自执行函数或者head标签内的script里面,那么可以检查一下你的代码有没有用到页面里的节点,因为这样写的代码在页面加载完成之前就会开始执行,如果有 ...

  9. JavaScript学习笔记 - 进阶篇（6）- JavaScript内置对象

    什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法: ...

  10. 五、Shell脚本高级编程实战第五部

    一.条件表达式 在bash的各种流程控制结构中通常要进行各种测试,然后根据测试结果执行不同的操作.有时也和if结合,让我们方便判断. test: 1)判断文件是否存在:test -f  file 2) ...