用html5实现一个高性能GIS地图可视化
2012-11-09 13:08
344 查看
这都能很好地用于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.yahewan.com/
相关文章推荐
- HTML5 Canvas:Web浏览器中一个高性能的GIS地图可视化开发标准
- HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用
- HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用
- HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用
- 分享一个HTML5的drag and drop API实现的图片拖拽分组效果
- jsp连接MySQL操作GIS地图数据,实现添加point的功能
- IT人才如何使用HTML5 Notication API实现一个定时提醒工具
- 分享一个HTML5画布实现的超酷文字弹跳球效果
- 一个高性能无锁哈希表的实现
- html4和html5区别之如何在一个input上添加焦点实现代码
- html5实现的一个简单的下雨效果
- 一个显示地图数据,并实现简单浏览查询程序源码(SDK编写)
- 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
- HTML5 RPG游戏引擎 地图实现篇
- C#中一个高性能异步socket封装库的实现思路分享
- 分享一个老式卡带机风格的HTML5 Audio播放器实现
- 一个快速实现自定义地图区域展示及导航的平台:迅达地理
- HTML5 Canvas画线技巧――实现绘制一个像素宽的细线
- Linux网络编程 使用epoll实现一个高性能TCP Echo服务器
- 从零实现一个高性能网络爬虫(一)网络请求分析及代码实现