leaflet 学习备忘

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

特性：

完全开源，可以基于不同的第三方瓦片生成地图。
基于原始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 学习备忘的更多相关文章

Android学习备忘笺01Activity
01.设置视图在Android Studio新建的项目中,通过 setContentView(R.layout.activity_main);方法将res/layout/activity_main. ...
UML学习备忘
两大类UML图: 行为图(behavior diagrams)和结构图(structure diagrams) 行为图将引导系统分析员分析且理清"系统该做些什么"?系统分析 ...
Git学习备忘
本文参考廖雪峰写的精彩的git学习文档,大家可以直接去官网看原版,我这里只是便于自己记录梳理原版地址:http://www.liaoxuefeng.com/wiki/0013739516305929 ...
MVC4 学习备忘
WebConfig文件里添加数据库链接字符: <add name="MovieDBContext(可以自己取字符串名字)" connectionString="Da ...
一滴一点vim(学习+备忘)
普通模式: h j k l 分别是左下上右方式移动: :w 保存修改 :q 推出 :wq 保存修改并退出 :q! 放弃修改强制推出 x 删除光标所在位置字符 i 在光标所以位置插入字符删除类命令: ...
xml 基础学习备忘
<?xml version="1.0" encoding="UTF-8"? standalone="yes"> 这里的encod ...
Oracle存储过程学习备忘
之前的项目使用存储过程很少,但在实际的项目中,存储过程的使用是必不可少的. 存储过程是一组为了完成特定功能的SQL 语句集,经编译后存储在数据库中:存储过程创建后,一次编译在程序中可以多次调用,对安 ...
jQuery学习备忘
jQuery对象转换成DOM对象 var #cr = $("#cr"); //jQuery对象 var cr = $cf[0]; //DOM对象 alert(cr.checked) ...
SQL学习备忘
1.按照拼音首字母的正序或倒序排序 SELECT CREATOR_REALNAME FROM tableName ORDER BY NLSSORT(CREATOR_REALNAME, 'NLS_SOR ...

随机推荐

Reactor模式的.net版本简单实现--DEMO
近期在学习DotNetty,遇到不少的问题.由于dotnetty是次netty的.net版本的实现.导致在网上叙述dotnetty的原理,以及实现技巧方面的东西较少,这还是十分恼人的.在此建议学习和使 ...
微信公众号开发包括服务器配置、java web项目搭建、tomcat手动发布web项目、微信开发所需的url和token验证 2017.12.2
https://www.cnblogs.com/klmei/p/7060879.html 基础配置很全面
JS中的常量
javascript中没有常量,可以通过创建只能取值不能赋值的私有变量来模仿常量. 创建取值器: var Class = function(){ var NUM = 5; // 在运行时NUM值 ...
你不知道的JavaScript--Item12 undefined 与 null
当讨论JavaScript中的原始数据类型时,大多数人都知道从String.Number到Boolean的基本知识.这些原始类型相当简单,行为符合常识.但是,本文将更多关注独特的原始数据类型Null和 ...
大话RabbitMQ 基础入门
----------写在前面---------- 近些年微服务越来越火,让我也忍不住想去一窥微服务究竟,讲到微服务,就离不开分布式,而分布式,也离不开消息队列,在消息队列中,RabbitMQ可以说是比 ...
Firefox Profile
win7环境下打开Firefox,跳出提示信息 "无法加载你的firefox配置文件它可能已经丢失或无法访问" 解决方法: 1.按下WIN+R 调出运行,然后输入: firefo ...
Hadoop问题：DataNode进程不见了
DataNode进程不见了问题描述最近配置Hadoop的时候出现了这么一个现象,启动之后,使用jps命令之后是这样的: 看不到DataNode进程,但是能够正常的工作,是不是很神奇啊? 在一番 ...
【BZOJ 3569】 DZY Loves Chinese II
题目连接: 传送门题解: 先%一发大佬的题解. 考虑一个图,删除一些边以后不连通的条件为,某个联通块与外界所有连边都被删掉,而不只是生成树中一个树边与所以覆盖它的非树边(很容易举出反例). 那么考虑 ...
BZOJ_1345_[Baltic2007]序列问题Sequence_单调栈
BZOJ_1345_[Baltic2007]序列问题Sequence_单调栈 Description 对于一个给定的序列a1,…,an,我们对它进行一个操作reduce(i),该操作将数列中的元素ai ...
BZOJ_1717_[Usaco2006 Dec]Milk Patterns 产奶的模式_后缀数组
BZOJ_1717_[Usaco2006 Dec]Milk Patterns 产奶的模式_后缀数组 Description 农夫John发现他的奶牛产奶的质量一直在变动.经过细致的调查,他发现:虽然他 ...

leaflet 学习备忘

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

随机推荐

热门专题