Leaflet源码解析系列(一):基础介绍

1,316 阅读2分钟

项目地址:

github.com/Leaflet/Lea…

官方网站:

leafletjs.com

功能介绍:

是一个轻量化的 Web 端地图插件,gzip压缩后只有42KB的 JS 和4KB的 CSS 文件(代码量也在逐年增加啊,记得以前更小😄)。上手使用较为简单,而且性能也不错。兼容性很好,能够在老旧的浏览器中运行,同时还能很好的适配移动端交互操作。Leaflet 有个强大的插件扩展机制,网络上有大量的开源插件,功能丰富。API 文档也比较清晰,源码阅读学习也很适合。

代码结构:

package.json中有项目相关的依赖、运行脚本等相关配置,在script中可以进一步查看项目如何运行。build是打包相关的配置,发布版本的时候用到;debug是运行调试相关的代码,本地开发的时候用到;dist是打包之后的代码,可以直接在开发项目中引用;docs是生成文档相关的代码;spec是测试相关的代码;在src目录下存放了框架的功能代码,是框架的核心。

如果要全面学习,可以把 core、dom、geo、geometry、control这几个源码也详细阅读下,如果是为了了解 leaflet 的功能,则主要阅读 map 和 layer 两个文件夹里的代码即可。

src文件夹中的是代码入口,导入导出了不同环境下的Leaflet对象L文件将Leaflet各个模块的进行了汇总导出。

version是版本信息,coredom是一些公共的JS功能类,core提供了浏览器检测、类的继承、事件绑定、地图交互和一些工具方法,dom提供了与dom相关的各平台的交互和事件功能,以及一些工具方法。

geogeometrylayermapcontrol五部分是地图相关的代码,map是地图对象相关的代码,layer是图层相关的代码,control是地图控件相关的代码geo、geometry是基础地理对象相关的代码。其中 map 和 layer 是关键,开发中接触最多的是 layer 了 。

功能结构:

一个地图对象 map 包含了地图控件 control 和图层 layer 两大类要素。

地图有一些自身的属性和事件,例如坐标系、范围和点击事件。

leaflet自带的控件有图层管理、缩放控制、比例尺、属性栏 4 个。

在地图中通过 layer 来展示数据,leaflet 中

开始使用:

最简单的,直接在项目中通过链接的方式全局引入 js 和 css 文件,然后就可以使用了。

 ......
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
 ......

注意:初始化地图的容器需要制定一个固定的宽高属性