leaflet的入门开发
2016年9月27日—1.0leaflet,最快的,最稳定和严谨的leaflet,终于出来了!
leaflet是领先的开源JavaScript库为移动设备设计的互动地图。重33 KB的JS,所有映射大多数开发人员所需要的特性。
leaflet设计简单,性能和可用性。它有效地在所有主要的桌面和移动平台,可以扩展的插件,有一个美丽的,易于使用和证据确凿的API和一个简单的、易读的源代码,是一个快乐作出贡献。
让我们开始一个小实例:准备一个空白页
这里我们创建一个地图在地图的div,添加瓷砖的选择,然后添加一个标记,在弹出一些文本:
地图在编写任何代码之前,您需要做以下页面上制备步骤:
- 包括leaflet CSS文件标题部分的文档:
1
|
<link rel= "stylesheet" href= "https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /> |
(没有这个文件可以去下载,也可以自己引入,以下不再累述),点击下载(稳定版本);
- 包括传单JavaScript文件:
1
|
<script src= "https://unpkg.com/leaflet@1.0.1/dist/leaflet.js" ></script> |
- 放一个div元素与特定的id,你想要你的地图:
1
|
<div id= "mapid" ></div> |
(id名字可以随便设定,但是必须与下面js代码定义个一样。。)
- 确保定义的映射容器有一个高度,例如通过设置CSS(必须定义一个高度,因为无法获取指定的id名,因此这个库并没有进行高度的处理设置,自己必须设置高度,如同div默认是没有高度的一样):
1
|
#mapid { height: 180px; } |
- 现在您已经准备好初始化地图,用它做一些东西。
设置地图
让我们创建一个地图的中心北京某个地点漂亮Mapbox街道瓷砖。首先我们将初始化和设置它的视图映射到我们选择的地理坐标和缩放级别(里面的 mapid 必须和设置的id保持一致):
1
|
var mymap = L.map( 'mapid' ).setView([39.9788, 116.30226], 14); |
在默认情况下(我们没有通过任何选项创建地图实例)时,所有鼠标和触摸交互启用了在地图上,它有放大和归因控制。(这些都可以通过js来控制,目前只是入门,有深入了解的可以自己摸索)
注意setView调用返回地图对象——大多数leaflet方法这样的行为时不返回一个显式的值,它允许方便类jQuery方法控制。
接下来,我们将添加一个砖层来增加我们的地图,在这种情况下这是一个Mapbox街道砖层。创建一个砖层通常涉及瓷砖图像的模板设置URL(在Mapbox得到你),归因的文本和的最大缩放级别层:
1
2
3
4
5
6
|
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地图。
标记,圆圈和多边形
除了砖层,您可以轻松地向地图添加其他东西,包括标志、折线、多边形、圆和弹出窗口。让我们添加一个标记:
1
2
|
L.marker([39.9788, 116.30226]).addTo(mymap) .bindPopup( "北京大厦<br>" ).openPopup(); |
添加一个圆是相同的(除了指定半径米作为第二个参数),但允许您控制看起来如何通过选择在创建对象时作为最后一个参数:
1
2
3
4
5
|
L.circle([39.9908, 116.26625], 500, { color: 'red' , fillColor: '#f03' , fillOpacity: 0.5 }).addTo(mymap).bindPopup( "颐和园欢迎你" ); |
添加一个多边形很简单:
1
2
3
4
5
6
|
L.polygon([ [39.92096, 116.38591], [39.91079, 116.38676], [39.91118, 116.3962], [39.92014, 116.39482] ]).addTo(mymap).bindPopup( "故宫" ); |
弹出窗口时通常使用您想要一些信息附加到地图上的一个特定的对象。传单有非常方便的快捷方式(和上面添加的方式一样,直接添加或者,另行添加,实际是一样的 openPopup是表示默认是否打开):
1
2
3
|
marker.bindPopup( "北京大厦" ).openPopup(); circle.bindPopup( "颐和园" ); polygon.bindPopup(故宫"); |
试着点击我们的对象。bindPopup方法高度与指定的HTML内容弹出你的标记弹出出现当你点击对象,和openPopup方法(标记)立即打开弹出。
您还可以使用弹出窗口层(当你需要更多的东西比附加一个弹出一个对象):
1
2
3
4
|
var popup = L.popup() .setLatLng([51.5, -0.09]) .setContent( "I am a standalone popup." ) .openOn(mymap); |
这里我们用openOn代替遭受因为它处理自动关闭之前打开弹出当打开一个新的良好的可用性。
处理事件
每次发生在leaflet,比如用户点击地图上标记或缩放变化,相应的对象发送一个事件,你可以订阅功能。它允许您对用户交互(这里显示的是每次你点击位置的经纬度):
1
2
3
4
5
|
function onMapClick(e) { alert( "You clicked the map at " + e.latlng); } mymap.on( 'click' , onMapClick); |
每个对象都有自己的一组事件,有关详细信息,请参阅文档。侦听器函数的第一个参数是一个事件对象,它包含有用的信息的事件发生。例如,地图点击事件对象(e在上面的示例中)latlng属性点击出现的位置。
让我们改善我们的例子中,使用一个弹出一个警告:
1
2
3
4
5
6
7
8
9
10
|
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的入门开发的更多相关文章
- leaflet的入门开发(一)
2016年9月27日—1.0leaflet,最快的,最稳定和严谨的leaflet,终于出来了! leaflet是领先的开源JavaScript库为移动设备设计的互动地图.重33 KB的JS,所有映射大 ...
- openlayers4 入门开发系列结合 echarts4 实现统计图(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列结合 echarts4 实现交通线流动图
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- leaflet-webpack 入门开发系列六矢量瓦片(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- leaflet-webpack 入门开发系列五地图卷帘(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- cesium 入门开发系列地图鹰眼功能(附源码下载)
前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 结合 leaflet 实现 ...
- leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- leaflet-webpack 入门开发系列二加载不同在线地图切换显示(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
随机推荐
- 最小费用最大流——ZKW
对于最小费用最大流,我们的通常做法是EK+SPFA. 然而,卡常界大佬ZKW发明了一个求解最小费用最大流的方法,很强啊. 在学ZKW费用流前,先说说KM算法. KM算法 为啥要先提这个呢?因为ZKW费 ...
- BZOJ 1822[JSOI2010]Frozen Nova 冷冻波
网络流+二分. n^3枚举判断每个巫妖可以攻击的精灵,向其连1的边,每个精灵向汇点连1的边. 二分答案,修改源点流向每个巫妖的cap,跑最大流看是否等于精灵数. 恩,看起来没什么毛病. 然后狂WA不止 ...
- 【agc013d】AtCoder Grand Contest 013 D - Piling Up
题意 盒子里有n块砖,每块的颜色可能为蓝色或红色. 执行m次三步操作: 1.从盒子里随便拿走一块砖 2.放入一块蓝砖和红砖到盒子里 3.从盒子里随便拿走一块砖 给定n,m 问拿出来的砖,可能有多少种不 ...
- Commons BeanUtils工具包
简介: BeanUtils工具包是由Apache公司所开发,提供对Java反射和自省API的包装.其主要目的是利用反射机制对JavaBean的属性进行处理. 我们知道,一个JavaBean通常包含了大 ...
- 关于maven 把插件依赖一起打包进jar问题
今天在做storm on maven的时候发现要依赖到storm-hdfs的jar.自己又非常不想把乱七八糟的东西丢上自己的集群lib.于是就想maven 打包的时候把插件一块打包进jar.maven ...
- Leetcode401Binary Watch二进制手表
二进制手表顶部有 4 个 LED 代表小时(0-11),底部的 6 个 LED 代表分钟(0-59). 每个 LED 代表一个 0 或 1,最低位在右侧. 给定一个非负整数 n 代表当前 LED 亮着 ...
- 未加星标 Linux磁盘下查看I/O磁盘的性能
iostat查看linux硬盘IO性能 rrqm/s:每秒进行merge的读操作数目.即delta(rmerge)/s wrqm/s:每秒进行merge的写操作数目.即delta(wmerge)/s ...
- html5绘图工具选择
1. Chart.js 基于html5, 完全开源免费 功能过于简单,只有6种图,能满足小系统需求,使用简便,效果比较炫. http://www.bootcss.com/p/chart.js/ 2. ...
- animation-fill-mode 之 forwards , transition-timing-function的取值 和 transform属性
animation-fill-mode 有四个值可选,并且允许由逗号分隔多个值. none 不改变默认行为. forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义). backw ...
- 超高频率问题之信息: Illegal access: this web application instance has been stopped already. Could not load . The eventual following stack trace is caused by an error thrown for debugging purposes as well as
出现频率非常高,目前还不确定具体是什么原因导致