使用HTML5 canvas做地图（1）基础知识

之前一直想使用HTML5技术全新做一套地图API，可是苦于时间和精力，迟迟未有行动。后来下定决心，利用下班和周末做出一个大体框架出来，现在和网友分享一下自己的整体的一个思路和想法。欢迎大家提出宝贵建议，希望把这套API做的更好，有人真正利用起来。DEMO访问地址，猛击这里。

数据

我们看到的电子地图是多个图层叠加之后的效果，每一个图层都至少对应着一个地图服务。我们这样可以理解服务，我们把简单的参数传给后台，后台会把原始数据返回来，前端或者应用就可以根据自己需要，渲染成图。

这里返回的数据，不仅仅是矢量数据，也包括栅格数据。

矢量数据，包括那些点线面的具体坐标、投影或者坐标系。矢量数据使用场景：数据经常更新，需要知道数据属性或坐标。

栅格数据，提前生成好的图片或者动态生成的图片。栅格数据使用场景：底图，计算量较大的渲染图。

一般来说，一个地图，最下面是一个底图，然后在上面叠加一些矢量数据和栅格数据。底图主要是为了在当前比例尺下显示大概地形要素。底图变动周期比较长，数据量比较大，不适合使用矢量数据加载。现在通用的做法，将地图分割成一个个的小图片，然后等到使用的时候拼接起来。我们可以想象一下，之前的屋顶上面的瓦，是怎么一个形态？是不是一个一个拼接成的，然后形成屋顶的，没有谁家的瓦，是一个整体吧。这样做的好处主要有这么几个：

1：可以动态拼接某一范围的底图。

2：可以局部更新瓦片。

坐标系

坐标系分为投影坐标系和地理坐标系，不多说这个了，因为关于这方面的知识实在是太多了，我对这个不是太擅长，只是说一下常见的就可以了。

地理坐标系，是以经纬度为地图的存储单位的。

投影坐标系参数当中都会包括一个地理坐标系，实质上是一个平面坐标系统，单位通常是米。

WGS84，是为GPS全球定位系统使用而站立的坐标系统，属于地理坐标系。GPS采集到的数据，都是基于WGS84。中国现在使用较多的是西安80或者北京2000，这就需要一个转换过程，不过具体参数是保密，现在转换的工具或者公式，转换都会存在误差的，也就会经常看到一些数据叠加发生了偏移错位（当然不仅仅是因为这一个原因，国内的数据发布到网络上面，都要求做偏移处理的）。WGS84东西方向范围[-180,180]，南北方向范围[-90,90]。由于坐标系和投影实在是太多而且名字加参数太长，不容易记，所以就给每一种坐标系定义了一个或多个序列号，WGS84他的wkid是4326。

Web Mercator属于投影坐标系，这是一个正轴等角投影，投影出来之后呈现给我们的是一个正方形。我们都知道地球是一个椭球形，这样肯定会有误差，在大比例尺下面，就可以忽略这个误差了。不过话说回来，无论使用哪一种坐标系都会有误差的。等角投影，保证了对象形状不变，而且也保证了方向和位置的相对性性。这就是在众多的投影当中，我们为什么会选中它的原因（当然不是我选择的，基本上互联网公司底图都是使用这种投影）。三个wkid代表它3857、102100、102133，用的最多的还是102100。东西和南北方向范围都是[-20037508.3427892,20037508.3427892]

下面一节是主要是讲述以谷歌和微软Bing Maps为例，探讨瓦片是如何计算的。