为什么选择Leaflet

开源,且代码仅有 31 KB,但它具有开发人员开发在线地图的大部分功能(80%的功能) 是不是比arcgis要小很多呢

官网:http://leafletjs.com/

劣势:国内的资源比较少 想要精通那么多学习英语吧

加载天地图/高德/MapABC

下载实例:https://github.com/htoooth/Leaflet.ChineseTmsProviders

在项目中加入leaflet.ChineseTmsProviders.js文件

这里注意,该文件中包含了三个地图,如果你仅用了天地图,那么可以把另外两个地图去掉精简代码,虽然只是少了很小一部分,我们用Leaflet的目的不就是为了精简代码吗

下面是天地图的示例:        ↓↓↓↓↓↓↓↓↓↓↓↓

<script type="text/javascript">
//地图
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 baseLayers = {
"地图":normal,
"影像":image,
} var overlayLayers = { //你可以叠加其他的图层 } var map = L.map("map",{
center:[31.59, 120.29],
zoom:12,
layers:[normal],
zoomControl:false
}); L.control.layers(baseLayers,overlayLayers).addTo(map);
L.control.zoom({zoomInTitle:'放大', zoomOutTitle:'缩小'}).addTo(map);
</script>

Leaflet的几个Control

放大缩小:

L.control.zoom({ zoomInTitle: '放大', zoomOutTitle: '缩小', position: 'topright' }).addTo(map);

切换地图:

var baseLayers = {
"地图": normal,
"影像": image,
} var overlayLayers = {
"公司": companylayer,
"景区": spotlayer,
} L.control.layers(baseLayers, overlayLayers).addTo(map);

比例尺:

L.control.scale().addTo(map);  //比例尺

地图注释:

L.control.attribution({ position: 'bottomleft', prefix: 'myMap' }).addTo(map); 

简单的Events

地图点击事件(单击/双击)

你可以把他们分开来写

map.on('click', showMapPosition);    //点击地图
map.on('dblclick',addPoint); //双击地图 //map.off(....) 关闭该事件 function showMapPosition(e)
{
alert(e.latlng);
} function addPoint(e)
{
var marker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map);
}

也可以放在一起

map.on('click', function(e) {
alert(e.latlng);
});

转载请注明原地址:http://i.cnblogs.com/EditPosts.aspx?postid=4919987

Leaflet学习笔记-基础内容的更多相关文章

  1. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  2. 数论算法 剩余系相关 学习笔记 (基础回顾,(ex)CRT,(ex)lucas,(ex)BSGS,原根与指标入门,高次剩余,Miller_Rabin+Pollard_Rho)

    注:转载本文须标明出处. 原文链接https://www.cnblogs.com/zhouzhendong/p/Number-theory.html 数论算法 剩余系相关 学习笔记 (基础回顾,(ex ...

  3. Python学习笔记基础篇——总览

    Python初识与简介[开篇] Python学习笔记——基础篇[第一周]——变量与赋值.用户交互.条件判断.循环控制.数据类型.文本操作 Python学习笔记——基础篇[第二周]——解释器.字符串.列 ...

  4. 《python基础教程(第二版)》学习笔记 基础部分(第1章)

    <python基础教程(第二版)>学习笔记 基础部分(第1章)python常用的IDE:Windows: IDLE(gui), Eclipse+PyDev; Python(command ...

  5. Python学习笔记——基础篇【第六周】——面向对象

    Python之路,Day6 - 面向对象学习 本节内容:   面向对象编程介绍 为什么要用面向对象进行开发? 面向对象的特性:封装.继承.多态 类.方法.       同时可参考链接: http:// ...

  6. Java学习笔记——基础篇

    Tips1:eclipse中会经常用到System.out.println方法,可以先输入syso,然后eclipse就会自动联想出这个语句了!! 学习笔记: *包.权限控制 1.包(package) ...

  7. Arduino—学习笔记—基础语法

    图解 函数具体讲解 pinMode(工作接脚,模式) 工作接脚 工作接脚编号(0--13与A0--A5) 模式 工作模式:INPUT或OUTPUT 例子 将8接口设置为输出模式 pinMode(8,O ...

  8. python学习之基础内容

    python基础内容① 什么是python? -一种计算机语言,计算机语言分为 -高级语言:python.java.Ruby.C#.C++...... -基础语言:C语言.汇编 -计算机可以直接执行基 ...

  9. iOS学习笔记——基础控件(上)

    本篇简单罗列一下一些常用的UI控件以及它们特有的属性,事件等等.由于是笔记,相比起来不会太详细 UIView 所有UI控件都继承于这个UIView,它所拥有的属性必是所有控件都拥有,这些属性都是控件最 ...

随机推荐

  1. centos 7 修改主机名称

    hostnamectl --static set-hostname <host-name> 参考资料 http://www.centoscn.com/CentOS/config/2014/ ...

  2. ubuntu上如何安装和卸载google chrome 浏览器

    切换到安装文件目录 $ sudo dpkg -i file_name.deb 如果有错误,请运行以下命令 $ sudo apt-get -f install or $ sudo apt-get ins ...

  3. ccmenu里的位置

    ccmenu里的位置 ccctableviewcell内的元素不需要设置高度 调整buyitem内的元素的位置,可以通过一个item来调整. ccctableview.ccctableviewcell ...

  4. 【转】三次握手与accept()函数

    1. 客户端发送SYN给服务器 2. 服务器发送SYN+ACK给客户端 3. 客户端发送ACK给服务器 4. 连接建立,调用accept()函数获取连接

  5. Java基础知识强化之集合框架笔记74:各种集合常见功能 和 遍历方式总结

    1. Collection add() remove() contains() iterator() size() 遍历: 增强for 迭代器 |--List get() 遍历: 普通for |--S ...

  6. bootstrap系列整理

    去年的九月份做第一版文档站时, 就开始尝试使用bootstrap ,由于当时对node 还一知半解,大部分精力放在nodejs上,bootstrap只是拿来就用,起步文档都没看: 当别人提到 Norm ...

  7. 开源安全测试 - BackTrack的应用

    开源安全测试 - BackTrack的应用: http://gdtesting.com/product.php?id=99  

  8. GCC安装

    1.apt-get install gcc2.apt-get install make3.apt-get install gdb apt-get install build-essential  这个 ...

  9. keystone系列二:keystone源码分析

    六 keystone架构 6.1 Keystone API Keystone API与Openstack其他服务的API类似,也是基于ReSTFul HTTP实现的. Keystone API划分为A ...

  10. 通过js实时检测文本框内容

    思路 1,在获取文本框焦点后,启动定时器,每隔100毫秒来查看文本内容的改变 2,在文本框失去焦点后,清除定时器 下面是一个简单的例子 <!DOCTYPE html> <html&g ...