【Leaflet入门篇】 Leaflet快速入门
0 前言
Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。 它大小仅仅只有 42 KB of JS, 并且拥有绝大部分开发者所需要的所有地图特性 。
Leaflet 简单、高效并且易用。 它可以高效的运行在桌面和移动平台, 拥有着大量的 扩展插件、 优秀的文档（相对于openlayer，Leaflet有一个非常友好的中文网站 ）、简单易用的 API 和完善的案例, 以及可读性较好的 源码 。
一个优秀的文档对初学者的帮助是巨大的，接下来的内容都是基于这个文档来的（强烈推荐大家看官方文档 https://leafletjs.cn/）
【Leaflet入门篇】文章可以帮助大家能够更好的阅读教程文档
“快速入门”主要讲Leaflet的引入和使用（添加简单的地图元素和点击事件），对应教程【Leaflet快速入门指南】
1 引入
引入分为脚本引入(script)和模块引入(import)等
脚本引入
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
注：先引leaflet.css，在引leaflet.js
模块引入
// 直接安装
npm install --save leaflet@1.7.1 (版本号自己顶，此刻最新版本v1.9.4)
// package.json 添加安装
"dependencies": {
"leaflet": "^1.7.1"
}
npm install
// 引入
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
2 使用
本文将使用分为以下三步：
2.1 创建具有特定id的div元素
<div id="map" style="height: 500px; width: 500px"></div>
注：需要设定div元素的高度height，不然地图无法显示
2.2 实例map
var map = L.map('map').setView([29.04656, 112.86254], 8);
L.map('map') 是静态实例方法，参数'map'是指id问map的div原始，setView([29.04656, 112.86254], 13)是设置地图中心点和缩放级别
此时只创建了地图实例，地图上只有缩放控件，需要在地图上添加元素（本文会演示添加简单的地图服务、标记、圆和多边形等元素）
右下角有一个Leaflet图标，那是Attribution版权控件，可以通过地图的attributionControl属性控制是否显示。
// 添加{attributionControl: false}去掉版权控件
var map = L.map('map', {attributionControl: false}).setView([29.04656, 112.86254], 13);
2.3 添加地图元素
1）添加地图服务：教程中添加的是openstreetmap的瓦片图层，没有kexue上网访问不友好
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
选择一个可以轻松访问的瓦片服务，使用天地瓦片服务（需要token，好像也不够轻松）
var url = http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=xxx (替换tk)
L.tileLayer(url, {
maxZoom: 18
}).addTo(map)
// 修改地图中心点
map.setView([27.629216, 111.711649])
Leaflet能添加tile瓦片服务还能添加其他类型的地图服务（wms）等，后面的文档中会详细介绍。
2）标记、圆和多边形
在地图开发中常用的标记在Leaflet中添加也十分方便
var marker = L.marker([51.5, -0.09]).addTo(map);
除了标记还有圆、多边形等
var circle = L.circle([29.16175, 112.40661],
{
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500 // 半径
}).addTo(map);
var polygon = L.polygon([
[29.22409, 113.21960],
[28.80135, 112.87902],
[28.74358, 113.543701]
]).addTo(map);
添加弹窗显示地图元素的信息是在地图开发中经常碰到的
使用popups可以很好做到
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
bindPopup()绑定需要显示的信息 （点击元素后显示的内容）
openPopup()自动打开（不需要手动点击，直接显示）
2.4 事件
通过监听事件可以进行交互，Leaflet 中每个对象都有属于自己的事件，例如单击地图显示经纬度
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
以上就是【Leaflet入门篇 】基础教程的全部内容
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="map" style="height: 500px; width: 500px"></div>
<script>
var map = L.map('map', {attributionControl: false}).setView([29.04656, 112.86254], 8);
// L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
// maxZoom: 19,
// attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
// }).addTo(map);
var url = "http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=xxx" // xxx (替换tk)
L.tileLayer(url, {
maxZoom: 18
}).addTo(map)
var marker = L.marker([29.06097, 111.93969]).addTo(map);
var circle = L.circle([29.16175, 112.40661],
{
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 10000 // 半径 单位m
}).addTo(map);
var polygon = L.polygon([
[29.22409, 113.21960],
[28.80135, 112.87902],
[28.74358, 113.543701]
]).addTo(map);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
</script>
</body>
</html>
点赞收藏加关注，收获满满不迷路
欢迎评论交流
【Leaflet入门篇】 Leaflet快速入门的更多相关文章
- RabbitMQ学习总结 第二篇：快速入门HelloWorld
目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...
- SpringBoot基础篇-SpringBoot快速入门
SpringBoot基础 学习目标: 能够理解Spring的优缺点 能够理解SpringBoot的特点 能够理解SpringBoot的核心功能 能够搭建SpringBoot的环境 能够完成applic ...
- 持久层之 MyBatis: 第一篇：快速入门
MyBatis入门到精通 JDBC回顾 1.1.认识MyBatis 1.1.使用IDEA创建maven工程 1.2.引入mysql依赖包 1.3.准备数据 1.4 使用JDBC手写MyBatis框架 ...
- Web Api 入门实战 （快速入门+工具使用+不依赖IIS）
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...
- Hadoop学习篇1 快速入门
Hadoop是Apache Lucene创始人Doug Cutting创建的,Hadoop起源于Apache Nutch,一个开源的网络搜索引擎.最先引起注意是2003年google的一篇论文,该论文 ...
- 【opencv入门篇】快速在VS上配置opencv
环境配置:win7-32 + opencv2.4.6 + vs2013 注意:无论电脑是32位还是64位,配置opencv库目录时选择x84文件夹!因为编译都是使用32位编译:如果选用X64,则程序运 ...
- 第二篇 CSS快速入门
学CSS 和 JS的路线: 1. 首先,学会怎么找到标签.只有找到标签,才能操作标签——CSS通过选择器去找标签 2. 其次,学会怎么操作标签对象. CSS概述 CSS是Cascading Style ...
- OpenDJ入门 | 5分钟快速入门Forgerock DS
本教程为了让大家快速体验,故不做深入讲解,详细内容请留意后续进阶教程 介绍 OpenDJ是一个目录服务器,它实现了各种轻量级目录访问协议和相关标准,包括完全符合LDAPv3,但也支持目录服务标记语言( ...
- 前端组件化Polymer入门教程(3)——快速入门
本系列主要翻译官方的教程,因为国内目前这方面的资料太少了,但也不一定和官网的一样,反正就是自己想到哪就写到哪. 如果我没有说明,默认情况下index.html始终包含这段代码,后面将不会再贴上来. & ...
- [Asp.net 开发系列之SignalR篇]专题一：Asp.net SignalR快速入门
一.前言 之前半年时间感觉自己有点浮躁,导致停顿了半年多的时间没有更新博客,今天重新开始记录博文,希望自己可以找回初心,继续沉淀.由于最近做的项目中用到SignalR技术,所以打算总结下Asp.net ...
随机推荐
- 再解 [NOI2017] 整数
提供一个来自 CF 大佬 adament 的有趣思路. 首先我们知道的是一个只增加的 \(b\) 进制整数计数器,如果 \(b\) 是常数那么复杂度是均摊 \(O(1)\) 的.证明只需要考虑将 \( ...
- 2022-10-26：以下go语言代码输出什么？A：1 3 2；B：1 2 3；C：3 1 2；D：3 2 1。 package main import “fmt“ type temp struc
2022-10-26:以下go语言代码输出什么?A:1 3 2:B:1 2 3:C:3 1 2:D:3 2 1. package main import "fmt" type te ...
- 都说 C++ 没有 GC，RAII: 那么我算个啥？(赠书福利)
*以下内容为本人的学习笔记,如需要转载,请声明原文链接微信公众号「ENG八戒」https://mp.weixin.qq.com/s/7A9-tGZxf4w_7eZl3OUQ4A 学过 Java.C# ...
- 【GiraKoo】Git工具使用指南
Git工具使用指南 Git是一个分布式版本控制工具,可以用于管理代码.本文介绍了如何使用git工具. 1. SVN和Git的区别 1.1 SVN SVN是集中式版本控制工具,所有的代码都存储在一个中央 ...
- 深入浅出 OkHttp 源码解析及应用实践
作者:vivo 互联网服务器团队- Tie Qinrui OkHttp 在 Java 和 Android 世界中被广泛使用,深入学习源代码有助于掌握软件特性和提高编程水平. 本文首先从源代码入手简要分 ...
- vue3实现H5网页录音并上传（mp3、wav）兼容Android、iOS和PC端
使用 Recorder插件 可以在HTML5网页中进行录音,录音完成后得到blob文件对象,然后将blob上传到服务器:项目使用的vue3.0版本(这个插件同时支持vue2.0.也支持uniapp,很 ...
- DosBox环境配置
DosBox环境配置 DOSBox 是一个基于 x86 架构的 PC 的模拟器,它允许用户在现代操作系统上运行 DOS 程序.DOSBox 是自由软件,可以在 Windows.Linux ,macOS ...
- 使用Mybatis生成树形菜单-适用于各种树形场景
开发中我们难免会遇到各种树形结构展示的场景.比如用户登录系统后菜单的展示,某些大型购物网站商品的分类展示等等,反正开发中会遇到各种树形展示的功能,这些功能大概处理的思路都是一样的,所以本文就总结一下树 ...
- Spark SQL 及其DataFrame的基本操作
1.Spark SQL出现的 原因是什么? Spark SQL是Spark用来处理结构化数据的一个模块,它提供了一个叫作Data Frame的编程抽象结构数据模型(即带有Schema信息的RDD),S ...
- Solon 成为信通院可信开源社区、可信开源项目
自2021年9月17日成立以来,可信开源社区共同体共有五批新成员加入.在4月21日"OSCAR开源生态建设论坛"上,可信开源社区共同体又迎来2位正式成员和6位预备成员,Solon ...