Leaflet介绍_秋成的博客-程序员宅基地_leaflet

技术标签: Leaflet  翻译  移动端地图  javascript  

一个用于适用于移动端交互地图的开源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: '&copy; <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/[email protected]/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 &copy; <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的基础知识,下面展示一个基本的完整示例。
这里写图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u012832088/article/details/78635832

智能推荐

xLog日志文件写入改成24小时制_爱水的云的博客-程序员宅基地

xLog进行日志文件存储的时候初始化简单,操作方便,最近项目中正在使用,由于日志默认是12小时制,导致在跟踪问题的时候无法区分上午和下午,需要进行时间时间格式修改,需要在文件打印处如下配置就可进行二十四小时的配置,分享一下:

动态不确定性时空图建模系列(四): AGCRN_当交通遇上机器学习的博客-程序员宅基地

1、文章信息《Adaptive Graph Convolutional Recurrent Network for Traffic Forecasting》。这是新南威尔士大学发表在计算...

计算机操作系统实验指导 (第3版) 第四篇 操作系统学习指导和习题解析 第18章:进程同步与通信 习题和答案_CodeJiao的博客-程序员宅基地

计算机操作系统实验指导 (第3版) 第四篇 操作系统学习指导和习题解析 第18章:进程同步与通信 习题和答案

分布式事务 Paxos协议CAP原理BASE原理_快乐_生活的博客-程序员宅基地

分布式事务底层原理剖析https://mp.weixin.qq.com/s/3Q61VwndSJpSZvnAirPaSg2p 3p CAP定理http://www.cnblogs.com/congsg2016/p/5400958.html分布式一致性算法Paxos介绍https://segmentfault.com/a/1190000005717

AtCoder Beginner Contest 181 A-F题解_咕咕咕ggggg的博客-程序员宅基地

我虚拟参加了一下Atcoder新人练习赛181的比赛,比赛中做出了前五题,排170名左右,最后一题没时间了,赛后把最后一题做了一下,也不是很难。题目链接: https://atcoder.jp/contests/abc181A - Heavy Rotation题意:他现在穿白衣服,一天之后变成黑衣服,再过一天又变成白衣服,依次交替。思路:就是一个对2取模的问题,直接求解。#include&lt;iostream&gt;int main(){ int n; std::cin&g

乘法表_Teresa7的博客-程序员宅基地

结果:--------------------------------------------------------------------------------1*1=12*1=2 2*2=43*1=3 3*2=6 3*3=94*1=4 4*2=8 4*3=12 4*4=165*1=5 5*2=10 5*3=15 5*4=20 5*5=256*1=6 6

随便推点

前端标准开发规范_lww_gfly的博客-程序员宅基地_前端开发标准

前端的开发规范本文主要从以下几个方面来概述前端的开发规范目录构建规范前端命名规范前端工作规范开发文档的书写规范1. 前端目录构建规范我们从命名原则、根目录、业务逻辑等方面进行目录构建1.1 命名原则:- 简洁明了(如下:) * src 源代码 * img 图片资源 image images * js JavaScript脚本 * dep 第...

IBM存储多路径软件_weixin_34260991的博客-程序员宅基地

多路径软件属于驱动程序层,一个lun通过多条链路映射到主机,会被识别成多个hdisk,多路径软件原理就是将这些hdisk整合为一个可用的盘.普通的电脑主机都是一个硬盘挂接到一个总线上,这里是一对一的关系。而到了有光纤组成的SAN环境,或者由iSCSI组成的IPSAN环境,由于主机和存储通过了光纤交换机或者多块网卡及IP来连...

spring boot+rabbitMQ+websocket消费者与生产者实例_markyang088的博客-程序员宅基地

引入依赖: &amp;lt;!--RabbitMQ--&amp;gt; &amp;lt;dependency&amp;gt; &amp;lt;groupId&amp;gt;org.springframework.boot&amp;lt;/groupId&amp;gt; &amp;lt;artifactId&amp;gt;spring-boot-starter-amqp&amp;lt;/artifactId&amp;gt;...

WebView加载的网页中touch事件处理_Bentley_li的博客-程序员宅基地

一直有接触webview,也用到了很多关于webview的各种特性,一直没找到时机吧所有的webview的用法总结起来,这次也暂时先记录一下webview加载网页,我们在网页中的点击,滑动等动作的事件处理机制。当时的需求大概是我在fragment中使用WebView,当无操作15秒之后退出该fragment,回到activity。我的想法就是监听网页中的点击和滑动事件,然后有操作就让一个int变量

学习搜索技巧_下雨天最长情的博客-程序员宅基地_学搜索

感触比较深的是搜索同一个内容, (⊙v⊙)嗯, 效率不行, 甚至根本找不到想要的答案/(ㄒoㄒ)/~~,既然搜索这么智能, 那不如先学习怎么搜索, 现在还不知道怎么做, 慢慢更新╮(╯▽╰)╭哎,简单试了试:分割线 =。= . =。= . =。= . =。= . =。= . =。= . =。= . =。= . =。=分割线 =。= . =。= . =。= . =。= ...

推荐文章

热门文章

相关标签