使用SVG和VML绘制WebGis地理信息

SVG和VML的WebGis地理信息系统

WebGIS是Internet与GIS结合的产物,是利用WWW向用户提供地理空间信息服务的地理信息系统。社会信息化、网络技术的蓬勃发展为WebGIS提供了广阔的发展空间。可是,传统的Web图形格式因受到传输显示的影响,不能适应WebGIS的发展须要,而成为WebGIS面临的技术瓶颈和挑战。所以必须在现有的网络和硬件条件下,从软件方面解决系统图形网络传输的速度问题。其中,图形技术发挥着相当重要的做用,可升级矢量图像( SVG, Scalable Vector Graphics)和VML (Vector Markup Language)的产生有着十分积极的意义。它具备支持矢量图和动画、由文本构成图形易于操做、对点阵图形兼容等特色。然而，不一样浏览器对两种标准的支持并不一致，微软的IE浏览器系列对VML支持比较好，而其余的浏览器软件对SVG标准支持更完美。这也使得开发基于Web的图形系统变得更加复杂。

多比图形控件出现简化了的这种开发难度，它是一款基于Web的矢量图形控件，可以检测浏览器类型，自动选择VML或SVG方案进行作图， 相似于网页上的Visio控件。

 

 

1 　多比控件技术概述

1. 1　VML技术

VML (VectorMarkup Language)是XML1. 0 的一个应用,使用VML能够在IE 5. 0 以上版本中绘制矢量图形。因为VML是基于新一带网络标记语言XML 标准的,也就是说,表示方法简单,易于扩展,数据与表现相分离,同时VML 支持高质量的矢量图形显示,它基于相链接的直线和曲线描述路径。其次VML 由文本构成,能够很方便地融合到HTML文件中,可用不多的字节来表示较复杂的图像,能够和其它HTML元素同样使用VML元素,在客户端浏览器显示图像。VML可使用DHTML大部分属性和事件,如id, onmouseover等。最后VML 的功能不仅是绘图,它能够在图形中嵌入文本,并可实现超链,经过脚本控制还能够实现动画效果。

1. 2　SVG技术

SVG是一种基于XML的开放的矢量图形描述语言。SVG图像是与XML110兼容的文档, SVG元素是指示如何绘制图像的一些指令,阅读器(Viewer)解释这些指令,把SVG图像在指定设备上显示出来。使用SVG能够在网页上显示出各类各样的高质量的矢量图形,支持不少您想象得出的功能:几何图形、动画、渐变色、滤镜效果等。最关键的是,它也是彻底用普通文原本描述的。也就是说,这是一种专门为网络而设计的基于文本的图像格式。

 

1. 3 多比控件简介

多比图形控件出现简化了的这种开发难度，它是一款基于Web的矢量图形控件，可以检测浏览器类型，自动选择VML或SVG方案进行作图，相似于网页上的Visio控件，是目前国内外最佳的基于web矢量图解决方案，能够用于电力、化工、煤炭、工控组态软件、仿真、地理信息系统、工做流、复杂报表工业SCADA系统、ERP流程设计系统、图形管理、图形拓扑分析、GIS地理信息系统系统、工程制图等领域。

多比图形编辑器实现了图形、图像和文字的有机统一。它除了支持HTML 中经常使用的标记,如文本、图像、连接、交互性、CSS的使用、脚本( Scrip t)外,还提供了大量针对图形、图像、动画的特定标记。对SVG图形文件进行编辑管理的过程为: SVG图形文件经XML 解析器打开,并在内存中生成一个对象树,用鼠标事件来驱动脚本执行,脚本经过DOM接口对对象进行相关的操做,来实现图形绘制、编辑等功能。

 

现实中的图形数据多以CAD格式、Map Info等GIS软件的数据格式存储,要充分利用这些数据,在生成SVG图形时, 咱们就须要将这些数据转换为SVG格式。

2在网页中嵌入地图

要实现SVG在浏览器中显示,须要将SVG图形对象

嵌入到网页中,使用以下HTML代码来实现:

$('#map-3').vectorMap({

                values: gdpData,

                scaleColors: ['#C8EEFF', '#006491'],

                normalizeFunction: 'polynomial',

                hoverOpacity: 0.7,

                hoverColor: false,

                onRegionOver: function(event, code){

                    $("#description div.p").css("display", "none");

                    var country = $("#" + code);

                    if(country.length>0){

                        country.css("display", "block");

                    }else{

                         $("#other").css("display", "block");

                    }

                },

                onRegionOut: function(event, code){},

                onRegionClick: function(event, code){}

});

4　经过JavaScrip t动态操做多比文档

在浏览器中打开地图文件时, 多比中间件做为浏览器的一个嵌入对象出现,能够很方便的经过script函数来获取地图图形对象及其内部的图形属性。经过获取这些对象和属性,就能够很方便地实现交互功能。多比中间件系统最基本的功能是地图控制,多比自己提供图形的缩放功能,但要经过操做鼠标时按指定的功能键才能实现,不适合GIS功能的须要,在WebGIS系统中将其屏蔽。但因为多比中间件提供了丰富的消息触发及事件响应函数,经过捕捉这些消息,来实现自定义的地图控制功能。

 

其余的如地图缩小、全图显示、区域放大、局部定位等功能与之相似,这里就不一一介绍。

4　小结

多比中间件作为一种矢量图形格式,能知足WebGIS图形显示的要求,在表示图形的矢量信息时加入了图形的显示信息(即以什么样的样式显示矢量图形) ,是显示矢量图形比较好的格式。并且它们的技术标准已经为GIS专业软件商所接受,相信不远的未来, SVG对WebGIS的发展将会有深远的影响。