leaflet的开发入门教程


Posted in Javascript onNovember 17, 2016

Leaflet简述

Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的、开源的 JavaScript 库。代码仅有 33 KB,但它具有开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的哲学思想,在所有主要桌面和移动平台能高效运作,在现代浏览器上会利用HTML5和CSS3的优势,同时也支持旧的浏览器访问。支持插件扩展,有一个友好、易于使用的API文档和一个简单的、可读的源代码。Leaflet强大的开源库插件涉及到地图应用的各个方面包括地图服务,数据提供,数据格式,地理编码,路线和路线搜索,地图控件和交互等类型的插件共有140多个。

2016年9月27日—1.0leaflet,最快的,最稳定和严谨的leaflet,终于出来了!

leaflet是领先的开源JavaScript库为移动设备设计的互动地图。重33 KB的JS,所有映射大多数开发人员所需要的特性。

leaflet设计简单,性能和可用性。它有效地在所有主要的桌面和移动平台,可以扩展的插件,有一个美丽的,易于使用和证据确凿的API和一个简单的、易读的源代码,是一个快乐作出贡献。

leaflet的开发入门教程

让我们开始一个小实例:准备一个空白页

这里我们创建一个地图在地图的div,添加瓷砖的选择,然后添加一个标记,在弹出一些文本:

 地图在编写任何代码之前,您需要做以下页面上制备步骤:

包括leaflet CSS文件标题部分的文档:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />

(没有这个文件可以去下载,也可以自己引入,以下不再累述),点击下载(稳定版本);

包括传单JavaScript文件:

<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

放一个div元素与特定的id,你想要你的地图:

<div id="mapid"></div>
(id名字可以随便设定,但是必须与下面js代码定义个一样。。)

确保定义的映射容器有一个高度,例如通过设置CSS(必须定义一个高度,因为无法获取指定的id名,因此这个库并没有进行高度的处理设置,自己必须设置高度,如同div默认是没有高度的一样):

#mapid { height: 180px; }

现在您已经准备好初始化地图,用它做一些东西。

设置地图

leaflet的开发入门教程

让我们创建一个地图的中心北京某个地点漂亮Mapbox街道瓷砖。首先我们将初始化和设置它的视图映射到我们选择的地理坐标和缩放级别(里面的  mapid  必须和设置的id保持一致):

var mymap = L.map('mapid').setView([39.9788, 116.30226], 14);

在默认情况下(我们没有通过任何选项创建地图实例)时,所有鼠标和触摸交互启用了在地图上,它有放大和归因控制。(这些都可以通过js来控制,目前只是入门,有深入了解的可以自己摸索)

注意setView调用返回地图对象——大多数leaflet方法这样的行为时不返回一个显式的值,它允许方便类jQuery方法控制。

接下来,我们将添加一个砖层来增加我们的地图,在这种情况下这是一个Mapbox街道砖层。创建一个砖层通常涉及瓷砖图像的模板设置URL(在Mapbox得到你),归因的文本和的最大缩放级别层:

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
 attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
 maxZoom: 18,
 id: 'your.mapbox.project.id',
 accessToken: 'your.mapbox.public.access.token'
}).addTo(mymap);

确保所有的代码称为div和传单。js包含。就是这样!现在你有一个工作leaflet地图。

标记,圆圈和多边形

leaflet的开发入门教程

除了砖层,您可以轻松地向地图添加其他东西,包括标志、折线、多边形、圆和弹出窗口。让我们添加一个标记:

L.marker([39.9788, 116.30226]).addTo(mymap)
 .bindPopup("北京大厦<br>").openPopup();

添加一个圆是相同的(除了指定半径米作为第二个参数),但允许您控制看起来如何通过选择在创建对象时作为最后一个参数:

L.circle([39.9908, 116.26625], 500, {
 color: 'red',
 fillColor: '#f03',
 fillOpacity: 0.5
}).addTo(mymap).bindPopup("颐和园欢迎你");

添加一个多边形很简单:

L.polygon([
 [39.92096, 116.38591],
 [39.91079, 116.38676],
 [39.91118, 116.3962],
 [39.92014, 116.39482]
]).addTo(mymap).bindPopup("故宫"); 

弹出窗口时通常使用您想要一些信息附加到地图上的一个特定的对象。传单有非常方便的快捷方式(和上面添加的方式一样,直接添加或者,另行添加,实际是一样的  openPopup是表示默认是否打开):

marker.bindPopup("北京大厦").openPopup();
circle.bindPopup("颐和园");
polygon.bindPopup(故宫");

 试着点击我们的对象。bindPopup方法高度与指定的HTML内容弹出你的标记弹出出现当你点击对象,和openPopup方法(标记)立即打开弹出。

   您还可以使用弹出窗口层(当你需要更多的东西比附加一个弹出一个对象):

var popup = L.popup()
 .setLatLng([51.5, -0.09])
 .setContent("I am a standalone popup.")
 .openOn(mymap);

这里我们用openOn代替遭受因为它处理自动关闭之前打开弹出当打开一个新的良好的可用性。

处理事件

每次发生在leaflet,比如用户点击地图上标记或缩放变化,相应的对象发送一个事件,你可以订阅功能。它允许您对用户交互(这里显示的是每次你点击位置的经纬度):

function onMapClick(e) {
 alert("You clicked the map at " + e.latlng);
}
 mymap.on('click', onMapClick);

每个对象都有自己的一组事件,有关详细信息,请参阅文档。侦听器函数的第一个参数是一个事件对象,它包含有用的信息的事件发生。例如,地图点击事件对象(e在上面的示例中)latlng属性点击出现的位置。

让我们改善我们的例子中,使用一个弹出一个警告:

var popup = L.popup();
function onMapClick(e) {
 popup
  .setLatLng(e.latlng)
  .setContent("You clicked the map at " + e.latlng.toString())
  .openOn(mymap);
}
mymap.on('click', onMapClick);

以上所述是小编给大家介绍的leaflet的开发入门教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
Vue中的异步组件函数实现代码
Jul 20 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 #Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 #Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 #Javascript
jQuery 插件封装的方法
Nov 16 #Javascript
Node.js 数据加密传输浅析
Nov 16 #Javascript
JS中substring与substr的用法
Nov 16 #Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 #Javascript
You might like
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
flash用php连接数据库的代码
2011/04/21 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
JSON格式化输出
2014/11/10 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
python format 格式化输出方法
2018/07/16 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
介绍一下write命令
2014/08/10 面试题
小学教师岗位职责
2013/11/25 职场文书
运动会稿件300字
2014/02/14 职场文书
电工工作职责范本
2014/02/22 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
推广普通话主题班会
2015/08/17 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
Python OpenCV实现图像模板匹配详解
2022/04/07 Python