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. pytes中fixture的scope: 决定可以在什么范围内共享fixture

    1fixture的scope 在@pytest.fixture(scope='xxx')中,scope的可选值有5个,以下是官网的描述 2 function级别的scope 添加如下代码到pytest ...

  2. 2022-03-12：k8s如何搭建gogs+drone实现自动化部署cicd，yaml如何写？

    2022-03-12:k8s如何搭建gogs+drone实现自动化部署cicd,yaml如何写? 答案2022-03-12: 需要安装docker和k3s,见 docker和k3s,k3s不需要依赖d ...

  3. 使用vite的创建vue项目

    首先也是打开项目文件目录 在标签处快速打上cmd即可打开cmd窗口 然后按照顶部图进行操作即可完成 安装完成的样子如下图 紧接着输入 npm run dev 将Local 的IP复制到浏览器打开,出现 ...

  4. Node.js出现‘Cannot find module init’ 解决方法

    1. 首先查看当前根目录是否有node_module文件夹,如果有,请删除 2. 输入 npm clean cache 3. 再次输入 node init -y 大功告成

  5. itextpdf5.5.13给pdf添加图片水印、添加文字水印（平铺）、添加文字水印（单个）、添加页眉、页脚、页眉事件、添加图片

    转载自简书用户:alex很累,感谢分享.原地址:https://www.jianshu.com/p/2b9c7a0300e4 一.相关工具类 1. Excel2Pdf.java (如代码不可用请查看原 ...

  6. Java 网络编程 —— 客户端协议处理框架

    概述 Java 对客户程序的通信过程进行了抽象,提供了通用的协议处理框架,该框架封装了 Socket,主要包括以下类: URL 类:统一资源定位符,表示客户程序要访问的远程资源 URLConnecti ...

  7. OCR -- 文本识别 -- 理论篇

    文本识别的应用场景很多,有文档识别.路标识别.车牌识别.工业编号识别等等,根据实际场景可以把文本识别任务分为两个大类:规则文本识别和不规则文本识别. 规则文本识别:主要指印刷字体.扫描文本等,认为文本 ...

  8. PyInstaller 完美打包 Python 脚本，输出结构清晰、便于二次编辑的打包程序

    引入问题 如果我要写一个 Python 项目,打包成 exe 运行(方便在没有 Python 的电脑上使用),我需要打包出的根目录结构美观,没有多余的.杂乱的依赖文件在那里碍眼,而且需要在发现 bug ...

  9. 自然语言处理 Paddle NLP - 预训练语言模型及应用

    什么是语言理解? 关于疫情的一段对话: 中国:我们这边快完了 欧洲:我们这边快完了 中国:我们好多了 欧洲:我们好多了 挑战: 语言的复杂性和多样性 多义/同义/歧义现象 灵活多变的表达形式 语言背后 ...

  10. C++面试八股文：什么是RAII？

    某日二师兄参加XXX科技公司的C++工程师开发岗位第13面: 面试官:什么是RAII? 二师兄:RAII是Resource Acquisition Is Initialization的缩写.翻译成中文 ...