Map.js 这个文件代码行数比较多,是 Leaflet API 的核心类, 用来创建一个地图对象,并进行地图操控。
在源码中,下划线开头的一般都是内部变量和方法,常规的驼峰命名是对外使用的方法。
源码中主要包括了dom结构初始化、注册事件、处理动画、设置和获取map状态以及一些坐标换算方法。
Map.js 代码文件很大,行数较多
为啥不按照功能拆分成多个文件呢?openlayers 的 map 文件也很长,看起来累人,不是不推荐一个文件太多行代码么?
Leaflet 的 Map 中涉及到以下4个坐标系:
- 地理坐标系,也就是经纬度大地坐标,原点在正中心,单位是
度
- 投影坐标系,也就是经纬度坐经过标投影换算后的平面坐标,原点在正中心,单位是
米
- 投影仿射坐标系,是将平面坐标然后按照当前
zoom
层级经过仿射变换后的坐标,单位是像素
。这个坐标系是用来将数据显示在屏幕上的,是屏幕坐标和地理坐标的中间纽带,其原点位于正中心。通过map.project()
和map.unproject()
进行与屏幕坐标的换算。需要好好理解下。 - 屏幕坐标系,原点在左上角是 (0,0),单位是
像素
。map、layer
对应的DOM元素的初始位置都是(0,0)
,改变位置是通过 CSStransform
实现的,transform
的值就是通过投影仿射坐标改变原点换算来的。
创建一个Map需要做以下工作
- 设置配置项
- 初始化 Map 容器
- 设置 Map 的状态
- 注册并处理 map 的 DOM 交互事件
- 处理 Map 平移缩放交互事件
- 定义各种方法......
初始化一个地图主要包括初始化地图 Dom 元素,事件注册、注册动画处理、初始化地图状态,地图状态的改变是在动画执行完成后设置的。