基于SVG的景区手机地图服务系统关键技术研究

基于SVG的景区手机地图服务系统关键技术研究摘要基于SVG技术设计实现了一款旅游景区手机地图服务系统。该系统应用SVG矢量图、依照MobileSVG规范实现了园区景点基本元素设计、手机地图动画设计，并结合SVG对象编程方法，实现了系统的服务器-客户端请求模式设计，初步完成了系统的景点发布、景点地图操作、景点地物查询等子模块的设计实现，能满足手持移动终端用户的旅游景点在线地图服务基本需求。关键词SVG；智慧旅游；手持移动终端；在线地图服务在云计算、物联网等技术支持下，借助无线网络技术与手持移动终端设备构建的智慧旅游技术发展迅速。很多旅游景点正在逐步摆脱传统纸制地图和零散的数字地图，为游客提供更具个性、自由的景区地理导航与智慧导游服务。智慧旅游的建设核心是服务，应用是关键[1]。旅游景区通过发展智慧旅游的手机地图服务系统，将现有的旅游资源、旅游活动与旅游者等信息有效地整合到系统中，实时发布，为自由旅行者提供优质的景点文化讲解与智能导游服务。1现代旅游导航技术当前，高德、百度等公司专注于互联网地图导航业务，为广大用户提供了高精度的地理街景、交通路况与线路导航相关服务。虽然，旅游者在自由旅行中充分享受到互联网地图的导航业务，但是服务仅限于部分旅游活动元素，诸如旅游食宿服务、景区地理等信息，难以详尽提供景点旅游文化与景区导游服务。因而，大众化互联网地图导航服务难以匹配智慧旅游行业发展理念，建设更具个性化、智能化的手机地图服务系统才是智慧旅游高效发展与技术实现的有效途径。手機地图服务系统是整合旅游景区的数字地图以及各种各样的地图数据库定位技术和园区景点智能搜索技术，建立融地理地图、游览景点、旅游文化讲解与线路定位等功能于一体的服务系统平台。该系统以景区地理地图构建为基础，重点进行基于移动终端的具有良好画面效果与交互功能的游览导航设计。旅行用户最终依靠手持移动终端来享受景区提供的智慧游览导航服务。在技术实现上，系统选取了SVG（ScapableVectorGraphics，可缩放矢量图像）技术设计实现，解决了传统格式图形在手持移动终端中存储效率不高，光栅图系统定位与搜索引擎检索不便等问题。它支持各种图像对象组合、变换、样式修改，预处理对象定义与再用以及嵌套变换、滤镜效果等特效。其良好的互动和动态特性，便于动画、脚本植入与视频、音频等表现信息实现，从而便捷地对普通地图卫星影像、航空照片等进行要素组合、拼接，形成新的地图或新图种。在手机地图服务系统中，我们通过脚本语言来实现复杂的应用，诸如调用SVG对象模型（SVGDocumentObjectModel）来访问或控制所有的元素、属性和属性值以及鼠标、键盘等事件处理。MobileSVG作为一个SVG子集[2]主要应用于无线领域的图形处理，其高级的图形描述特点，如动画、分层图形、半透明对象、画中画等效果与交互式操作完全可满足手持移动终端上SVG格式图形的应用需求。因而，在手机地图服务系统中SVG图形作为矢量数据能更好地支持缩放、平移、附加链接且不失图像品质。鉴于以上特点及优势，我们在景区手机地图服务系统中选用SVG作为地图展现及服务的图形格式进行系统开发。2系统设计2.1体系结构设计正文内容在手持移动智能终端上，内存资源非常有限，且各终端的硬件条件差异也非常大。因而我们在设计手机地图服务系统时，需要有一个设计框架以不同的层次和类别来适应这个复杂多变的环境。J2ME是一种高度优化的Java运行环境[3]，相比J2SE和J2EE的标准要复杂灵活得多。针对手持移动终端的多样性与功能差异，J2ME将它们划分手机、PDA等间断网络通信能力的个人移动信息设备与Web-TV、汽车导航系统等不间断网络连接的共享连接信息设备两大类。同类设备计算能力相似，但是其他功能和条件存在差异。为保证设备相容性，Java平台提供了Configuration的解决方案，即支持一组通用设备的最小Java平台，作为这些设备的最小公分母来保证不同设备间的平台相容性。这里的Java平台主要是指Java虚拟机（JVM）和核心库。针对此特点，J2ME制定了其技术体系。J2ME体系的一般结构是：由Configuration定义的Java虚拟机运行于设备的宿主操作系统之上，构成整个平台的基础。Configuration提供了基本的语言特性，Profile提供针对设备的特殊功能API和扩展类库。应用程序的运行环境需要一个Configuration和至少一个Profile，多个Profile可以共存，也可以叠加[4]。我们用两个具体设备的实现作为例子说明。在一个运行PalmOS的PDA上，Configuration采用CLDC，虚拟机采用KVM，然后采用PDAProfile的Profile。在另一个运行Symbian的智能手机上，则可以采用KVM，CLDC，MIDP。根据此特点，我们选用的J2ME技术体系设计的手机地图服务系统体系结构如图1所示：2.2功能设计景区手机地图服务系统整体功能如图2所示，主要包括景点地图的生成发布，景点地图的基本操作如触摸、拉伸、旋转等，景点浏览，景区定位等功能。用户使用手持移动终端设备点击系统后，向服务器发出服务请求，服务器端返回景区相应SVG图，客户端将SVG图下载到本地存储器后进行操作。在这种服务器、客户端请求模式中，涉及对请求对象的操作与交互。SVG提供了大量丰富的DOM接口，所以我们采用JavaScript语言开发园区地图服务系统的各种基本功能，客户端能通过脚本实现对地图的操作。SVG的DOM提供了丰富的消息触发和事件响应函数，可以获取用户消息，包括在地图上移动、点击鼠标等等。通过提供的接口对SVG文件进行相关操作。事件的响应可以定义到整个SVG文档对象中，也可以定义在其中的单个图形对象上。例如，要给某个路径（path）定义鼠标移动事件，可以用，onmousemove指定事件何时触发，在这里表示鼠标在path上移动时触发，mouseMoved为要触发的响应函数，参数evt表示事件本身，可以通过evt获取与当前事件相关的各种信息，可以定义响应函数，进行相应的处理。同样，SVG也提供丰富的状态事件。例如，数据装载完毕就触发onload事件，做数据的初始化处理。下面以景区地图发布子模块、景点地图操作子模块、景点地物查询子模块为例，分别介绍在实现各模块核心功能时，如何应用SVG的DOM对象进行脚本语言的编写。（1）景区地图发布子模块手机地图服务系统中，需要实时返回用户请求的SVG矢量图，且根据各功能模块应用不同，返回的地图数据信息略有差别。所以，我们需要根据不同的用户请求，返回不同的元素信息，而这些元素都是基于基本的地图元素，这样，分层排列在服务器返回数据中非常必要。SVG地图可以根据不同需求，将地物元素信息分类，把地理对象组织在不同的层中，以组元素作为其分层的方式，每个图层都有相应的标识ID，不同的图层根据ID来进行区分，例如：对不同的图层进行显示控制可以用如下函数实现：functionsetMapLayerVisible（id，checkBool）{varsvgObj=svgdoc.getElementById（id）；varsvgStyle=svgObj.getStyle（）；if（checkBool）svgStyle.setProperty（’visibility’，‘visible’）；elsesvgStyle.setProperty（’visibility’，‘hidden’）；}如果checkBool为true，将该层设置为可见；checkBool为false时，将该层设置为不可见。（2）景区地图操作子模块在景点地图操作功能模块中，提供了地图平滑缩放、自动漫游、自动标注、流动路名等功能。以缩放为例，当用户点击页面上的放大按钮，触发按钮的onclick事件，调用zoomOut（）函数，默认在该函数中将地图放大为原来地图大小的1.5倍。消息响应的函数如下所示：functionzoomOut（groupName）{varsvgDoc=document.mysvg.getSVGDocument（）；varcurView=svgDoc.getElementById（groupName）；varcurZoom=svgDoc.documentElement.currentScale；i=i*1.5；curView.setAttribute（”transform”，”translate（”+j+”“+k+”）scale（”+curZoom*i+”）”）；}这里的i、j、k都是全局变量，分别记录缩放倍数、左右平移、上下平移的数值，这样多次缩放和平移操作就可以累加了。topview是封装所有地图元素以后的分组的id名称。缩小、地图平移、全图显示等功能与上面的地图放大类似，都是对transform的属性进行设置[5]。（3）景区地物查询子模块在景点地物查询功能模块中实现园区搜索功能时，可以根据用户输入的地物名称在地图中进行搜索，并将在SVG地图中搜索到的信息红色高亮显示。消息响应的函数如下所示：functionsearchFeature（featureName）{varsvgDoc=document.mysvg.getSVGDocument（）；varsvgObj=svgDoc.getElementById（featureName）；if（svgObj）{varsvgStyle=svgObj.getStyle（）；svgStyle.setProperty（’stroke’，‘red’）；}}其中的featureName是景区中已定义好的地物名称，在查找函数中，利用地物文档信息、地物目标元素名称进行查询，如果查询到，则在SVG地图上以红色高光方式展现给用户搜寻结果。3关键技术研究手机地图服务系统设计关键在于MobileSVGWEB请求、手机地图动画、手机地图元素及触发等应用的设计。3.1MobileSVGWEB请求技术在XML技术的基础上，应用MobileSVG技术实现了一种基于Web的UML图形编辑方法。该方法是以XML数据文件表示UML图，然后通过XSLT变换程序把XML数据文件在服务器端变换为SVG代码，SVG代码在浏览器中显示。采用该技术实现的园区手机地图可以随时随地向应用服务器发出地图服务请求，并将多用户进行整合，真正实现无线互联的手机地图应用模式[6]。文中结合UML进行统一规范的设计。UML规范定义了三类图，即結构的、行为的和模型管理的图。类图表示不同的实体（人、事物和数据）如何彼此相关，它显示了系统的静态结构。类在类图上使用分成三个部分的矩形来描述：最上面的部分显示类的名称，中间部分包含类的属性，最下面的部分包含类的操作（方法）。UML活动图如图3所示：本系统中，可以在SVG中采用如下方式生产UML，示例代码段如下。3.2手机地图动画技术景区手机地图不但要提供整合的地理元素信息构图，还需要有丰富的手势方便用户操作。双指放大、缩小、旋转以外，双指同时下滑可以将地图转变为45度角，这在MobileSVG中可以方便地使用动画实现。移动和旋转动画可以用元素来实现。元素用于可视化元素的动态坐标变换，其主要属性除通用属性外还有两个attributeName和type，其中attributeName属性值必须指明为”transform”，type属性指明动态坐标变化的类型，其值可以为”translate”（表示平移变换）、”scale”（表示拉伸变换）、”rotate”（表示旋转变换）、”skewX”及”skewY”（表示沿X和Y方向上的歪斜变换）。沿路径动画是指对象沿一定的路径移动，可以用SVG的元素来实现。除了通用属性外，元素还具有path、rotate及keyPoints属性，其中path指明动画路径，rotate指明可视化元素在沿着路径运动过程中是否随路径而转动，keyPoints表示各个关键点所在的位置在路径方向上与路径起点间的距离，它和key-Times属性共同决定一系列关键点以精确控制路径动画中时间