手撸一个地图组件01

本人曾因为工作原因稍微看过一点openlayer的源码，虽然当时看得头晕眼花，但是通过管中窥豹，大概了解了一些这类地图组件的基本原理，便萌生了自己写一个类似的小玩具的想法。在拖延了将近半年的时间后，终于在前段时间花了几个晚上，大致有了一个简陋的版本。

ok，闲话不多说，本文主要介绍一下前置知识，如果你对gis方面的知识比较熟悉，也可略过本文。

坐标系

我们平时接触最多的就是经纬度坐标，这种坐标系学名是EPSG:4326坐标系（或者是WGS84坐标系），对于用户来说这个是最直观最熟悉的坐标系。当然这种地心坐标系是建立在三维空间中的，而本文所述的地图组件实际上是一个平面地图（就像百度地图、高德地图那样），所以我们要用到墨卡托投影坐标系来构建平面地图。

墨卡托投影将三维球面摊开拉伸成了一个矩形面，结合瓦片地图，我们就可以将平面的地图按层级层层一分为四，切割成金字塔模型。

瓦片地图

目前很多的地图软件，都会使用瓦片地图，如上图所示，瓦片地图就是由层层递进划分的网格图层组成的，使用这种的格式的地图服务有很多好处：

1. 能保证加载的清晰度
2. 能预处理，不需要后端实时渲染
3. 分块加载，加载效率提升

当地图软件镜头拉近的时候，会加载下一层的瓦片，当地图软件拉远的时候，会加载上一层的瓦片，从而保证在镜头不同高度下，瓦片的分辨率都能保持在一个稳定的范围内。

在浏览器地图应用中，经常会使用google地图制定的Web Map Tile Service（简称wmts）地图瓦片协议。wmts使用EPSG:3857坐标系来构建，如下图所示

当然比较奇怪的是，EPSG:3857坐标系的坐标原点在地图的左下角，而wmts瓦片的原点却在左上角，这使得代码处理起来比较麻烦。

视场角(FOV)与地图的可视范围

我们可以将地图软件的视窗看作摄像机镜头的拍摄画面，因为视窗的宽度高度是不会变化的，变化的是摄像机的高度（抽象理解）。那在摄像机高度变化的时候，我们如何确定地图的可视范围呢（即视窗），这里我们就需要引入摄像机的fov概念，如下图所示，假设我们有一个摄像机悬于平面地图的上空，我们可以通过摄像机高度和摄像机的FOV角度，算出地图可视范围。

本文只是对后文需要用到的gis知识简要介绍了一下，如果没有理解也没关系，在后文中会针对代码实现更具体地展开。本人是计算机专业出身，并非地理信息专业出身，如上文中有错误描述，恳请大家指摘。