WebGIS前端框架（openlayers，mapbox，leaflet）图形图像底层渲染原理分析

学了这么多的框架，做了这么多的项目，你是否清楚你使用的GIS框架（mapbox，open layers，cesium，leaflet）底层到底是什么原理？是否清楚哪些所谓的地图影像，矢量图形，图标，图像动画等是如何渲染到网页上的？这篇文章就大家解读一下WebGIS的底层原理。

首先说说历史，有时候清楚历史才能清楚为什么是现在这样。

早期在html刚被设计出来的时候，那时候还是1993年。想在html上面画图还是比较难的。虽然早期的html已经支持图像的加载，但是也很难做到“地图”的绘制，因为地图的范围之大层级之多是一个很复杂的事情。

关于矢量图形如何渲染？早期的html支持svg（可伸缩的矢量图形）渲染。画一个svg图形简单。但是用svg画一幅地图可并不简单。地图边界和要素的复杂性可想而知。

所以在早期，webgis几乎得不到任何的发展。因为那时候的技术还没有像如今一样突飞猛进。

webgis能突飞猛进发展起来我们还要感谢苹果。对你没听错，Apple Inc.伟大的苹果公司。因为浏览器所支持的重要的html元素canvas最早是由苹果公司提出来的。苹果可是计算机图形的鼻祖。这一点就连比尔盖茨都得承认。如今的ipad的绘画能力大家有目共睹。

自从有了canvas才为html上图形图像绘画奠定了基础。因为在canvas就像是一张白纸，你可以在这张纸上画任何你想画的，就和在现实世界一样。

既然什么都能画，那么画地图岂不是也很容易？所以第一个派系诞生了。

1.基于canvas构建地图框架

此类的代表是openlayers<