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. UML-领域模型的精化

    拙劣的分类和错误的概括是混乱生活的祸根.--H.G.Wells的总结 1.is-a原则 子类定义的成员变量.方法与超类必须一致.即:不能多,也不能少. 子类是“一种”超类.CreditPayment是 ...

  2. UML-GRASP后4种模式

    1.多态 1).什么是多态 问题:if-else耦合度过高 解决: 方法1:接口 方法2:超类里需多态的方法前加上{abstract} 2).相关模式 防止异变 大量GoF,如适配器(Adapter) ...

  3. 客户主题分析（tableau）—客户分群

    主要分析方面:客户合理分群 客户分群实现:使用聚类构建指标,需理解聚类的分析逻辑,需使用软件:tableau 聚类方法:选择3指标分别为购买总金额,客户购买次数.类平均购买价格(四类的平均购买价格,四 ...

  4. cppcheck下载及使用

    一.参考文档 1.Ubuntu下安装Cppcheck源码操作步骤 2.cppcheck std.cfg not found error when std.cfg file is available 3 ...

  5. java中abstract怎么使用

    abstract(抽象)修饰符,可以修饰类和方法 1,abstract修饰类,会使这个类成为一个抽象类,这个类将不能生成对象实例,但可以做为对象变量声明的类型,也就是编译时类型,抽象类就像当于一类的半 ...

  6. Excel Old format or invalid type library 错误原因

    Old format or invalid type library 错误原因 调用excel方法失败,Old format or invalid type library 解决方案: 1,这是Exc ...

  7. UVA 10158 并查集的经典应用

    这个题目一看就是用并查集,有N个国家代表,在M行给出两两之间的关系,敌人或者朋友,(当然如果该关系跟已知关系冲突,则输出-1) 关系的几个约束条件时这样的 在朋友方面,朋友的朋友就是自己的朋友,这个就 ...

  8. pycharm运行过程中，出现python已停止工作的对话框的解决办法

    在Windows7的情况下,在运行中输入“Regedit”并执行,使用注册表编辑器. 依次定位到HKEY_CURRENT_USER＼Software＼Microsoft＼Windows＼Windows ...

  9. Asp.Net MVC主项目访问不到分离项目控制器的解决方案

    我在portal主项目外新建一个分离项目,控制器和Model都写在分离项目中,视图层写在portal中. 我更改了命名空间,引用了Dll,还是不能访问到控制器. 找到问题: 最后我发现是主项目port ...

  10. Python笔记_第一篇_面向过程_第一部分_6.条件控制语句(if)

    Python正如其他语言一样存在两种常用的逻辑判断体(也叫结构化程序设计).所谓逻辑判断体是通过你想要完成的编程思路,通过在逻辑判断体中的相互判断和作用得到你想要的结果.逻辑判断体也叫控制语句,Pyt ...