学废了系列 - WebGIS vs WebGL图形编程

前工作中有不少涉及到地图的项目，我参加了几次技术评审，前端伙伴们在 WebGIS 方面的知识储备稍有不足，这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识。另外，我之前的工作中积攒了一些从零开始搭建 WebGL 地图引擎的微薄经验，虽然最终遗憾没有上线，但在其中学到的一些WebGL知识还是值得分享一下。WebGL 可以说是前端可视化技术领域难度最大的一项图形编程技术，所以今天就结合 WebGIS 这个话题顺带分享一些 WebGL 的相关知识，不会太深入，很细节的技术点在后续文章里再讲解。

一 WebGIS 常用概念

在前端领域需要关注的 WebGIS 知识最主要的是搞清楚电子地图中的各种坐标系，其次需要对路网有一些基本的认知，包含路网的特征以及寻路算法的复杂度量级，其中对算法复杂度的了解不用精确到数字，只需要有一个大致的概念即可。

路网寻址是一套非常复杂的算法，除了路网本身的有向图特征以外，还需要将路况、天气甚至民生、政治等因素考虑在内。这是一项单独的研究课题，前端研发不需要关注太细节的东西。

1.1 坐标系

我们日常接触的地理坐标最多的是经纬度坐标，地球是一个椭球体，经纬度是球面坐标系。但是我们平时使用的电子地图都是平面的，如何把球面坐标系下的经纬度坐标映射为电子地图的平面坐标系（数学上称谓是笛卡尔直角坐标系）呢？这个映射过程就是投影变换，目前在 WebGIS 领域国际上统一使用墨卡托投影实现。

下面就分别介绍一下以上两种坐标系以及映射原理。

经纬度坐标

表面上看是两种，经纬度和墨卡托，但准确的说应该是三种（甚至N种）。因为我们日常接触到的经纬度坐标都是经过加密算法处理之后的偏移坐标，与地理上真实的经纬度坐标有一定的偏移量。

真实的地理经纬度坐标系是国际标准，称为WGS84标准，此标准下的坐标系称为地球坐标系或地理坐标系。绝大多数电子地图服务商都不会（或者说不准）直接使用 WGS84 坐标，因为地理信息是涉及国家安全的重要信息，所以一般都需要进行加密。

我们国家目前使用的加密标准是国家测绘局2002年制定GCJ02 标准，经过加密后的坐标系被称为火星坐标系。在我国的所有电子地图都必须至少经过 GCJ02 加密一次才可以上线使用。请注意，至少的意思是经过 GCJ02 加密之后，地图厂商还可以进行二次甚至三次加密，比如百度地图使用的 BD09 标准就是在 GCJ02 加密之后进行二次加密的结果。

下图显示的是同一个经纬度坐标在不同地图上的位置：

墨卡托坐标

墨卡托坐标是球面坐标经过墨卡托投影之后得到的笛卡尔直角二维坐标，墨卡托投影全名叫做正轴等角圆柱墨卡托投影。其原理是假设地球被围在一个中空的圆柱里，其基准纬线（赤道）与圆柱相切接触，然后再假想地球中心有一盏灯，把球面上的图形投影到圆柱体上，再把圆柱体展开，这就是一幅选定基准纬线上的“墨卡托投影”绘制出的地图，见下图：

为了便于建模和计算，墨卡托投影在真实的地球模型上做了以下几个假设：

• 假设一：地球自转是“垂直的”。之所以加引号，是因为在宇宙角度上讨论垂直和水平没有任何意义。大家都知道地球的自转轴（也就是南极点和北极点的连线）是有一个倾斜角的，所以我们见到的地球仪都是倾斜的；
• 假设二：地球是一个正球体。严格来说，这条假设并不是墨卡托投影赋予的，而是来自Web墨卡托投影。原生墨卡托投影得到的平面地图是一个长方形，Web 墨卡托投影在原生墨卡托投影基础上的再次简化，将地球假设为一个正球体，投影后得到的平面地图是一个正方形。正方形方便瓦片切图（关于瓦片切图的知识下文会讲），这样能够提前将地图数据切片储存，提高用户的使用体验。缺点是Y轴存在0.33%的误差；

墨卡托投影有两个致命的缺点：

• 第一，形变非常严重。越接近两极的位置越严重，而且投影后视觉上的平面“面积”远远大于真实的地理球面面积。所以在某个特殊时期，墨卡托投影被个别北美洲国家钟爱，因为他们的国家在投影之后“看上去”非常大。
• 第二，南北极纬度丢失。墨卡托投影能覆盖的纬度区间大概是 [-85.05, 85.05]（单位度deg），区间之外的两极地区的经纬度坐标经过投影计算得到的值趋近无限大和无限小，无法在平面图上表达，所以目前市面上的互联网地图两极地区都是“黑洞”。请看下面这张图：

现实问题：计算两点之间的距离

计算两个POI点之间的“直线”距离是我们日常项目中出现概率很高的一种需求，之所以“直线”两字加引号是因为在现实中地球上的两个点不存在绝对的直线距离，在地理上都是球面距离，也就是数学上的弧长。球面上两点之间的弧长计算是比较复杂的，而且地球是椭球体，进一步加大了复杂度。

这个问题有了墨卡托投影的辅助就很好解决了，墨卡托投影的计量单位是米（m），首先将两个POI点的经纬度坐标换算为墨卡托坐标，剩下的就是简单的勾股定理计算了。

经纬度与墨卡托坐标之间的转换没有绝对统一的换算公式，每个地图厂商根据自己的加密算法都多少存在一些差异，一般不能跨地图厂商使用

1.2 电子地图制图

电子地图的制图是一项非常复杂的流程，技术的纵深涉及前端、后端、（空间）数据库等等，除了技术层面以外，还涉及民生、政治等因素。篇幅有限，这些细节就不一一列举了，只挑选在前端范围内以及现有项目中涉及的知识点讲一下，主要有两个方面：

1. 瓦片切图；
2. 路网结构。

其中第一点是出于技术层面考虑，对从事 WebGIS 的前端开发者来说是必须具备的，因为我们对地图只是使用，不会涉及这么深入的知识，所以大家可以当这点为科普内容；第二点的目的是让大家对路网寻址算法的复杂度有大概的认知，从而在进行与路网相关需求的技术评审时能够全面考虑，从而制定更合理的研发周期。

下面就分别展开讲一讲。

瓦片金字塔

参照下面这张图理解后续的内容：

球面的经纬度坐标经过墨卡托投影之后是一张二维的平面图，图中的大部分内容的变动频率是非常低的，比如上图中展示的大陆和海洋板块，除非遇到地壳运动，否则基本不会变动。为了持久化存储，在webgis领域引入了「瓦片」的概念，意思是将墨卡托坐标系的二维地图按照既定的规则切成一个个小方块保存到服务器，然后前端的应用程序在绘制地图时将这些方块按顺序拼接为完整的地图，这些小方块被称为瓦片-tiles。

Tile 直接翻译是“瓷砖”，倒是很贴切，电子地图就是用一个个 tile 拼起来的，至于为啥被翻译成“瓦片”我也不清楚，行业术语，跟着叫就是了。

还记得前面提到的墨卡托投影的第二个假设吗？将地球假设为正球体，投影之后得到的平面地图是一个正方形，被切割成一个个瓦片也是正方形，这样能够大大降低计算复杂度。因为长方形需要考虑长和宽两个计算因子，而正方形只需要考虑边长一个因子即可。

瓦片的尺寸是固定