天地图大规模标注显示的探讨

何鹏举

（1.福建省基础地理信息中心，福建 福州 350002）

天地图大规模标注显示的探讨

何鹏举1

（1.福建省基础地理信息中心，福建 福州 350002）

对现有兴趣点数据的查询显示进行分析，在后端采用空间索引技术，以加快数据的查询效率，在前端根据瓦片范围异步加载显示兴趣点，以减少用户等待的时间。该方案不仅能减少用户操作电子地图的等待时间，还能提供兴趣点详细信息的交互查询，有效提升用户体验。该方案已应用于天地图·福建的专题地图模块，应用效果良好。

地图标注；天地图；空间索引；Ajax

天地图为公众和企业提供了权威、可信、统一的地理信息服务，这些服务所提供的数据详细程度高、数据量大，要在浏览器端进行展示就要考虑显示的效率问题。作为底图的切片数据只在当前视图范围内显示少量图片，在显示效率上不存在问题。而作为查询结果所显示的兴趣点若需要全部显示，则可能在进行一次查询后进行大量绘制工作。在现有的实现中，考虑到一次性加载所有兴趣点会造成不支持HTML5规范的低版本浏览器（如Internet Explorer 8及其先前版本）无法响应的问题[1]，所以采用了显示当前分页兴趣点的方式。该方式不能全面展示兴趣点的分布情况，容易影响到用户查找所需信息的效率，在用户体验上不能够满足需求。天地图作为面向公众的地图网站，需要追求优良的用户体验，同时对于主流浏览器应具有良好的支持，因此本文对在主流浏览器上同时显示大量标注的方案进行研究。

1 提高绘制标注效率的方案

在测试标注显示效率的过程中可以发现，在浏览器中一次性显示几十个点时对效率的影响并不明显，而增加测试数据到成百上千个点时性能就会迅速下降。这是由于每个标注的DOM元素内容较为复杂，通常包含了前景、阴影、可点击区域等。因此加载大量点时就需要耗费大量的资源，这种现象在低版本的浏览器中尤其突出。要解决浏览器的效率问题，可以从单次操作中所加载点的数量或简化DOM元素入手，而简化DOM元素容易导致程序交互能力的下降，因此本文采用了前一种方案。要控制单次操作中加载点的数量，通常使用的是减少所要显示点数量的方法，选择显示重要的兴趣点或对一定范围内的点进行聚合[2]。这样的办法在显示效率上更有优势，但需以牺牲显示细节来达成。

本文通过控制单次操作所加载点的数量，将所要查询的兴趣点数据分别保存为2种格式：一种是只包含兴趣点数据的切片，用于在用户查询时快速地显示兴趣点的分布状况；另一种是保存在数据库中的矢量数据，在用户在某个区域进行详细信息的查询操作时，才从数据库中获取属性并绘制DOM元素。

该方式在最初加载地图的时候只使用服务端传输到客户端的标注点切片，然后在用户将鼠标移动地图上时，客户端就向服务器请求鼠标所在切片及其周围切片的标注点数据。这种方法直观地体现兴趣点的地理分布，同时在用户交互体验上还能接近已经加载了所有标注点。本文选取这种方法进行研究。

2 技术实现

本文将实现分解为数据层、服务层和表现层3个独立的部分[3]。实现的具体内容如图1。

图1 技术实现

2.1 数据层实现

以福州市部分兴趣点为实验数据源，包含以Shape文件形式存储的兴趣点和注记数据。其中兴趣点数据需要处理成为切片格式，用于发布服务。查询注记的位置和属性信息时，服务器端可能有大量并发访问。为了提升查询效率，首先需要将Shape文件录入到数据库中，然后为几何字段建立空间索引，并将注记表及其空间范围表关联的ID字段设置为主键。

注记由符号和文字组成，在符号化过程中，符号和文字的范围相互关联，通常符号在文字的左边。同时在不同的比例尺下需要权衡注记的位置，以免出现相互覆盖的情况[4]。为了减轻客户端和服务端的计算压力，在录入数据的同时就根据当前级别分辨率、符号大小、注记文字长度计算出注记符号和文字的范围，将得到的范围存入另外一张与注记表具有相同ID字段的表中，供查询时直接读取并绘制。

2.2 服务层实现

服务端根据客户端所需要的请求方式，以REST方式实现兴趣点和注记查询[5,6]。首先，客户端需要根据切片范围请求兴趣点和注记信息，若要显示兴趣点的详细信息，还需要根据兴趣点的ID进行查询。主要实现描述的服务如表1。

表1 兴趣点服务和注记服务

在兴趣点和注记的查询过程中都涉及到空间范围的查询，该查询的效率也对客户端的响应时间有巨大的影响。为了提高查询效率，需在之前所建索引的基础上采用高效的查询算法。本文在数据层中所使用的数据库管理系统为Oracle，因此在算法上直接采用Oracle Spatial的空间操作函数[7]。首先使用服务中传入的xMin、yMin、xMax、yMax 4个参数，得到一个矩形的左下角和右上角这2个点，以这2个点构造一个类型为SDO_GEOMETRY的Oracle Spatial矩形对象，然后就可以使用Oracle Spatial的SDO_INSIDE函数来判断兴趣点是否落在这个矩形范围内。

