项目地址:
官方网站:
功能介绍:
是一个轻量化的 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是版本信息,core、dom是一些公共的JS功能类,core提供了浏览器检测、类的继承、事件绑定、地图交互和一些工具方法,dom提供了与dom相关的各平台的交互和事件功能,以及一些工具方法。
geo、geometry、layer、map、control五部分是地图相关的代码,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>
......
注意:初始化地图的容器需要制定一个固定的宽高属性