HTML5 Canvas：Web浏览器中一个高性能的GIS地图可视化开发标准

介绍：Web GIS传统的方法

以瓦片形式的栅格图像格式（PNG或JPEG图像）绘制地图的传统方法通常是今天在网络上传递地理空间数据的方式。这是通过在服务器上生产瓦片图像，并将它们提供给地图客户端。这种技术已被许多Web地图供应商所使用，并且它很适宜用于创建好看的底图，如OpenStreetMap，谷歌，Bing地图等。

这都能很好地用于Web地图绘制，但有关GIS的内容呢？通常情况下，在创建一个GIS项目的过程中，你需要修改数据，重新排列图层，调整符号和标签，编辑和创建功能，地理处理，分析等，这些操作的结果需要即时地实现和服务器端瓦片渲染的传统方法却不能实现如此的切割。创建完整的地图瓦片缓存经常需要几个小时，甚至几天的时间才能完成。如果你不知何故忘记了在生成瓦片缓存开始前打开水路层的标签，好了，剩下的一周又得重新跑一遍程序了。

你可能需要与地图数据进行交互，如果你的数据作为平面光栅图像这是不可能达到的。地图客户端已经进行了一些改进，它们可以使用Flash和Silverlight等技术，但地图瓦片技术仍然是相同的，并且需要第三方插件去绘制你的地图。

将矢量作为矢量渲染

大家都知道地理空间矢量数据包括三种基本类型：点，线和多边形。此外，每种要素拥有一系列数据属性。传统的测绘技术的缺点是，在转换和渲染点，线和多边形成光栅平铺图像的过程中，这一切有用的矢量和属性信息丢失了。

将矢量作为矢量渲染，可以为GIS在Web和移动设备上开启一个全新的可能性。试想一下，用鼠标与你的数据进行交互：鼠标悬浮，点击或双击。想象一下，通过快速和低延迟地、即时地动态改变符号而绘制了大量的要素。想象一下，在浏览器中你将拥有在桌面GIS中所具有的完整的GIS编辑功能，比如拓扑修改和捕捉等。

如果我们有一个解决方案实际上可能使矢量数据以其自然矢量形式渲染呢？ 事实上，在许多地图客户端，矢量可以覆盖在栅格图片的上面，但目前在现实世界中却未能实现，特别是当你需要处理数百万哪怕是数以千计要素的情况下。为了达到这样的能力，现有的地图渲染引擎将需要一个大的变化，特别是在后端，当然前端也是如此。

HTML5 Canvas

在过去的几年里，我们亲眼目睹了在Web浏览器中令人难以置信的创新和进步。伴随着其跨台式机、移动设备和平板电脑大量地出现，Web浏览器已经成为许多现代应用程序的重要组成部分和平台。在现代浏览器中一系列全新的功能因HTML5而出现。

在HTML5标准提供的许多功能中，提高GIS的关键，在于HTML5的Canvas。Canvas基本上是在浏览器中动态生成的一个位图（图像）。矢量渲染性能使得它在GIS应用中如此有用。

矢量作为矢量形式，再加上所有的复杂的符号系统和地图绘制功能，转移到客户端（如IE浏览器），使服务器只需要提供原始的矢量数据和属性数据。这意味着在地图引擎可以更有效地响应。正如前面提到的，这种方法需要在服务器上采用一个完全不同的策略，在那里地图瓦片都实际上被生产出来。

HTML5 Canvas瓦片矢量地图引擎

 基于其原有的瓦片矢量地图引擎，GIS Cloud创建和实施了全球第一个HTML5矢量映射引擎，它可以生成Flash格式的矢量地图瓦片。它提供的性能是前所未有的。原来的系统已经适用于HTML5 Canvas，且它是如今GIS Cloud提供所有地图的主要方法。 

该引擎的核心是一个非常快的服务器组件，从无到有快速地创建，高效地读取几何数据和属性数据，并将它们以优化的矢量地图瓦片形式传送给客户端。而在地图客户端上，矢量地图技术使用Leaflet（一个优秀的由CloudMade开发的开源Javascript绘图客户端库）可视化数据。

实例：

带有6百万线段的shapefile:
http://www.giscloud.com/map/16594/germany-6000000-features

Parcel polygons:
http://www.giscloud.com/map/12584/sarasota–parcels

超乎寻常数量的交互式Canvas市场:
http://www.giscloud.com/map/16671/a–world–of–a–million–points

更多HTML5地图，请点击由GIS Cloud社区创建的公众地图: http://www.giscloud.com/app

总结

HTML5 Canvas为GIS带来了什么：

· 一个很流畅的的地图绘制的用户体验，无论是在桌面浏览器、手机或平板电脑上

· 将矢量作为矢量渲染

· 即时渲染数以百万计的要素的能力

· 快速渲染，无需预缓存地图

· 显著减少瓦片所需的带宽

· 需要更少的存储空间

· 地图是完全互动的：点击，鼠标悬浮和风格动态化

· 在客户端完全适用的符号，这意味着它很容易改变地图样式，而无需重新加载图层

· 开箱即用，在所有平台上Web浏览器都采用了HTML5标准（即桌面，IOS，Android等）

· 在Web浏览器中为用户带来真正的桌面GIS体验的卓越背景

原文出处：http://www.directionsmag.com/articles/html5-canvas-an-open-standard-for-high-performing-gis-map-visualizatio/243519

扩展阅读：

HTML5与ArcGIS（一）——属于HTML5的Web时代 http://www.gisall.com/html/27/119427-3219.html

HTML5与ArcGIS（二）——HTML5时代下ArcGIS的发展之路 http://www.gisall.com/html/27/119427-3236.html

转载自：https://blog.csdn.net/freeWayWalker/article/details/8165613