基于地图API的校园在线电子地图设计与实现
2014-08-25梁晓莉张得群蔡圣准
程 钢,梁晓莉,张得群，蔡圣准
(1.河南理工大学 矿山空间信息技术国家测绘地理信息局重点实验室，河南 焦作 454000;2.河南理工大学 测绘与国土信息工程学院，河南 焦作 454000)
基于地图API的校园在线电子地图设计与实现
程 钢1,2,梁晓莉1,2,张得群2，蔡圣准2
(1.河南理工大学 矿山空间信息技术国家测绘地理信息局重点实验室，河南 焦作 454000;2.河南理工大学 测绘与国土信息工程学院，河南 焦作 454000)
大学城的建设和高校规模的扩建，给众多师生和来访者造成诸多不便。校园电子地图为广大师生及来访者提供地理参照和导航作用，为校园数字化建设提供基本的地理框架。针对现有主流地理信息系统平台价格昂贵且对开发者技术要求高等局限性，文中基于地图搜索引擎提供的API进行校园在线电子地图的设计与开发，探讨将地图API与第三方数据相结合实现局域在线地图服务的关键技术，以河南理工大学在线电子地图的构建为例，验证相关技术和方法的可行性。
地图API；校园；在线电子地图；设计；开发
近年来，随着经济发展以及国家对高等教育投入的增加，高校不断扩招和合并，规模越来越大，校园的基础设施在原有基础上不断扩建，多校区、多学部甚至异地办学等布局形式，造成职能部门、教学区、宿舍区、服务区等众多的部门设施混合分布在校园中。为方便广大师生和来访人员能快速、准确地查询并获取校园及其周边的地理信息，以及为校园的管理、规划、设计提供准确而详细的数据，有必要开发校园在线地图服务系统。数字地图是数字校园系统中的一个子系统[1]，是校园数字化建设的重要内容之一，是加速实现学校管理和办公自动化、现代化、数字化，提高管理水平和效率，实现信息和资源共享的重要举措，同时也是树立学校品牌，扩大学校影响的重要方式。主流地理信息系统软件为校园在线电子地图的开发提供了完备的组件和丰富的功能[2-4]。然而主流软件开发过程复杂、资金投入昂贵、对开发者技术要求较高，不适于小型、公益性在线电子地图系统的构建[5]。各通用地图搜索引擎(百度地图、谷歌地图)虽然方便快捷但由于面向广大民众，针对校园的专题分类较少，信息较为概略，难以充分全面地表达校园的专题信息。然而其提供的地图API，为用户定制个性化地图服务，实现专题信息与地图服务整合提供了捷径。本文将校园专题数据库嵌入搜索引擎提供的基本地理框架之中，利用地图API提供的网络编程接口更新底图，实现专题数据分类、查询、量算等基本功能，既丰富了校园空间信息服务的内容又节省开发成本，实现校园信息的个性化共享和发布。本文以河南理工大学为例，采用百度地图API对校园在线电子地图开发关键技术进行探讨和实现。
1 基于地图API的校园在线电子地图基本架构
在线地图搜索引擎按照B/S体系结构搭建地图服务平台，通过网络访问服务提供的地图显示、漫游、缩放等功能。文中校园电子地图以该通用地图服务平台为基础，构建应用数据库和数据服务器，设计符合校园用户使用习惯的良好的客户端界面，通过调用地图API实现在线电子地图的各种交互功能，其总体架构如图1所示。
图1 校园在线电子地图总体架构
客户层:包括客户端和浏览器，提供地图浏览和查询界面，负责用户与一台及多方应用服务器的交互，将访问和查询请求发送给服务器，并对返回结果进行可视化表达。
应用层:负责用户请求处理，主要依靠应用服务器完成工作。客户层提出请求后，应用服务器将启动相应进程响应，并将处理结果动态生成HTML代码，返回给客户端。如果客户端提交的请求包括数据处理操作，应用服务器还需与数据服务器交互完成数据处理过程。
数据层:负责空间数据、属性数据的存储、响应和更新处理，由数据服务器完成。数据请求处理完毕后，将结果返回应用服务器，由应用服务器传回客户端，完成整个事件处理过程。
2 校园电子地图的设计
2.1 界面及功能设计
考虑到校园在线电子地图载体及其交互性，界面应符合操作简单、互动性强且美观大方等特点[6]，包括地图显示区、缩略图区、选择列表查询区以及工具条等视图区域。地图显示区，是地图操作和展示的主要区域，是校园地理环境的最直观展示，具有地图缩放、平移、比例尺等基本地图控件。缩略图用于展现当前窗口与校园区域的拓扑关系，为用户浏览提供方便。选择列表区以树型结构展现各个专题并提供搜索框，为用户检索提供灵活的方式。工具条主要用来提供测距、地图输出、打印、添加自定义标记等辅助功能。
2.2 专题分类
校园在线电子地图承载着丰富的内容和信息，为便于用户的使用和查询，需要对其涉及的内容按照专题进行分类。本文将校园电子地图内容分为教学院系、管理机构、文体休闲、学生公寓、家属住宅、生活服务、校园周边等7个大类，并在大类中按照内容的多少划分为多个小类，如图2所示。
图2 校园电子地图专题分类
2.3 数据存储
数据是信息系统的“血液”，是地图提供查询和分析的基本素材。电子地图中的地理实体同时具有空间特征和属性特征，需要对空间数据和属性数据进行统一存储和管理。顾及校园区域的空间范围和数据量，本文采用XML文件和关系型数据库混合方式存储空间和属性数据,利用XML技术弥补关系型数据库对空间数据表达能力不足的缺点。XML作为一种可扩展置标语言，在数据存取上比以往数据库具有更大的优越性，不仅能实现不同平台间的数据交换和数据共享，而且具有更强大的检索功能[7]。
空间数据可抽象为点、线、面3种基本类型，每一个要素具有唯一的标识码，用以与属性数据关联。点数据用于表达地物中心坐标；线数据用于描述线性要素，如道路中心线等；面数据用于描述教学区、宿舍区、家属区、生活服务区、文体休闲区等空间范围。下面以面数据为例说明空间数据的存储格式。
……
其中是根结点，每个XML文件必须有一个根结点，
图3 面要素空间数据存储结构
属性数据表达了地物要素的地理语义和属性信息，根据专题分类后并采用专题名称拼音首字母对各数据表进行命名，如表1所示。
数据表存储了对地物进行定位和表达的必要数据，包括识别标志、名称、中心点坐标、信息窗内容等信息。面状要素表结构如表2所示。
表1 专题命名表
表2 面要素属性表结构
3 关键技术与实现
3.1 关键技术
3.1.1 ASP.NET与JavaScript
ASP.NET技术是由Microsoft公司的.NET技术具体化而来，基于模块和组件，具有更好的可扩展性与可定制性。ASP.NET改进了配置，有效缩短了Web应用程序的开发周期，其伸缩性、安全性、可靠性大大提高，且对不同浏览器提供了更好支持，可创造出更加动态而且伸缩性更强的应用程序，更好地满足公司的商业需求，并提供一个更加丰富的开发环境[8]。JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，用来给网页添加动态功能，如响应用户的各种操作。
本研究采用ASP.NET技术进行网站的设计开发，利用ADO.NET完成与自主建立的河南理工大学兴趣点数据库和数据文件的交互，数据采用上文所述的Access和XML文件相结合的方式存储。前端采用CSS+Javascript进行设计和开发，由CSS完成样式格式控制，Javascript主要负责调用地图API及与用户的交互，并将服务器运行结果进行包装或再运算，进而传递给用户。下文为通过Javascript脚本调用简单地图服务：
ar map=new BMap.Map("hpumap");
map.centerAndZoom(new BMap.Point(113.273368, 35.19497), 18);
该代码引入在线地图API；创建地图容器并设置其大小和尺寸；创建地图实例，同时设置其中心位置和放大级别完成地图初始化。这样便可以显示一个简单的地图界面，如图4所示。后续可根据需求覆盖新的地图背景，增加兴趣点信息以及增加新的功能等。
图4 Javascript调用地图API实例
3.1.2 地图切片
地图切片技术，指根据某一尺寸(如128，256像素等)和图片格式(如JPEG，PNG等)，将某一比例尺某分辨率特定地理坐标范围内的地图切割成若干行及列的规则图片。在服务器上构建好瓦片地图图片库之后，就可以脱离GIS平台，通过现有的互联网技术实现空间位置服务[9]。地图切片技术可有效提高数据传输效率，改善用户体验效果。
由于百度地图的遥感和线划图更新速度较慢，为了更新学校电子地图底图，本文将ArcMap制作而成的最新地图数据转换成栅格数据，按照金字塔形式进行切片，并覆盖于百度地图之上。
切片前首先将图像坐标与地图坐标进行匹配，再通过一定的切图算法对某一缩放级别地图进行切片并保存成PNG等图片格式。每个缩放级别的图片放在一个文件夹下，文件夹直接采用地图所在缩放级别命名。在文件夹内图片采用规则命名方式，如tile+x+"_"+y，其中x，y分别代表该图块在本级别下的图块编号。如第18级下某区域的结果如图5所示。
图5 切片结果及命名结果展示
通过TileLayer创建新图层，利用其getTilesUrl方法便可以动态加载地图切片，从而更新底图。该方法参考代码如下，它通过地图图块编号和缩放级别返回图片地址。
tileLayer.getTilesUrl = function (tileCoord， zoom) {
var x = tileCoord.x;
var y = tileCoord.y;
return 'tiles/' + zoom + '/tile' + x + '_' + y + '.png';
}
更新后的电子地图与百度地图的融合效果如图6所示，该图上半部分为百度地图提供的原始影像图，而下半部分为新添加的线划图，二者配准效果较好。
图6 校园地图与百度底图的融合
3.1.3 AJAX技术
AJAX(Asynchronous JavaScript and XML)是一种综合技术，通过XHTML和CSS对内容进行标准化呈现，借助DOM实现动态显示和交互，利用XML和XSTL进行数据交换与处理，使用XMLHttpRequest对象进行异步数据读取，采用Javascript绑定和处理数据。
传统Web应用采用同步交互过程，客户端向服务器发出请求，服务器返回一个HTML结果；用户的每次请求，服务器都会重新下载整个页面。遇到大数据量网站或带宽受限时，用户往往需要等待较长的响应时间。AJAX在不打断用户当前操作的情况下，进行客户端与服务器之间的数据传输，通过异步通信避免用户等待过程，可大大提高用户体验[10]。
在APS.NET开发中，通过ScriptManager来管理异步请求，用来实现页面的局部更新和对Web服务的调用等。利用RegisterClientScriptBlock()方法可以向 ScriptManager 控件注册一个客户端脚本块，以便和 UpdatePanel 控件中的某个控件一起使用，然后将该脚本块添加到页面中。例如，向页面加载地图平移并显示信息窗。
string js = "javascript:info1=new BMap.InfoWindow(" + si + ");";
js += "map1.openInfoWindow(info1," + "new BMap.Point(" + x + "," + y + "));";
js += "map1.panTo(new BMap.Point(" + x + "," + y + "));"; //将地物平移到视野中央
ScriptManager.RegisterClientScriptBlock(UP_List, typeof(UpdatePanel), "A", js, true);
这样通过回调读取数据，进行地图的平移和信息显示，完成后端代码与前端代码的交互。基于AJAX的地物查询显示过程如下：
1)用户输入查询关键词并点击搜索按钮， 客户端产生一个包含关键词的异步请求。
2)服务器根据该关键词检索本地数据库，并将其坐标返回给客户端。
3)客户端根据坐标平移地图并显示其信息。
3.2 主要功能实现
本文以河南理工大学为例，将ASP.net网络开发与Javascript客户端脚本调用相结合，使用百度地图API进行校园在线电子地图设计与开发。
3.2.1 系统的主界面图
本系统面向校园用户提供动态、交互式小型电子地图系统，主界面(见图7)包括:标题区、鹰眼区、地图显示区、专题列表查询区以及工具条等。其中校园范围的电子地图底图由河南理工大学最新校园地图经栅格化、分级切片后叠置到百度地图框架生成。
3.2.2 地图查询定位功能
通过使用百度地图API自带的本地搜索服务以及校园专题数据库实现分类查看、输入查询等快速定位功能，如图8所示。
3.2.3 信息窗显示属性信息
将兴趣点相关的文字和多媒体信息，通过信息窗口进行表达。信息窗口作为一种特殊的覆盖物叠加到地图，如图9所示。
图7 系统主界面
图8 地物的快速定位
图9 地物的属性信息显示
3.2.4 测距功能
用鼠标在地图上绘制任意的折线，结束后便可测量出起止间的距离，如图10所示。
图10 测距功能
3.2.5 其他辅助功能
系统还可实现地图输出、添加自定义标签等功能。用户根据自己需要标注信息，丰富信息来源，如图11所示。
图11 自定义标注功能
4 结 论
基于地图API进行校园电子地图的设计与开发，充分利用地图搜索引擎提供的地图服务和基本功能，结合自主建设的校园专题数据库，实现地图显示查看、测距、地物快速定位等功能，满足用户对校园基础信息的浏览和查询需求。实践证明，利用地图API开发局域范围的公益性在线电子地图服务系统，具有开放性、低成本、技术门槛低、易于进行个性化定制、无需安装插件等技术优势，为地理信息服务与专业领域融合及走向公众奠定基础，具有广阔的应用前景。
[1]吕红霞.网络环境下校园数字地图的组织和发布[J].科技创新导报,2009(1):26.
[2]姚高伟,潘晓芳.基于GIS的校园电子地图研究与实现[J].信息系统工程,2011(8):41-42.
[3]刘有力,罗海驰,钱雪忠，等.基于MapGuide的校园电子地图应用平台的设计与实现[J].北京测绘,2011(4):52-54.
[4]徐胜祥,许运清.利用ArcIMS开发校园网络电子地图发布系统[J].计算机与数字工程,2008,36(1):117-119.
[5]杜传明.百度地图API 在小型地理信息系统中的应用[J].测绘与空间地理信息,2011,34(2):152-154.
[6]吴肖,彭璇,朱明磊.基于Google Map API的校园电子地图开发[J].测绘工程,2010,19(3):35-38.
[7]任建华,汪赫瑜.基于XML的数据在数据库中的存取技术[J].信息技术,2004,28(7):82-85.
[8]冉春玉,王洪成,李芳.ASP.NET技术及其在网站开发中的应用[J].武汉理工大学学报:信息与管理工程版,2002,24(3):70-73.
[9]刘冰,谢轲.基于GIS的瓦片式地图切图算法的设计与实现[J].科技信息,2011(7):60-61.
[10]毛耘喆,於新国,徐汉卿.Ajax技术在湖北省动态电子地图网站中的应用[J].测绘通报,2009(8):64-66.
[责任编辑：张德福]
《测绘工程》变为月刊公告
为适应期刊发展的需要，满足广大读作者关于加快刊载周期、提高传播信息时效性的迫切愿望，更好地发挥期刊的作用，《测绘工程》经黑龙江省新闻出版局批准，自2014年1月起由双月刊更改为月刊，每月底出版。《测绘工程》由黑龙江工程学院和中国测绘学会联合主办，是面向国内外公开发行的测绘类科技期刊，是中国科学引文数据库(CSCD)收录期刊和中国科技核心期刊。在2007年和2012年连续两届测绘优秀期刊评选中获得优秀测绘期刊奖。本刊坚持“及时、高效、规范”办刊，恪守“质量第一、学术至上”的办刊思想，坚持人性化办刊，审稿周期短，来稿必复。改为月刊后，刊载量将显著增大，发表将更迅捷。欢迎投稿，欢迎订阅。垂询电话：0451-88028906/88028496，投稿邮箱：chgc2008@vip.163.com.
《测绘工程》编辑部
DesignandimplementationofcampusonlineelectronicmapbasedonMapAPI
CHENG Gang1,2，LIANG Xiao-li1,2，ZHANG De-qun2，CAI Sheng-zhun2
(1.Key Lab of Mine Spatial Information Technology, National Administration of Surveying, Mapping and Geoinformation, He’nan Polytechnic University, Jiaozuo 454000, China; 2.School of Surveying and Land Information Engineering, He’nan Polytechnic University,Jiaozuo 454000,China)
The construction of University Town and the expansion of campus scale bring some troubles to many teachers,students and visitors. The campus electronic map provides the function of geographic reference and navigation for teachers and students, and shows basic geographical frame for digital development of campus. The current main GIS platforms are expensive and need high technical requirements for developers. Based on API a study is made on the design and development of campus online electronic map and on the key technology of the combination of Map API and third party data. Taking the online electronic map of He’nan Polytechnic University as the example, it verifies the relevant technology and the feasibility of this method.
Map API; campus;online electronic map; design;develop
2013-03-14
国家自然科学基金资助项目(41001226);河南省高等学校骨干教师资助计划(2012GGJS-055);河南省教育厅自然科学研究计划项目(2010B170006); 矿山空间信息技术国家测绘地理信息局重点实验室开放基金(KLM201202)； 河南理工大学博士基金(B2010-9)
程 钢(1981-)，男，副教授，博士.
TP208
：A
：1006-7949(2014)01-0005-07
