leaflet入门学习

Leaflet是一个开源并且对移动端友好的交互式地图 JavaScript 库。拥有绝大部分开发者所需要的所有地图特性 。

Leaflet 简单、高效并且易用。 它可以高效的运行在桌面和移动平台, 拥有着大量的 扩展插件、 优秀的文档、简单易用的 API 和完善的案例, 以及可读性较好的源码 。

1. Leaflet的整体架构

Leaflet 采用面向对象的程序设计方法，将抽象事物具体化为类，提供核心类Map作为地图容器，基于 Map 与Layer 扩展的各个功能类实现地图数据、覆盖物的可视化，配合事件机制实现地图交互等功能。Leaflet 的体系架构如图所示。

Leaflet 把整个地图看成一个容器，在地图容器（Map）中装载地图数据图层、地图覆盖物图层等，通过图层叠加方式渲染显示地图数据；除此之外容器中还有一些特别的层和控件（如地图控件等)，以及绑定在 Map 和 Layer 等可视化功能类的一系列事件，实现地图管理与交互功能。底层为Leaflet支持的数据源，包括各类格式的瓦片数据、矢量数据及覆盖物数据，由 Layer 扩展的相关图层负责渲染显示。

瓦片数据：源于一种大地图解决方案，就是在多个比例尺下配置地图，然后提前把每个比例尺下的地图绘制为小块图片(瓦片)，保存在服务器上用于缓存的目录中。这样客户端在访问地图时，可以直接获取需要的小块图片拼接成整幅地图，而不是由服务器动态创建(实时创建)出一幅图片再发送到客户端，从而极大提高了访问速度。

矢量数据：矢量数据是在直角坐标中，用x、y坐标表示地图图形或地理实体的位置和形状的数据；

覆盖物数据：如路线、弹窗、标记等。

2. 引入方式

Leaflet 提供了三种常用的引入方式，分别是使用 Leaflet 的托管版本、使用下载版的 Leaflet 、npm安装。

A. CDN托管版本

<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>

B. Leaflet下载版

下载地址：https://leafletjs.cn/download.html

图中文件：

• leaflet.js - 这是压缩后的 Leaflet JavaScript 代码

• leaflet-src.js - 这是可读的，最小的 Leaflet JavaScript

• leaflet.css - 这是 Leaflet 的样式文件

• images - 这是一个文件夹，其中包含 leaflet.css 引用的图像

将下载文件引入项目中：

<link rel="stylesheet" href="/path/to/leaflet.css" />

<script src="/path/to/leaflet.js"></script>

C. npm安装

npm install leaflet

3. 快速入门指南

https://leafletjs.cn/examples/quick-start/

4. Demo实现(CDN方式)

head内引入leaflet.js和leaflet.css及DashFlow插件

<!-- 引入leafletapi --> <link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.9.4/leaflet.css" /> <script src="http://cdn.bootcss.com/leaflet/1.9.4/leaflet.js"></script> <!-- 引入Leaflet.ShowHideLayerGroup插件 --> <script src="../js/Leaflet.PathDashFlow.min.js"></script>

Script：

// 初始化地图 var map = L.map('map', { center: [39.924317, 116.390619], //初始化时的中心点位置 zoom: 14, //初始化时的缩放等级 preferCanvas: true // 使用canvas模式渲染矢量图形 }); // 添加底图(瓦片) tileLayer:用于在地图上加载和显示瓦片图层 var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

//折线坐标

var latlngs = [ [39.898457, 116.391844], [39.898595, 116.377947], [39.898341, 116.368001], [39.898063, 116.357144], [39.899095, 116.351934], [39.905871, 116.350670], [39.922329, 116.349800], [39.931017, 116.349671], [39.939104, 116.349225], [39.942233, 116.349910], [39.947263, 116.366892], [39.947568, 116.387537], [39.947764, 116.401988], [39.947929, 116.410824], [39.947558, 116.426740], [39.939700, 116.427338], [39.932404, 116.427919], [39.923109, 116.428377], [39.907094, 116.429583], [39.906858, 116.414040], [39.906622, 116.405321], [39.906324, 116.394954], [39.906308, 116.391264], [39.916611, 116.390748] ];

// 添加动态线 polyline:绘制折线覆盖物 var path = L.polyline(latlngs, { weight: 5, //宽度 dashArray: '15,15', //线长，间隔 dashSpeed: -30 //正负号代表方向，数值代表折线速度 }).addTo(map);

效果如图：