Leaflet学习笔记(一)
一.简介
Leaflet是一个主要适用于移动端交互地图的领先的开源javascript库。虽然js库只有38KB左右,但是却能满足大部分开发者的所有功能需求。
Leaflet拥有着简单,高效和实用的设计思想。它可以在所有主要的桌面和移动端平台上高效的运转,可以扩展插件,它有一个漂亮的、易用的和文档清晰的API,还有一个简单、易读的源代码。
二.入门实例展示
该图展示了我们选择的地图图层(tiles),以及初始化了基本的标记和弹窗。
三.快速开始
1.准备一个空白的html界面。
在head引入css样式文件。
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
引入js文件,确保js文件在css文件之后引入。
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
2.创建一个div元素并声明id,此时必须有一个明确的宽度,否则默认为0.
<div id="mapid" style="width:600px;height:400px;"></div>
3.设置地图
一个用漂亮的Mapbox Streets的地图图块创建的伦敦中心的地图,首先需要初始化地图,并且设置视图用选择的地理坐标和缩放级别。
var mymap = L.map('mapid').setView([51.505, -0.09], 13); //(地理坐标,缩放等级)
默认情况下,地图上所有的鼠标和触摸的交互控件都是激活的。
注意:setView方法可以一个地图对象,并且大部分的Leaflet方法在不返回明确的数值是都是返回一个对象。
在地图上添加一个图层,此时是一个Mapbox Streets的图层。创建一个图层通常需要涉及到为图层设置URL模板,图层的属性文本和缩放的最大级别。在当前例子下,运用Mapbox中的经典地图的 mapbox.streets 图块(为了从Mapbox中运用图块,必须请求token)。
//titleLayer是指基础图层的元素
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18, //最大放大倍数
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets', //地图类型,不强制选择图层的提供方,可替换mapbox.satellite等
}).addTo(mymap);
4.添加其他元素(标记marker、圆圈circle和多边形polygon等)
除了添加图层之外,例子上还有标记、圆圈和多边形。
例如,创建一个标记:
var marker = L.marker([51.5, -0.09]).addTo(mymap); //初始化添加一个标记
或者添加一个圆圈:
var circle = L.circle([51.5, -0.05], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(mymap); //初始化一个边框red,内部背景颜色#f03,透明度0.5,半径为500的圆圈范围
或者添加一个多边形:
var polygon = L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047]]).addTo(mymap); //初始化一个多边形,自定义样式如circle
也可以显示一些弹窗提示:
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup(); //openPopup()初始化界面时触发
circle.bindPopup("I am a circle."); //点击触发
polygon.bindPopup("I am a polygon.");
或者初始化显示弹窗是可以这么写:
//这里我们使用openOn而不是addTo是因为当开启一个新的气泡点时将自动关闭上一个打开的气泡点,这样提高了使用性
var popup = L.popup() .setLatLng([51.5, -0.09]) .setContent("I am a standalone popup.") .openOn(mymap);
5.简单的触发事件
该方法展示了点击可触发一个弹窗,并显示该点的坐标。
var popup = L.popup(); //声明(初始化)一个弹窗
function onMapClick(e) {
console.log(e.latlng)
popup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(mymap); //点击时通过e.latlng显示该点坐标
}
mymap.on('click', onMapClick); //点击时触发onMapClick事件
以上就是简单的Leaflet地图显示案例的基本属性使用以及说明。
Leaflet学习笔记(一)的更多相关文章
- Leaflet学习笔记-基础内容
为什么选择Leaflet 开源,且代码仅有 31 KB,但它具有开发人员开发在线地图的大部分功能(80%的功能) 是不是比arcgis要小很多呢 官网:http://leafletjs.com/ 劣势 ...
- Leaflet学习笔记-Leaflet.awesome-markers
基础篇传送门 http://www.cnblogs.com/CoffeeEddy/p/4919987.html 效果图 是不是感觉很美观啊 为什么选择awesome 地图上面需要各种各样的Mark,难 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
随机推荐
- 怎样注冊 diskgroup 到集群
之前使用 renamedg 对 ora.CRS.dg 进行重命名ora.DUPCRS.dg 可是 renamedg 有个缺点就是无法将改动的信息同步到整个集群层面,并且改动前的dg 会依旧保留在集群 ...
- linux内核模块笔记
主题: 1. 嵌入式基础知识 2. linux内核介绍 3. 内核的编译和安装(x86) 4. 第一个模块 5. 模块的相关工具 6. 模块的符号导出 7. 模块的參数 1.看linux/module ...
- Leetcode_num1_Single Number
好久没有做题啦.从今天開始刷Leetcode的题.希望坚持的时间能长一点. 先从ac率最高的Single Number開始吧. 题目: Given an array of integers, ever ...
- ECMAScript 6新特性之Proxy
ECMAScript 6中新增了一个全局构造函数:Proxy.该构造函数能够接收两个參数:一个目标对象.一个处理对象. 代码演示样例: var target = {}; var handler = { ...
- vargrind 安卓apk
上层为安卓, 下层为调用c/c++ 库 1.将vargind 按官网方法下载源代码编译 得Inst文件夹 2.通过win 下安卓sdk 中 platform-tools 中的adb push Ins ...
- 对苹果“五仁”编程语言Swift的简单分析
对苹果"五仁"编程语言Swift的简单分析 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUHJvdGVhcw==/font/5a6L5 ...
- C++_关于const 的全面总结
C++中的constkeyword的使用方法很灵活.而使用const将大大改善程序的健壮性.本人依据各方面查到的资料进行总结例如以下,期望对朋友们有所帮助. Const 是C++中经常使用的类型修饰符 ...
- CCFlow的excel数据源导入Dtl明细表的操作方法以及模版demo
CCBPM支持通过excel向Dtl明细表(从表)导入数据. 以下,我们以cc的財务报销单demo流程解说详细的操作步骤和模版设计. 导入的操纵步骤: 1.流程发起后,在開始节点导入数据源,点击明细表 ...
- android官网被封掉了,仅仅好用这个站点进谷歌了!嘎嘎
http://developer.android.com/sdk/index.html 这个能够进去.可是必须是搜狐 .360,uc都不用特意FQ http://173.1 ...
- js中callback执行
<!DOCTYPE HTML> <html> <head> <meta charset="GBK" /> <title> ...