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-GoF设计模式

    我认为,本章是重点中的重点.并非23个模式都被广泛应用,其中常用和最为有效的大概有15个模式. 1.适配器(Adapter) 1).使用场景 使用一个已经存在的类,但如果他的接口,也就是他的方法和你的 ...

  2. Hadoop的常用指令

    -help:查看帮助 hadoop fs -help rm -rm [-f] [-r|-R] [-skipTrash] <src> ... : Delete all files that ...

  3. 面试易错题 Java

    1. int[] arr = new int[10]; System.out.println(arr);//地址值? char[] arr1 = new char[10]; System.out.pr ...

  4. 命令行的操作——cd

    初学命令行,总是提示找不到有关的文件,当时的我啥也不知道,最后就很惨,啥也找不到 后来就只好自己上网找资料了 以下博文改编自小佳的博客 在需要处理不同路径下的文件的时候,经常要在命令行模式下切换目录, ...

  5. Thinkcmf截取内容长度

    例1: {$vo.post_title|msubstr=0,10} 截取标题,msubstr=0,10,数字表示截取的字符串长度,显示省略号,但无论长度是否超过截取的长度都会出现省略号: 例2: {$ ...

  6. I420转RGB

    http://blog.csdn.net/huiguixian/article/details/17288909 public class YuvToRGB { private static int  ...

  7. nginx调整large_client_header_buffers

    https://nginx.org/en/docs/http/ngx_http_core_module.html#large_client_header_buffers Syntax: large_c ...

  8. 记一次asp.net core 线上崩溃解决总结

    1.首先要先准备好环境,安装lldb 工具 要安装3.9版本的,因为每个版本对应dnc版本不一样,3.9的支持2.2 版本,然后确定分析的机器里dnc 版本和线上的生产环境是否一致,自己安装比较费劲, ...

  9. Java之解决线程安全问题的方式三：Lock锁

    import java.util.concurrent.locks.ReentrantLock; /** * 解决线程安全问题的方式三:Lock锁 --- JDK5.0新增 * * 1. 面试题:sy ...

  10. 第1章 MYSQL 体系结构和存储引擎

    一.定义数据库和实例 在集群的条件下,存在单个数据库对应多个实例 二.Mysql 体系结构 三.Mysql 存储引擎及各存储引擎之间的比较 命令:show engines; 四.连接 MySQL 4. ...