基于JavaScript的美丽乡村快速查询与交互方法∗

戴璐鸾 张 曼 冉桂华 李 蝶 殷浤益 杨元维

（1.长江大学 武汉 430100）（2.西安市勘察测绘院 西安 710054）

1 引言

随着乡村旅游业与GIS技术飞速发展，基于GIS的美丽乡村旅游正逐步成为城市名片的重要因素［1］。由于乡村旅游信息传统查询与交互模式中，乡村中的景点、农家乐、宾馆、公交线路等信息大多仍以图片或文字等传统形式展现，美丽乡村查询检索系统无法快速、全面、动态地展现美丽乡村发展成果及旅游相关信息。目前美丽乡村信息化建设亟需一个信息丰富、功能完善且能结合当地美丽乡村特色吸引游客的信息发布及查询平台。因此，本文提出了基于JavaScript的美丽乡村快速查询与交互方法并研制系统原型。其核心功能主要包含关键字信息的快速检索、基于空间位置的快速查询和基于事件驱动的查询结果交互等功能。最终可根据当地特色专题信息进行结合发布，使游客可以通过快速查询及交互功能了解美丽乡村的信息。

2 基于jQuery关键字信息快速检索

美丽乡村GIS专题数据种类繁多，其中部分实体名称相近，比如“安吉百汇大酒店”与“安吉美林大酒店”、“安吉深溪村”与“安吉大溪村”等，名称相近可能会导致搜索结果不准确等问题。此外，美丽乡村信息系统的属性查询功能是依据用户在搜索栏中输入的条件在数据中进行动态检索，实现动态交互。若采用传统的结构化查询语言（Structured Query Language，SQL）实现搜索查询会出现信息量过载的问题，导致效率降低［2～4］。本文采用基于jQuery关键字信息检索，以提供快速高效的检索。

2.1 基于jQuery关键字信息快速检索设计

关键字快速检索设计思路为发布基于ArcGIS Server美丽乡村专题地图服务，通过ArcGIS API for JavaScript动态获取服务中的要素集属性，将得到的属性数据转换为Json文件；然后JQuery读取Json文件内容，接受输入关键字同时触发检索框文本变化事件并进行字符串自动匹配，匹配到相关字符串则表示匹配成功，然后返回结果并结束查找；最终将检索到的结果按照autoFill设置优先级排序并进行结果列表装填。如图1所示。

图1 快速检索设计思想

2.2 关键字信息快速检索实现

本文采用JQuery插件实现信息检索。通过对远程美丽乡村专题服务统一资源标识符调用，返回Json类型的结果作为检索的数据源，并作为参数带入回调函数，实现自动匹配并返回匹配提示结果。按照信息快速检索设计，关键代码为$input.bind（（$.browser.opera？“keypress”：“keydown”）+“.auto⁃complete”，function（event）；进行搜索时，当匹配到相关字符则停止搜索并返回结果，此时的结果处于无序状态，通过autocomplete中的autoFill对搜索结果进行优先级排序。

关键字检索适用于用户输入已知的“部分”或“全称”内容进行检索，例如：在搜索框中输入“安”，获取到包括“安”的远程美丽乡村专题服务中的动态搜索结果，如图2（a）所示。再进一步输入“安吉”时则再次刷新显示的结果，查询范围也相应缩小至仅包括“安吉”的专题信息，如图2（b）所示。

图2 关键字信息快速检索结果展示

3 基于JavaScript的美丽乡村快速查询

3.1 面向资源的REST地理信息服务

表示性状态转移（Representational State Trans⁃fer，REST）是一种设计架构的风格，REST式服务有两种状态——资源状态和应用状态，客户端应用通过URI来获取资源，获取这些资源致使这些应用程序转变其状态客户端应用。面向资源架构（Re⁃sourse-Oriented Architecture，ROA）是一个具体的REST式架构［5～6］。GIS资源依托于服务存在，本文基于ROA并采用多源美丽乡村专题信息服务融合技术，实现不同来源及坐标参考的地理地图、影像地图和美丽乡村专题地图服务的有机融合，其中专题地图服务通过ArcGIS Server发布，不仅满足本文对其服务的调用，更能够提供给其他对象如政府部门或相关企业调用，实现地理信息资源服务的融合与共享。

3.2 面向资源的美丽乡村空间信息快速查询

本文采用面向资源的方式实现美丽乡村空间信息的快速查询，主要利用JavaScript技术实现轻量级的空间信息查询。ArcGIS API for JavaScript是一套WebGIS应用程序编程接口框架，为创建Web⁃GIS应用提供了轻量级的解决方案，能够快速创建交互式的底图应用［7～9］。美丽乡村空间信息快速查询调用天地图的地图作为底图，再融合多源美丽乡村专题地图服务。采用封装的地图接口以模块方式加载地图并进行刷新和初始化，以减轻网络负载量，实现不同来源地图服务无缝拼接。空间数据最主要特征是空间特征［10～11］。本文实现了多种类型的美丽乡村专题信息的快速查询功能，功能流程如图3所示。

