Leaflet源码解析系列(六-1):Map 对象解读

358 阅读2分钟

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 元素,事件注册、注册动画处理、初始化地图状态,地图状态的改变是在动画执行完成后设置的。