由于查询结果只返回所有兴趣点中的一小部分，因此应该在数据库端完成数据的查询过滤，以避免大量数据在服务层和数据层之间传输，减小对内部网络造成的压力。服务层主要负责从数据库获取数据并向客户端返回，占用的服务器资源并不多，查询过程中的运算压力集中在数据层。若在并发量大时查询效率出现问题，可以对数据库的性能进行诊断，从而进一步优化。

2.3 表现层实现

客户端主要实现用户鼠标位置的监听、切片范围内标注信息的获取、绘制和标注信息的管理。主要实现图2中的步骤。

1）鼠标位置监听，确定用户鼠标的位置是否落在地图上。若是，则计算鼠标位置所在的缓存切片号。

2）确定鼠标所在缓存切片号以后，再对该切片范围内是否已经请求过标注数据进行判断。若没有请求过，就向服务端请求切片范围内的标注数据。为了具有更好的用户体验，客户端采用Ajax的请求方式，使客户端在发出请求以后，用户界面还能够对用户的其他操作作出响应。

3）在请求数据后，地图还需要响应用户鼠标移动到标注点上的事件。在鼠标没有移动到切片上时，地图只显示标注点的切片数据，隐藏矢量数据。而若鼠标移动到了标注点位置，则显示矢量数据，并处理相关的点击事件。

4）由于用户操作过程中需要不断请求标注数据，若不对这些增加到内存中的数据进行管理，其占据的空间不断增加，就会影响到整个程序的效率。因此需要在程序中增加标注信息释放模块，该模块实现以下功能：①根据用户可见的地图范围管理标注信息，将每个切片对应的标注信息存入哈希表中。②在用户平移地图的过程中，若某个切片已经移出当前视野范围，则清除该切片范围内的标注信息。③在地图缩放操作以后，清除之前所在级别的标注信息。

图2 表现层的实现

2.4 实现效果比较

本文在同样的代码基础上实现2种标注点的加载方式：①前文所描述的方法，该方法在显示分类为小学的兴趣点时先加载兴趣点切片，而后在鼠标移动到某一切片上时才请求具体的兴趣点信息。②不加载兴趣点切片，一次性请求所有兴趣点并显示。为测试低版本浏览器的兼容性，本文选择在已经清除了缓存的Internet Explorer 8中对比2种实现的效率。实验中查询主城区范围内的小学，屏幕中包含256个小学。运行第一种实现时，可以迅速地看到所有兴趣点的分布，响应时间小于0.5 s，而移动到点上以后显示相关信息也基本不需要等待。运行第二种实现时，显示兴趣点分布响应的时间大于2 s，而且在兴趣点显示完毕之前，用户无法进行其他操作，严重影响了用户体验。

2.5 应用实践

图3 天地图·福建的专题地图模块中标注的交互操作

本文所描述的实现已应用于天地图·福建的专题地图模块。如图3，在选择专题类别后，地图上显示了所选专题中的所有兴趣点。地图中显示的所有标注点都可以与鼠标互动，在鼠标移动到标注点上的时候，标注点显示为选中状态，点击后可显示具有标注点详细信息的气泡框。

3 结 语

本文研究在浏览器中显示大量标注点的解决方案，该解决方案避免了单次加载大量标注所产生的显示效率问题，且在不同版本的浏览器中都具有良好的兼容性和交互性。由于这种显示方式先加载兴趣点切片，因此可以从2种应用角度考虑该方案的实施：①对于查询内容相对固定的应用场景（如专题地图和常用关键字的查询），可对标注点进行预切片，发布为WMTS服务，以获得更快的响应速度。②对于展示内容不固定的应用场景，可以将标注点图层发布为WMS服务，以适应数据变动的需求。

[1] 廖明,潘媛芳.WebGIS矢量地图绘制方法的性能比较分析[C].华东六省一市测绘学会第十一次学术交流会论文集,2009

[2] 赵一.大规模互联网地理标注快速聚类方法研究[D].辽宁:辽宁工程技术大学,2012

[3] 段克敏,李宏利,邰晓峰.基于互联网的地图标注系统设计与实现[J].地理信息世界,2011(4):51-56

[4] 杨凌云,李菁,金远雄.电子地图动态注记的研究[J].软件导刊,2005(18):6-18

[5] 李双青,杨如军,马骁驰,等.基于Oracle Spatial的REST的API的设计与实现[J].广西师范学院学报:自然科学版,2012,29(2):82-87

[6] 熊自诚.基于SOA的Web GIS技术研究[D].武汉:武汉理工大学,2009

[7] 向万里,张静芳.基于Oracle Spatial的城市公交网络出行路径选择算法[J].兰州交通大学学报,2009,28(6):119-122

P208

B

1672-4623（2015）01-0174-02

10.3969/j.issn.1672-4623.2015.01.058

何鹏举，硕士，现从事天地图·福建、移动地理信息系统建设。

2014-09-16。

项目来源：福建省测绘地理信息局2013-2014年科技基金资助项目。