图3 快速查询流程图

以矩形查询为例，在地图上拉框绘制任意矩形，用geometry接口存放绘制矩形形状信息；调用查询方法，并以矩形形状信息为参数，实现该矩形与美丽乡村专题要素信息的空间分析，返回分析结果；对结果进行可视化，首先进行地图渲染，查询结束后，循环遍历查询图形元素对象，对每个图形元素都创建一个图片标记样式，设置点样式，图形元素获得渲染样式后，用GraphicsLayer渲染到地图上，同理，循环遍历查询对象，每个对象都创建一个文本符号，并设置样式，同时对每个对象依次编号，渲染到红色图标上并设置适当的偏移位置；最后进行结果列表填充，地图渲染的同时，在结果列表容器中根据查询结果的数量动态循环创建表单，结果列表填充内容编号与地图渲染的图标相一致。

绘制如图4（a）所示矩形，并将该矩形与美丽乡村专题信息进行空间分析，即时返回分析结果；最后将该结果进行可视化操作，具体分为地图可视化，渲染对应的红色标记和编号，同时填充结果列表，如图4（b）所示。

图4 矩形查询

查询不同数量的点执行时间获取结果如图5所示，查询50个点执行的时间是145.61ms，查询100个点执行的时间是215.90ms，查询200个点执行的时间是568.44ms。

图5 矩形查询执行时间

对图5进行对比分析可得，随着查询点数的增多，获取到的查询执行时间并不会特别明显地增加。本文主要采用数据分页显示和Ajax技术实现高效率查询。在浏览网页时，数据分页显示是一种优先选择的方法。在传统的web技术中，分页显示的相关操作都是在服务器端进行的，服务器端获取客户端的请求分页，并根据请求页数获取指定的结果集。最后把结果集中的数据返回到客户端，这时返回结果中不但包含了数据，还可能包含了数据的显示样式。客户端的每一次数据更新，均会重新打开一个网页，如果网页中包含了很多html元素，就会造成网页打开速度较慢的情况［12～14］。使用Ajax技术可以很好地弥补了这些问题，服务器端只传输数据库表中的数据，客户端获取这些数据只更新局部内容，与数据无关的其他元素保持不变。所以点数增多的同时，执行时间没有暴增。

4 基于事件驱动的查询结果交互机制

通过点击鼠标或者键盘在浏览器窗口或者网页元素上执行的操作，称之为事件。由鼠标或热键引发的一连串程序的动作，称之为事件驱动。对事件进行处理的程序或函数，称之为事件处理程序［15］。

4.1 结果列表与地图的互动

事件对象为查询后的结果列表，事件类型有鼠标悬停和鼠标离开。

1）通过鼠标悬停事件修改列表中鼠标悬停要素颜色，并根据列表返回的值在地图上绘制蓝色的符号。关键操作：获取列表中当前鼠标所在的要素并将颜色由红色修改为蓝色；新建一个图形对象，将选中的对象和从文件中获取到的蓝色图标的图片作为参数；最后将新建的图形对象添加到地图上。

2）通过鼠标离开事件修改列表要素颜色为红色，清空地图符号图层。关键操作：获取到列表中当前鼠标所在的要素并将颜色修改为红色；清空地图符号图层。

4.2 地图与结果列表的互动

事件对象为地图图层，事件类型有鼠标悬停和鼠标离开。

1）通过鼠标悬停事件将列表中与地图中鼠标悬停要素对应要素颜色修改为蓝色，并将红色符号的图片换成蓝色的。关键操作：新建一个图形对象，将选中的对象和从文件中获取到的蓝色图标的图片作为参数；将新建的图形对象添加到地图上。

2）通过鼠标离开事件修改列表中对应要素的颜色为红色，并修改符号为红色。关键操作：清空地图符号图层；获取到地图中当前鼠标所在的要素并将蓝色修改为红色，设置图标的大小。

4.3 实例应用及结果分析

如图6（a）所示，鼠标悬停在结果列表的“和春大酒店”时，要素由红变蓝，地图上对应的要素也由红变蓝；如图6（b）所示，鼠标离开结果列表时，要素恢复为红色；如图6（c）所示，鼠标再次悬停在“万竹大酒店”时，地图上对应的要素由红变蓝。

图6 结果列表与地图的互动

如图7（a）所示，鼠标悬停在地图的“广场社区”时，要素由红变蓝，结果列表上对应的要素也由红变蓝；如图7（b）所示，鼠标离开该要素，要素恢复为红色；如图7（c）所示，鼠标再次悬停在“山头社区”时，结果列表上对应的要素由红变蓝。

图7 地图与结果列表的互动

通过事件驱动机制实现查询结果与地图交互，使得用户可以快速便捷地定位到专题要素上去。

5 结语

本文对提出的基于JavaScript的美丽乡村快速查询与交互方法进行实践并对结果进行分析，证明了此方法的高效性和可行性。此方法的实现可以将美丽乡村的更多信息以更形象的方式呈现给旅客，为旅客的旅程提供便利，同时可以让美丽乡村更好地进入大众视野。