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: '&copy; <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: '&copy; <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快速入门的更多相关文章

  1. RabbitMQ学习总结 第二篇：快速入门HelloWorld

    目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...

  2. SpringBoot基础篇-SpringBoot快速入门

    SpringBoot基础 学习目标: 能够理解Spring的优缺点 能够理解SpringBoot的特点 能够理解SpringBoot的核心功能 能够搭建SpringBoot的环境 能够完成applic ...

  3. 持久层之 MyBatis: 第一篇：快速入门

    MyBatis入门到精通 JDBC回顾 1.1.认识MyBatis 1.1.使用IDEA创建maven工程 1.2.引入mysql依赖包 1.3.准备数据 1.4 使用JDBC手写MyBatis框架 ...

  4. Web Api 入门实战 （快速入门+工具使用+不依赖IIS）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...

  5. Hadoop学习篇1 快速入门

    Hadoop是Apache Lucene创始人Doug Cutting创建的,Hadoop起源于Apache Nutch,一个开源的网络搜索引擎.最先引起注意是2003年google的一篇论文,该论文 ...

  6. 【opencv入门篇】快速在VS上配置opencv

    环境配置:win7-32 + opencv2.4.6 + vs2013 注意:无论电脑是32位还是64位,配置opencv库目录时选择x84文件夹!因为编译都是使用32位编译:如果选用X64,则程序运 ...

  7. 第二篇 CSS快速入门

    学CSS 和 JS的路线: 1. 首先,学会怎么找到标签.只有找到标签,才能操作标签——CSS通过选择器去找标签 2. 其次,学会怎么操作标签对象. CSS概述 CSS是Cascading Style ...

  8. OpenDJ入门 | 5分钟快速入门Forgerock DS

    本教程为了让大家快速体验,故不做深入讲解,详细内容请留意后续进阶教程 介绍 OpenDJ是一个目录服务器,它实现了各种轻量级目录访问协议和相关标准,包括完全符合LDAPv3,但也支持目录服务标记语言( ...

  9. 前端组件化Polymer入门教程(3)——快速入门

    本系列主要翻译官方的教程,因为国内目前这方面的资料太少了,但也不一定和官网的一样,反正就是自己想到哪就写到哪. 如果我没有说明,默认情况下index.html始终包含这段代码,后面将不会再贴上来. & ...

  10. [Asp.net 开发系列之SignalR篇]专题一：Asp.net SignalR快速入门

    一.前言 之前半年时间感觉自己有点浮躁,导致停顿了半年多的时间没有更新博客,今天重新开始记录博文,希望自己可以找回初心,继续沉淀.由于最近做的项目中用到SignalR技术,所以打算总结下Asp.net ...

随机推荐

  1. vue移动端适配方案

    一.安装postcss-px-to-viewport插件 1.使用npm安装 $ npm install postcss-px-to-viewport --save-dev 2.或者使用yarn安装 ...

  2. 2021-02-22：一个象棋的棋盘，然后把整个棋盘放入第一象限，棋盘的最左下角是(0,0)位置，那么整个棋盘就是横坐标上9条线、纵坐标上10条线的区域。给你三个 参数 x，y，k。返回“马”从(0,0)位置出发，必须走k步。最后落在(x,y)上的方法数有多少种?

    2021-02-22:一个象棋的棋盘,然后把整个棋盘放入第一象限,棋盘的最左下角是(0,0)位置,那么整个棋盘就是横坐标上9条线.纵坐标上10条线的区域.给你三个 参数 x,y,k.返回"马 ...

  3. 云端炼丹,算力白嫖,基于云端GPU(Colab)使用So-vits库制作AI特朗普演唱《国际歌》

    人工智能AI技术早已深入到人们生活的每一个角落,君不见AI孙燕姿的歌声此起彼伏,不绝于耳,但并不是每个人都拥有一块N卡,没有GPU的日子总是不好过的,但是没关系,山人有妙计,本次我们基于Google的 ...

  4. 如何编写一个健壮的 npm 包

    无脑发布 npm 比如老王我,用npm init新建一个包,改把改把,然后来个npm publish,so easy ️! Too young too naive, baby ! 请容我讲述一些发布过 ...

  5. 通过nc获取靶机的反弹Shell [靶机实战]

    1.环境 Kali:172.30.1.3/24 靶机(Funbox9):172.30.1.129/24 2.信息收集 通过nmap扫描此主机,我们需要获取到开放的端口以及服务的Banner 1 nma ...

  6. odoo总结---类继承和视图继承

    类继承 自从有了类,就有继承,继承是类最大的特性,ODOO开发有不例外,先ODOO集采总结如下: 1)类继承:扩展类中没有_name属性,因为它继承了父类的_name.对现有模型的扩展, 添加新功能, ...

  7. python 学习 ---函数（带参数）

    函数式编程最重要的是增强代码的重用性和可读性 1 def 函数名(参数): 2 3 ... 4 函数体 5 ... 函数的定义主要有如下要点: def:表示函数的关键字 函数名:函数的名称,日后根据函 ...

  8. JS和Document

    对象1.new var obj = new Object(); 2.函数声明对象 function Human () {}: 3.var obj = {}; 大括号 就是对象var obj = {}; ...

  9. NOIP2021游记

    前言: 今年我是以初中生的身份参加的 NOIP,不计奖,不排名,就去试试水. 考得也不好,幸好没计奖. 正文: 早上 7 点: 到LNBS,在旁边吃了早饭,很好吃. 早上 8 点: 校门口照相,然后进 ...

  10. R EnhancedVolcano 绘制火山图

    火山图是用于差异表达分析结果可视化的一种有效方法.今天,我们来介绍一个用于增强火山图绘制的强大 R 包:EnhancedVolcano ,该包拥有强大的绘图功能,用户可以简单的通过设置颜色.形状.大小 ...