《基于SVG的矢量WebGIS地图高级查询功能的实现.doc》由会员分享，可在线阅读，更多相关《基于SVG的矢量WebGIS地图高级查询功能的实现.doc（5页珍藏版）》请在三一办公上搜索。
1、基于的矢量地图SVGWebGIS高级查询功能的实现韩双旺( 天水师范学院 物理学与信息科学技术学院，甘肃 天水 741001)摘要:SVG 是一种基于 XML 的用来描述二维矢量图形和矢量 / 栅格混合图形的标记语言，利用 它提供的图形对象可实现矢量 WebGIS。查询是 GIS 的一个重要交互功能，由于 SVG 内置了对 JavaScript 的支持，所以客户层可通过 JavaScript 对 DOM 的操作实现地图的高级查询功能。当在浏 览器中打开 SVG 或 SVGZ 文件时，SVG 图形作为浏览器的一个嵌入对象出现，由 SVG 插件对其在 指定区域显示。如果用户对地图进行某些查询操作，
2、此时可以通过 JavaScript 函数来获取 SVG 地 图对象及其内部的图形属性，通过不同的查询机制和查询方式，向用户提供地图查询功能，显示用 户查询的相关信息，同时由 SVG 插件刷新对它的显示。关键词:WebGIS; XML; SVG; DOM; JavaScript中图分类号:TP317 4文献标志码:A文章编号:1000 0682( 2011) 04 0068 05The realization of advanced search functions on SVG based vector WebGIS mapHAN Shuangwang( College of Physics
3、and Information Science Technology，Tianshui Normal University，Gansu Tianshui 741001，China)Abstract: SVG is a sort of markup languages based on XML，it is used to describe two dimension vector graphics and vector / raster mixed graphics Though SVG is not a standard that be made in order to the release
4、 of spatial data of geography，but a lot of characteristics of it can be widely applied to Web- GIS，thus the vector WebGIS can be realized Because SVG describe vector picture by the format of sim- ple text，so the data amount of SVG is usually very little，and SVG can be compressed through GZIP，so the
5、WebGIS that be constructed based on SVG can lighten transmission load of the network and accelerate the display pace of the map SVG can support JavaScript by itself，and SVG can be mapped into the tree structure in the memory through DOM，so the client can operate DOM by JavaScript to realize the scal
6、e， the roam，the inquire，the control for the map layers，etcKey words: Web GIS; XML; SVG; DOM; JavaScript有效地消除针对现有专有空间数据格式所产生的数据传播中的问题3，例如可实现地理空间数据的标引言SVG ( Scalable0Vector Graphics ) 是 一 种 基 于准化、结构化，并且使得多源数据的集成成为可能。XML 的用来描述二维矢量图形和矢量 / 栅格混合图形的标记语言，本质上是 XML 在网络上表达图形图 像的一种扩展1。虽然 SVG 是为适应 Web 上图形 应用的发展而
7、制定的，但 SVG 具有很多适用于 GIS 的优点，在 WebGIS 中的广泛应用是今后发展的必 然趋势2。在 WebGIS 中，将地理空间数据编码成 SVG 格式来进行空间数据存储、传输和表现，则会由于 SVG 通过简单的文本语句描述矢量图像，所以SVG 通常数据量很小，并且 SVG 支持 GZIP 压缩，特别是当它经过压缩 后，文件大小可减少 75%80%4，从而基于 SVG 构建 WebGIS 能减轻网络传输负载，加快地图显示速度。并且基于 XML 的 SVG在现有的 上传输 数据具有可行性，不需要WebGIS改变网络基础，利用原有的 HTTP 协议，成本低，而且文件小，传输速度快。查询
8、是 GIS 的一个重要交互功能，在 WebGIS提供的漫游、缩放、测距、图层控制、查询等众多功能收稿日期:2010 11 04作者简介:韩双旺( 1975 ) ，男，甘肃庄浪人，硕士，讲师，研究方 向为 GIS 与数据库技术。中，查询功能是使用最多、最为重要的功能之一，既可以通过简单查询了解地图各图层中图形对象的简 单信息，如鼠标指向时高亮显示，并显示相应的提示 信息; 也可以通过高级查询，完成一些复杂的查询任 务，如通过弹出窗口给出地图中点、线、面等图形对 象的相关详细信息，也可以通过弹出窗口把查询结 果用图表等形式进一步形象地表述; 既可以进行精 确的查询，如对一个点、线、面对象的查询，也
9、可以进 行模糊查询，得到一批符合查询条件的地图图形对象的相关信息。所以有必要对地图查询机制进行研究，为客户端访问提供效率更高、查询方式更加多样化和功能更加强大的查询。基于 SVG 的矢量 WebGIS 地图高级查询1功能的实现原理基于 SVG 的具有地图高级查询功能的 矢 量WebGIS 体系结构如图 1 所示。图 1 基于 SVG 的具有地图高级查询功能的矢量 WebGIS 体系结构当客户端通过浏览器发出一个 HTTP 请 求，WebGIS 服务器响应请求，并将嵌有 SVG 或 SVGZ 地图文件的网页传往客户端，由客户端的 SVG 插件 负责 SVG 的显示，对于 SVG 的压缩形式 SV
10、GZ，其 解压是在客户端浏览器自动进行的。由于 SVG 内 置了对 JavaScript 的支持，而 SVG 可通过 DOM 解析 映像 成内存中的树型 结 构5，所以客户层通过 JavaScript 对 DOM 的操作不但能实现对地图的缩 放、漫游、查询、图层控制等交互操作，而且也可以实 现地图的高级查询功能。当在浏览器中打开 SVG 或 SVGZ 文件时，SVG 图形作为浏览器的一个嵌入 对象出现，由 SVG 插件对其在指定区域显示。如果 用户对地图进行某些查询操 作，此 时 可 以 通 过 JavaScript 函数来获取 SVG 地图对象及其内部的图 形属性，通过不同的查询机制和查询方
11、式，向用户提 供地图查询功能，显示用户查询的相关信息，同时由 SVG 插件刷新对它的显示，由于查询一般是针对已 传到客户端的 SVG 文件进行的，所以查询速度快， 查询效率高，若所查询的对象需要与服务器交互时， 则由服务器从地理空间数据库中抽取空间数据并生 成 SVG 文件传到客户端，再生成客户端的查询信 息; 而要实现基于 SVG 的 WebGIS 的可视化，只需通 过 embed 元素将 SVG 或 SVGZ 图形对象嵌入到 Web 页面中即可。SVG 的矢量 WebGIS 中，属性数据以 XML 的方式组织，而空间数据点、线、面的实现要借助 SVG 提供的相应图形对象实现，但其在组织方式
12、上仍旧是基于XML 的，正是由于它们都是基于 XML 的，所以使得基于 SVG 的矢量 WebGIS 能有效地减轻网络负载加快地图显示。2 1 属性数据的组织由于 SVG 是基于 XML 的，所以基于 SVG 的矢量 WebGIS 中，地图的属性数据可按 XML 的数据组织方式组织，它既可以组织在地图 SVG 文件内部，也可以单独地以 XML 文件存放，两种情况 下地图属性数据的组织结构和组织方式相同，具体组织如下: featureMember 道路 道路 FeatureID 1 / 道路 FeatureID 道路 Shape PolyLine / 道路 Shape 道路 道路隶属 光明路 /
13、 道路 道路隶属 道路 道路长度 800 / 道路 道路长度 / 道路 / featureMember 空间数据的组织SVG 提供了丰富的图形对 象，包 括 line 2 2地图数据的组织地图数据包括属性数据和空间数据，在 基 于2 path 、 circle 、 text 、 image 等元素，满足了 GIS 系统的需要，GIS 空间数据都可以利用这些图形对象实现。空间数据组织在元素 svg / svg 内，地图 中的每个图层又组织在 g / g 元素内，具体组 织如下: svg id = map g id = mapLayers g id = l 道路 path id = l 道路 f1
14、 fill = none stroke = rgb( 235，201，198) d = z / / g g id = l 运动场地 / g / g / svg ( ) ; / / 获得第 iCount 个节点元素的样式值;svgStyle1 setProperty(fill ，green ) ; / / 设置该元素的样式项 fill 的值为 green，即高亮显示;/ / 如果找不到，则给出提示信息elsedocument formsearch info value = 存在! ;目 标 不3 2图表显示通过对查询结果用柱状图等图形形式和表格形式的进一步表示，不但丰富了查询的手段，也为用户提供
15、了形象直观的查询结果，使用户对所查询的地 理信息有更加深人和详细的了解，从而对 WebGIS 的访问更感兴趣。下面用 searchFeature ( ) 函数实现高级查询功 能，查询结果以弹出 SVG 窗口的形式显示，并根据 searchresulttype 的值按表格还是柱状图显示查询结 果，若其大于 0，则在其中调用 showSearchTable( ) 函 数 对查询结果按表格形 式 显 示，否 则 调 用 showSearchGraph( ) 函数对查询结果按柱状图形式 显示，主要代码如下，具体实现可参考文献6。function searchFeature( searchresultt
16、ype)var searchArray = new Array( ) ;var idArray = new Array( ) ; var titleArray = new Array( ) ; var valueArray = new Array( ) ;var layername = searchWin tag0 ; / / 获得图层 名称，对应“查找”窗口中标签“层”右边下拉列表框 中的选择或输入值;var fieldname = searchWin tag1;var featColl = svgdoc getElementsByTagName地图高级查询功能的实现对于最终的查询结果，可以
17、通过简单的高亮显 示迅速定位目标对象，也可以在高亮显示定位目标 对象的基础上进一步用表格的形式或柱状图等图形 形式显示，提供更高级功能的查询，显示更详细、更 形象的信息。3高亮显示通过查询，将图层中的目标对象高亮显示，以便 从众多图形对象中能够迅速定位目标对象，下面的 函数可以根据用户输入的地物名称在地图中进行搜 索，并将其高亮显示。function search( searchvalue) var svgDoc =3 1document svgwebgis getSVGDocument (取 SVG 文档的 DOM;) ; / / 获( featureCollection ) item (
18、0 ) ; / / 返 回 元 素fea-tureCollection 的 第 一 个 子 元 素，即元素。var fValues = featColl getElementsByTagNamefeatureMembersvgObj = svgDoc getElementById (获取 ID 属性值为 gName 的元素;svgObj1 = svgObj getChildNodesgName ) ; / /() ; / / 获得( layername + + fieldname ) ; / / 获 得 名 为“图 层svgObj 中所存放的元素下面所有的子元素;for ( iCount =
19、1; iCount ( ( svgObj1 length )1) ; iCount + = 2) / / 遍历所有节点;名 属性名”的元素集合;var nmlnode = findNamedLayer( layername) ; / /调用 函 数 findNamedLayer ( ) 返 回 ExtendedLayer- if( svgObj1 item( iCount) getAttribute( name )= = searchvalue) / / 如果获得的某节点的 name 属性 值与搜索值相等;Descriptor 元 素 中元素;属 性 为的 子namelayernamevar
20、titleField = nmlnode getElementsByTagName( NameField ) item( 0 ) firstChild nodeValue; / / 返 svgStyle1 =svgObj1 item ( iCount ) getStyle回元素名为 NameField 的一组元素集合的第一个子元素的值;var found = 0; / / 设置符合条件的元素数的起 始值;for( var i = 0; i fValues length; i + + ) var featId = featNode getElementsByTagName( layername
21、+ FeatureID ) item ( 0 ) firstChild no- deValue;var aTitle = featNode getElementsByTagName( layername + + titleField ) item ( 0 ) firstChildnodeValue;var aValue = fValues item ( i ) firstChild node- Value;var qValue = searchWin tag3 ; / / 对应“查找” 窗口中标签“值”右边的下拉列表框中的选择或输 入值;switch( searchWin tag2) case
22、 包含 :xValue = ( aValue + ) toLowerCase( ) ;yValue = ( qValue + ) toLowerCase( ) ;var ev = eval ( str ) ; / / 把 字 符 串 str 当 作 一 个JavaScript 表达式一样求值然后去执行;if( ev) / / 若执行结果为真，即符合查找条件;idArrayidArray length= l + layername + f+ featId;titleArraytitleArray length= aTitle; valueArrayvalueArray length= aValu
23、e; found + = 1;break;if( idArray length = = 0)searchWin searchstate setValue( 没有匹配的对象 ) ; / / 调用 setValue( ) 函数设置查询窗口的查询状态;searchWin removeWidget ( searchWin result) ; / /调用 removeWidget( ) 函数清除查找窗口中选择或输入的内容;if ( xValue indexOf ( yValue )yValue 在 xValue 中出现了; 1 ) / / 如 果searchWin pack( ) ; / / 调用 pa
24、ck ( ) 函数重置查找窗口的布局;ElsesearchWin searchstate setValue (found + 个对象 ) ;idArrayidArray length= l + layername + f+ featId; / / 获得图层 layername 中一个具体图形对 象的 id;titleArraytitleArray length = aTitle; / / 获得 该 图层对象的名称;valueArrayvalueArray length= aValue; / / 获得 对象的某一属性值;found + = 1; / / 找到一个元素后，found 增大 1;br
25、eak; / / 退出 switch 语句;default: / / 若前面均不能匹配，则进入 default; 找 到: +if( searchresulttype 0 ) / / 若 searchresulttype 0 则调用 showSearchTable( ) 对查询结果按表格形式显示;showSearchTable ( idArray，titleArray，valueArray layername，fieldname) ; else / / 否则调用 showSearchGraph ( ) 对查询结if ( ! isNaN ( parseFloat ( aValue ) ) )pa
26、rseFloat( ) 的结果不是一个非法的数字;xValue = parseFloat( aValue) ;yValue = parseFloat( qValue) ;elsexValue = + aValue + ;yValue = + qValue + ; / / 如 果果按柱状图形式显示;showSearchGraph( idArray，titleArray，valueArray layername，fieldname) ;其中 showSearchTable ( ) 函数用来弹出一个用表格形式显示的查询结果窗口，showSearchGraph ( )函数用来弹出一个用柱状图表示的查询
27、结果窗口具体实现略去。综合表格形式和柱状图形式的查询var str = xValue + searchWin tag2+ yValue;结果示例如图 2 所示。图 2 高级查询示例2谢文君，孟令奎，黄长青，等 一种基于 XML 的 WebGIS研究与实现J 地理空间信息，2006，4( 2) : 59 徐云和，谢刚生，程朋根，等 基于 SVG 的空间数据的 可视化J 计算机应用研究 2005( 2) : 46 彭海龙，邹彬，劭岩，等 SVG 在海区信息 WebGIS 中的 应用研究J 海洋预报，2005，22( 1) : 6林恩德 用 SVG 技术实现基于 Web 的 GISEB / OLht
28、tp: / / blog csdn net / zns2002 / archive /2005 /01 /14 /253451 aspx，2003，8Opensource SVG webmapEB / OL http: / / www open- source org / docs / definition_plain html，2003结束语查询是 GIS 的一个重要交互功能，该文在基于 SVG 的矢量 WebGIS 普遍采用高亮显示实现简单 的、精确的查询基础上，提供了高级的精确查询或模 糊查询功能，并把查询结果通过弹出的 SVG 窗口进 一步用表格形式或柱状图形式进行表示，并且在这 些窗口中通过点击相应的对象还可实现其他的相关 查询，使查询结果的表述更加形象化，多样化。 参考文献:434561杨昆，许泉立 SVG 在 WebGIS 中的应用研究J 测绘与空间地理信息，2005，28( 3) : 1 3檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪檪殏欢迎投稿!欢迎订阅!欢迎刊登广告!国内刊号:CN61 1121 / TH投稿信箱:gyybbjb126 com国际刊号:ISSN 1000 0682咨询电话:029 81871277檪檪檪檪檪檪檪檪檪檪殏檪檪檪檪檪檪檪檪檪檪殏
