Leaflet介绍
来源:互联网 发布:深圳cnc数控编程培训 编辑:程序博客网 时间:2024/05/16 17:30
一个用于适用于移动端交互地图的开源JavaScript库
简介
Leaflet是用于适用于移动端交互地图的主要的开源JavaScript库。JS库的大小为38k左右,但是拥有大部分开发者需要的全部地图功能。
Leaflet保持着简单、性能和实用性的设计思想。它可以在所有主要的桌面和移动端平台上高效的运转,可以扩展插件,它有一个漂亮的、易用的和文档清晰的API,还有一个简单、易读的源代码。
简单实例
首先我们在HTML文件中创建一个’map’的<div>
,加上我们选择的地图图块,然后在弹出窗口添加一些带有文本的的标记。
var map = L.map('map').setView([51.505, -0.09], 13);L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);L.marker([51.5, -0.09]).addTo(map) .bindPopup('A pretty CSS3 popup.<br> Easily customizable.') .openPopup();
快速开始
通过一步一步的引导,快速的从Leaflet基础开始,包括设置一个Leaflet地图,并配合一些标记、折线、弹窗和处理事件。
1.准备HTML页面
1.1.在head区域引入Leaflet CSS文件
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
1.2.在CSS引入后引入Leaflet JavaScript文件
<!-- Make sure you put this AFTER Leaflet's CSS --><script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
1.3.在地图的位置设置一个带有确定id的<div>
元素
<div id="mapid"></div>
1.4.确定地图区域有一个明确的高度,可以通过CSS来定义
#mapid { height: 180px; }
2.设置地图
* 一个用漂亮的Mapbox Streets的地图图块创建的伦敦中心的地图,首先需要初始化地图,并且设置视图用选择的地理坐标和缩放级别。
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
2.1.默认情况下,地图上的所有鼠标和触摸的交互控件都是激活,可行的,并且有缩放和属性控件。
注意:setView方法可以返回地图对象——大部分的Leaflet方法不返回明确的数值时就想这样,允许类似于jQuery的方便的方法链。
2.2.下一步,在地图上添加一个图块层,此处它是一个Mapbox Streets的图块层。创建一个图块层通常需要涉及到为图块层设置URL模板,图块层的属性文本和缩放的最大级别。此案例中,运用Mapbox中的经典地图的 mapbox.streets 图块(为了从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: 'mapbox.streets', accessToken: 'your.mapbox.access.token'}).addTo(mymap);
2.3值得注意的是,Leaflet是独立提供的,这就意味着它不会执行提供者为地图图块的特定选择。可以试图用mapbox.satellite代替mapbox.streets,并且观察发生什么。并且,Leaflet甚至不包含一个提供者特定的代码行,所以如果需要,可以自由使用其他提供者的代码。
3.标记、画圆和多边形
3.1.除了图层之外,还可以简单的在地图上添加其他的元素,包括标记、折线、多边形、圆和弹窗。例如我们添加标记:
var marker = L.marker([51.5, -0.09]).addTo(mymap);
3.2.添加一个圆也是类似方法(除了第二个参数为半径设置特定的单位),当创建对象时通过传递最后一个参数,可以控制它的外观。
var circle = L.circle([51.508, -0.11], { color: 'red', fillColor: '#f03', fillOpacity: 0.5, radius: 500}).addTo(mymap);
3.3.添加多边形也是类似,比较简单易行。
var polygon = L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047]]).addTo(mymap);
4.使用弹窗(popups)
4.1.当想在地图上,通过运用popups在某个特定对象上附加一些信息。Leaflet有一个顺便的捷径。
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();circle.bindPopup("I am a circle.");polygon.bindPopup("I am a polygon.");
4.2.尝试点击对象,绑定的popup方法在标记marker上附带一个有特定HTML内容的弹窗popup。所以当点击对象时,这个弹窗popup会出现,并且openPopup 方法(仅适用于标记markers)就会立即打开这个附加的弹窗popup。
4.3.设置弹窗popups 作为图层
var popup = L.popup() .setLatLng([51.5, -0.09]) .setContent("I am a standalone popup.") .openOn(mymap);
这里,运用openOn 方法而不是addTo 方法时,是因为当打开一个新的popup时,它会自动关闭一个之前打开的popup,这是一个非常好的可用性。
5.事件处理
5.1.每当Leaflet上发生一些事情时,例如用户点击marker 或者地图缩放改变时,相应的对象会发送一个事件,可以通过一个函数来订阅事件,允许对用户的交互做出反应。
function onMapClick(e) { alert("You clicked the map at " + e.latlng);}mymap.on('click', onMapClick);
5.2.任一对象拥有自己的一组事件,监听器函数的第一个参数是一个事件对象——它包含有关事件发生时的有用信息。例如,地图点击事件对象有一个经纬度的属性,该属性是发生点击时的位置。
例:通过popup而不是alert来改进我们的事例
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介绍
- esri-leaflet入门教程(1)-leaflet介绍
- esri-leaflet入门教程(1)-leaflet介绍
- esri-leaflet入门教程(1)-leaflet介绍
- esri-leaflet入门教程(1)-leaflet介绍
- esri-leaflet入门教程(1)-leaflet介绍
- Leaflet使用介绍
- esri-leaflet入门教程(1)-esri leaflet介绍
- leaflet
- 开源GIS介绍(openlayer,leaflet,mapbox,cesium)
- [leaflet] esri-leaflet(一):初识leaflet
- leaflet circle
- Leaflet API
- Leaflet API 翻译
- Leaflet API 翻译(上)
- Leaflet API 翻译(一)
- Leaflet API 翻译(二)
- D3 + Leaflet入门
- 带有ListView的Dialog
- Java为什么匿名内部类参数引用需要用final进行修饰?
- 第十二周
- 从我的第三份工作开始,认真的钻研技术
- MVC设计模式
- Leaflet介绍
- 初始化SpringBoot的四种方法
- Java单例模式1.0
- 1120(toj)
- TensorFlow学习笔记2:基本运算
- CSS样式规则语法
- [JSP]javabeans/与JavaBean相关的动作元素
- Java的继承
- python3解决解压zip文件是文件名乱码问题