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. P3370 【模板】字符串哈希 题解

    地址:https://www.luogu.org/problem/P3370 求不同字符串的数量 这题用set也可以过,但是hash更高大上嘛. 哈希其实就是将一个字符串映射成一个值,并且要让这些值不 ...

  2. VMware DRS部分知识点

    主机添加到集群中,不需要维护模式(有虚拟机开机状态时也可以添加进去). 主机从集群中移除,需要主机进入维护模式. HA和DRS 全自动 当设置虚拟机必须在主机上时 DRS优先级大于HA 就算主机挂了H ...

  3. 触发器-- 肖敏_入门系列_数据库进阶 60、触发器(三) --youku

    二 https://v.youku.com/v_show/id_XMzkxOTc5NDY0OA==.html?spm=a2h0k.11417342.soresults.dtitle 三 https:/ ...

  4. C语言获取本机ip

    一.参考网址 1.c语言获取本机IP 二.源码 #include <stdio.h> #include <stdint.h> #include <stdlib.h> ...

  5. 为什么在SSM中的dao层不用写@Repository注解

    1.  Mybatis 接口编程中dao 层接口没有注解和 为什么能被实例化为bean? 在Spring配置Mybatis的文件中我们可以看到如下代码: <bean class="or ...

  6. ActiveMQ消息队列的搭建

    今天来写下消息队列 一.首先介绍下什么是activeMQ? ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 ...

  7. Python中列表的copy方法

    1.在列表中存在一个名为copy的方法,就像字面意思一样copy方法是用于复制列表元素的,示例如下: names = [‘Zhangsan’,’Lisi’,’WangErgou’] names2 = ...

  8. Python 安装zbar-py时出现 无法打开包括文件: “unistd.h” no such file or directory

    问题 途中使用的命令是cl.exe,在执行命令的时候找不到对应的unistd.h文件. unistd.h是Unix系统的文件,因此,十有八九,使用的是Windows系统.下面的代码可以修复,但是如果修 ...

  9. switch-case的用法

    case 值1: 表达式的值和 值1匹配上了,需要执行的代码; break; case 值2: 表达式的值和 值2匹配上了,需要执行的代码; break; case 值3: 表达式的值和 值3匹配上了 ...

  10. Python模块——json

    简介 json全名是JavaScript Object Notation(即:Javascript对象标记).它是JavaScript的子集,JSON是轻量级的文本数据交换格式.前端和后端进行数据交互 ...