leaflet 开源js地图工具。非常好用。

leaflet参考：http://leafletjs.com/

特性：

  • 完全开源，可以基于不同的第三方瓦片生成地图。
  • 基于原始GPS，无需转换
  • 可创建离线地图，不依赖网络
  • 使用起来，灵活方便。

调用代码备忘：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>leaflet</title>

    <link href="https://cdn.bootcss.com/leaflet/1.3.1/leaflet.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/leaflet/1.3.1/leaflet.js"></script>

    <style>

    html,body{

        margin:0;

        padding:0;

        width:100%;

        height:100%;

        overflow:hidden;

    }

    </style>

</head>

<body>

<!--地图容器-->

<div style="width:100%;height:100%;font-size:12px" id="map"></div>

<script>

var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];

var layerList = {

    '道路地图':L.layerGroup([

        L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}', {subdomains: subdomains}),

        L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}', {subdomains: subdomains}),

    ]),

    '影像地图':L.layerGroup([

        L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}', {subdomains: subdomains}),

        L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}', {subdomains: subdomains}),

    ]),

    'OpenStreet':L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}),

    "ArcGIS": L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',{

        maxZoom: 18,

        reuseTiles: true

    }),

    "osm": L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'),

    "google_m": L.tileLayer('http://{s}.google.cn/maps/vt?lyrs=m@160000000&hl=zh-CN&gl=CN&src=app&y={y}&x={x}&z={z}&s=Ga',{

        maxZoom: 20,

        subdomains:['mt0','mt1','mt2','mt3']

    }),

    "google_Streets": L.tileLayer('http://{s}.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}',{

        maxZoom: 20,

        subdomains:['mt0','mt1','mt2','mt3']

    }),

    "google_Hybrid": L.tileLayer('http://{s}.google.cn/maps/vt?lyrs=s,h@189&gl=cn&x={x}&y={y}&z={z}',{

        maxZoom: 20,

        subdomains:['mt0','mt1','mt2','mt3']

    }),

    "google_Satellite": L.tileLayer('http://{s}.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}',{

        maxZoom: 20,

        subdomains:['mt0','mt1','mt2','mt3']

    }),

    "google_Terrain": L.tileLayer('http://{s}.google.cn/maps/vt?lyrs=p@189&gl=cn&x={x}&y={y}&z={z}',{

        maxZoom: 20,

        subdomains:['mt0','mt1','mt2','mt3']

    }),

};

var map = L.map("map", {

    center:[34,109],

    zoom: 5,

    layers: layerList['道路地图'],

    zoomControl: true

});

L.control.scale({imperial:false}).addTo(map);

L.control.layers(layerList, null).addTo(map);

L.marker([34.2609052589,108.9423344082]).addTo(map);

var imageUrl = 'http://i2.hexunimg.cn/2016-03-09/182664922.jpg',

    imageBounds = [[34, 108], [33, 109]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);

</script>

</body>

</html>

