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. JS基础——脚本位置、数据类型、函数作用域

    (一)脚本位置 JavaScript是嵌套到浏览器里的脚本语言:可放在3个位置: 1.写在头部(head里) <head>    <meta charset="UTF-8& ...

  2. 安卓和iOS统一下载页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Ubuntu18.04 有线无法正常上网（请读完全文再进行操作）

    电脑Windows10+Ubuntu18.04双系统,一直都没问题,前段时间突然在Ubuntu系统下有线连接失败,但是在Windows下可以正常上网. 今天尝试进行了修复. 在终端通过ifconfig ...

  4. 深入分析Java反射(七)-简述反射调用的底层实现

    前提 Java反射的API在JavaSE1.7的时候已经基本完善,但是本文编写的时候使用的是Oracle JDK11,因为JDK11对于sun包下的源码也上传了,可以直接通过IDE查看对应的源码和进行 ...

  5. dp--最长上升子序列LIS

    1759:最长上升子序列 总时间限制:  2000ms 内存限制:  65536kB 描述 一个数的序列bi,当b1 < b2 < ... < bS的时候,我们称这个序列是上升的.对 ...

  6. R语言 批量下载财务报表

    getsheets <- function(symbol,type,file){ pre="http://money.finance.sina.com.cn/corp/go.php/v ...

  7. Java基础三(2020.1.15)

    学习内容: 1.Java流程控制之循环结构 2.Java数组 3.Java方法 1.随机数:math.random()得到0-1之间的数     math.random()*10+1得到1-10之间的 ...

  8. tensorflow C++接口调用目标检测pb模型代码

    #include <iostream> #include "tensorflow/cc/ops/const_op.h" #include "tensorflo ...

  9. Linux-waitpid介绍

    1.waitpid与wait差别 (1).基本功能是一样的,都是用来回收子进程 (2).waitpid可以回收指定PID的子进程 (3).waitpid可以阻塞式或非阻塞式两种工作模式 2.代码示例 ...

  10. C++类的访问控制关键字

    public:修饰的成员变量和函数,可以在类的内部和类的外部被访问. private:修饰的成员变量和函数,只能在类的内部被访问,不能在类的外部被访问. protected:修饰的成员变量和函数,只能 ...