leaflet的开发入门教程

Leaflet简述

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

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

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

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

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

这里我们创建一个地图在地图的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; }

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

设置地图

让我们创建一个地图的中心北京某个地点漂亮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地图。

标记,圆圈和多边形

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

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的开发入门教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • leaflet的开发入门教程

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

  • 网页游戏开发入门教程三(简单程序应用)

    网页游戏开发入门教程二(游戏模式+系统)http://www.jb51.net/article/20724.htm 一.选择开发语言 后台:java .net php 前台:flex javascript ajax 数据库:mysql mssql 用哪种组合,真的不重要.重要的是时间和成本.复杂的地方在数据的交互和完善,而不在技术或效果的实现.往往遇到一些问题.比如地图如何编?人物移动如何实现?其实这些问题从技术上实现都比较容易.难在实现后,数据如何交互.没有解决数据交互的问题,实现这些技术点的

  • 微信公众平台开发入门教程(图文详解)

    在这篇入门教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯及XML语言基础.如果你还没有,那么请先学习相关知识. 我们将使用微信公众账号方倍工作室(账号:pondbaystudio,二维码在最底部)作为讲解的例子. 这篇入门教程将引导你完成如下任务: 创建百度云平台应用启用微信公众平台开发模式获取订阅.文字.图片.语音.视频消息回复文本.图文及音乐消息程序开发 创建百度云应用 申请账号 登录http://developer.baidu.com/bae ,使用邮箱或者手机

  • joomla组件开发入门教程

    本文讲述了joomla组件开发知识点.分享给大家供大家参考,具体如下: 在你进行编码之前,有一些文件和文件夹需要创建和一些查询语句需要运行.你不但可以创建组件而且不用额外的配置就可以尝试不同的特性.你也可以看到Joomla!组织和访问组件方法的概况.最后,你会像其它组件一样加入工具栏. Joomla!组件的结构 Joomla!的所有组件都遵守指定的命名约定.每个系统组件都有唯一的名字,名字不要包括空格.代码分成两个文件夹,文件夹以com_开头,紧接着就是组件的名字.因此,你要创建两个相同名字的c

  • 一看就懂的Android APP开发入门教程

    工作中有做过手机App项目,前端和android或ios程序员配合完成整个项目的开发,开发过程中与ios程序配合基本没什么问题,而android各种机子和rom的问题很多,这也让我产生了学习android和ios程序开发的兴趣.于是凌晨一点睡不着写了第一个android程序HelloAndroid,po出来分享给其他也想学习android开发的朋友,这么傻瓜的Android开发入门文章,有一点开发基础的应该都能看懂. 一.准备工作 主要以我自己的开发环境为例,下载安装JDK和Android SD

  • 微信公众平台开发入门教程(SAE方倍工作室)

    我们将使用微信公众账号方倍工作室作为讲解的例子,二维码见底部. 本系列教程将引导你完成如下任务: 创建新浪云计算平台应用启用微信公众平台开发模式基础接口消息及事件微信公众平台PHP SDK微信公众平台开发模式原理开发天气预报功能 第一章 申请服务器资源 创建新浪云计算应用 申请账号 我们使用SAE新浪云计算平台作为服务器资源,并且申请PHP环境+MySQL数据库作为程序运行环境.申请地址:http://sae.sina.com.cn/ ,使用新浪微博账号可以直接登录SAE,登录后SAE将赠送50

  • PHP开发入门教程之面向对象

    PHP是弱变量的脚本语言,也就是说你无需先定义,这一点很灵活.也可以给予很大的自由度,但对于程序来说,自由并非好事. 因为给予后期维护人员阅读带来很大的麻烦. 下面来进入我们第一个程序: 1.php ////////////////////<?class helloWorld{ var $hellow_str = "Hello World!"; function helloWorld(){ echo $this->hellow_str; }}$p = new helloWo

  • PHP扩展开发入门教程

    PHP扩展开发 我准备在此系列博文中总结我有关PHP扩展开发的学习和感悟,力图简单清晰地描述在Linux系统下开发一个PHP扩展应该具备的最基本知识.水平较低,难免有错误,望指出. 准备工作 首先要获取一份PHP源码(可以从Github上签出,或者到官网上下载最新的稳定版),然后编译之.为了加快编译速度,我们推荐禁用所有额外的扩展(使用--disable-all选项),但最好打开debug(使用--enable-debug选项)和线程安全(使用--enable-maintainer-zts),但

  • Kotlin 和 Java 混合开发入门教程

    目录 一.前沿 二.学习 Kotlin 前准备 三.Kotlin 语法简介 优秀的表达式 加强版 switch 模板字符串 空指针异常不存在了 编写单例类 扩展方法 运算符重载 四.Kotlin 与 Java 混合开发 五.Kotlin 与 Java 总结 一.前沿 如果你学习过其他的编程语言,你就会发现 Java 的语法很是哆嗦,可是我们为什么没有放弃 Java 这门编程语言呢?因为 JVM 是一个非常好的平台,而且 Java 程序员目前在中国所占的比重实在是太高了.这是历史包袱导致的.暂且不

  • 网页游戏开发入门教程二(游戏模式+系统)

    一.游戏模式目前webgame游戏模式大体上可以分为以下四类:1.玩家拥有一个城市,不断的升级城市内建筑,建筑可以自动获得物资,可以生产军队,军队之间进行对比数值的战斗.这里我简单的称为Ogame模式. 比较优秀的代表:战神世界II,Travian,Ogame,武林三国,纵横天下,领主online,乱舞春秋,热血三国,方便面三国等等.这是一个比较成熟的模式, 但正因为成熟.因此,玩家接触到这类游戏比较的多,除非你能超过这些优秀的代表,否则就只是简单的重复开发. 对玩家来说:优点:Ogame模式模

随机推荐