leaflet 学习备忘的更多相关文章

  1. Android学习备忘笺01Activity

    01.设置视图 在Android Studio新建的项目中,通过 setContentView(R.layout.activity_main);方法将res/layout/activity_main. ...

  2. UML学习备忘

    两大类UML图: 行为图(behavior diagrams)和结构图(structure diagrams)     行为图将引导系统分析员分析且理清"系统该做些什么"?系统分析 ...

  3. Git学习备忘

    本文参考廖雪峰写的精彩的git学习文档,大家可以直接去官网看原版,我这里只是便于自己记录梳理 原版地址:http://www.liaoxuefeng.com/wiki/0013739516305929 ...

  4. MVC4 学习备忘

    WebConfig文件里添加数据库链接字符: <add name="MovieDBContext(可以自己取字符串名字)" connectionString="Da ...

  5. 一滴一点vim(学习+备忘)

    普通模式: h j k l 分别是左下上右方式移动: :w 保存修改 :q 推出 :wq 保存修改并退出 :q! 放弃修改强制推出 x 删除光标所在位置字符 i 在光标所以位置插入字符 删除类命令: ...

  6. xml 基础学习备忘

    <?xml version="1.0" encoding="UTF-8"? standalone="yes"> 这里的encod ...

  7. Oracle存储过程学习备忘

    之前的项目使用存储过程很少,但在实际的项目中,存储过程的使用是必不可少的. 存储过程是一组为了完成特定功能的SQL 语句 集,经编译后存储在数据库中:存储过程创建后,一次编译在程序中可以多次调用,对安 ...

  8. jQuery学习备忘

    jQuery对象转换成DOM对象 var #cr = $("#cr"); //jQuery对象 var cr = $cf[0]; //DOM对象 alert(cr.checked) ...

  9. SQL学习备忘

    1.按照拼音首字母的正序或倒序排序 SELECT CREATOR_REALNAME FROM tableName ORDER BY NLSSORT(CREATOR_REALNAME, 'NLS_SOR ...

随机推荐

  1. HoloLens开发手记-实现3D应用启动器

    一直有人问我,第三方应用在HoloLens上可以实现3D启动图标吗?就像微软官方出的应用那样.在不久之前,这个问题的答案还是No. 但是随着最新的Windows build 1803版本的发布,现在我 ...

  2. ASP.NET三剑客 HttpApplication HttpModule HttpHandler 解析

    我们都知道,ASP.Net运行时环境中处理请求是通过一系列对象来完成的,包含HttpApplication,HttpModule, HttpHandler.之所以将这三个对象称之为ASP.NET三剑客 ...

  3. IE8中marquee不显示出滚动效果的解决办法

    随着各种软件的升级,我们系统中的IE6也渐渐被淘汰了,目前主流的浏览器一半的用户已经从IE6直接升级到了IE8,虽然给用户更好的体验,上网更快更方便了,但是对网站制作来说,又是个比较麻烦的问题,因为很 ...

  4. Android软键盘弹出，覆盖h5页面输入框问题

    之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位 ...

  5. SDOI2017 BZOJ 4820 硬币游戏 解题报告

    写在前面 此题网上存在大量题解,但本人太菜了,看了不下10篇均未看懂,只好自己冷静分析了.本文将严格详细地论述算法(避免一切意会和玄学),因此可能会比其它题解更加理论化一些,希望能对像我一样看了其它题 ...

  6. uoj123 【NOI2013】小Q的修炼

    搞了一下午+半晚上.其实不是很难. 提答题重要的是要发现数据的特殊性质,然后根据不同数据写出不同的算法获得其对应的分数. 首先前两个测试点我们发现可以直接暴搜通过,事实上对于每个数据都暴搜加上一定的次 ...

  7. 【建模+强连通分量】POJ1904 King's Quest

    Description 一个国王有n个王子,同时有n个女孩.每个王子都有自己喜欢的若干个女孩,现给定一个合法的完备匹配(也就是一个王子娶其中一个自己喜欢女孩),求每个王子可以选择哪些女孩可以让剩下的每 ...

  8. BZOJ_1827_[Usaco2010 Mar]gather 奶牛大集会_树形DP

    BZOJ_1827_[Usaco2010 Mar]gather 奶牛大集会_树形DP 题意:Bessie正在计划一年一度的奶牛大集会,来自全国各地的奶牛将来参加这一次集会.当然,她会选择最方便的地点来 ...

  9. BZOJ_2809_[Apio2012]dispatching_可并堆

    BZOJ_2809_[Apio2012]dispatching_可并堆 Description 在一个忍者的帮派里,一些忍者们被选中派遣给顾客,然后依据自己的工作获取报偿.在这个帮派里,有一名忍者被称 ...

  10. docker+mysql+zabix-server环境搭建

    本次使用docker搭建zabbix的组合是mysql+docker+zabix-server 测试环境为:1.操作系统版本为:centos7.5 2.docker版本为:1.13.1 3 mysql ...