基于电子地图的体育场馆及周边宾馆接待能力的可视化系统设计

张峰筠，赵 靓，冯 璠

基于电子地图的体育场馆及周边宾馆接待能力的可视化系统设计

张峰筠1，赵 靓2，冯 璠1

通过对体育场馆设施、周边宾馆及宾馆的接待能力的调查与分析，利用Google Maps API进行基于电子地图的体育场馆及周边宾馆接待能力的可视化系统设计，在设计的系统中嵌入Google Maps，并在地图上叠加自己的数据，实现体育场馆及周边宾馆数据的标注、展示、叠加及统计等功能。

电子地图；体育场馆；宾馆接待；可视化

1 研究的目的与意义

电子地图综合应用了数字制图技术、地理信息技术、多媒体技术和数据库技术，把各种媒体信息有机地联结在一起，从根本上改变了传统地图单一的信息传递形式[1]，是现代地图学发展方向，是数字制图成果的主要表达形式[2]，也是地图服务于社会经济的重要手段，电子地图的可视化效果是评价电子地图产品或者系统的一个重要方面[3]。

另一方面，体育场馆设施建设与接待条件是体育赛事项目资源条件的重要组成部分，是体育赛事申办可行性判断的重要标准之一。鉴于目前的电子地图大多针对商用或公共服务所设计，没有特定为体育场馆及其周边宾馆接待能力而开发的成熟系统。通过对体育场馆设施、周边宾馆及宾馆的接待能力的调查与分析，并通过可视化方法将其在电子地图系统中按需求进行查询与显示，可以将原先分散的数据与信息集中并直观地进行表达，提高系统的操作性，为管理者的决策提供更加科学、形象和直观的数据和信息，从而方便进一步对研究对象进行定性与定量的分析与研究[4]。

2 研究方法

以上海范围内11家大型体育场馆为主要研究对象，通过文献资料法结合网络查询来设计体育场馆与周边宾馆的数据结构，并对数据进行搜集与处理，构建相应数据库，利用Google Maps API进行基于电子地图的体育场馆及周边宾馆接待能力的可视化系统设计，在设计的系统中嵌入Google Maps，并在地图上叠加自己的数据，实现体育场馆及周边宾馆数据的标注、展示、叠加及统计等功能[5]。

3 研究结果

3.1 研究内容

（1）通过调查获取上海大型体育场馆的有关信息，并构建“上海大型体育场馆数据库”，以供场馆接待可视化系统的开发和查询使用。

（2）通过调查获取上海大型体育场馆周边宾馆接待能力及分布情况，构建相应数据库。

（3）对以上调查所得上海大型体育场馆分布情况与周边宾馆分布情况，利用Google Maps API技术在地图上进行标注，得到以场馆为中心的包括周边宾馆的位置分布图。

（4）对不同信息对象进行图层叠加，实现以场馆为中心按地理半径进行查询并分区显示其周边宾馆的位置分布与接待能力。

3.2 数据的处理

运用Google Maps API进行体育场地的标注，关键的核心技术是要将体育场地进行空间化，即找到各体育场地在地球上的具体位置，用经纬度来标记，因此，需对每条记录进行经纬度查询。3.3 功能分析与实现

3.3.1 功能描述

（1）分区选择体育场馆

在系统中体育场馆的选择分两步：①选择区域；②选择区域中的体育场馆，如图1。

图1 体育场馆的选择Figure 1 Selection of Sports Facilities

本系统初定上海范围内体育场馆11家，分布于杨浦区、虹口区、长宁区、宝山区、卢湾区、徐汇区、嘉定区、闵行区和浦东新区。

（2）按条件筛选体育场馆周边的宾馆

本系统可按“宾馆星级”与“周边范围”2个条件选择体育场馆周边的宾馆，如图2。

如图2所示，“宾馆星级”分为3星、4星和5星，可以多选；周边范围分为3 km、5 km和10 km，即可选择体育场馆周边3 km（5 km、10 km）内的3星级（4星级、5星级）宾馆，筛选结果如图3。

如图3所示，筛选结果以列表的形式、距离由近到远展现，每一行显示了2条宾馆信息，即宾馆名称和宾馆级别。

（3）体育场馆及宾馆的地图可视化

a.体育场馆的地图可视化，如图4。

图4 体育场馆地图可视化Figure 4 Visualization of the Maps of Sports Facilities

如图4所示，按区域选择体育场馆后，选择的体育场馆便可在地图中标注显示 ，单击地图中图标，便可显示场馆的基本信息、场地信息和周边交通信息。

b.周边宾馆的地图可视化，如图5。

按条件选择体育场馆周边宾馆后，筛选出的宾馆可按位置在地图中标注显示

如图5所示，由大到小的3个同心圆分别表示的是体育场馆周边范围的10 km、5 km和3 km；园内的小图标有3类：红色小图标代表的是5星级的宾馆、黄色小图标代表的是4星级的宾馆、绿色小图标代表的是3星级的宾馆。

（4）统计分析

如图6所示，统计分析中显示的是选定体育场馆周边10km（5 km、3 km）范围内3星级（4星级、5星级）宾馆的数目和房间总数。

3.3.2 实现方法

（1）数据库结构

本系统数据库创建有2张表，分别是场馆信息表（表1）和宾馆信息表（表2）。

表1 场馆信息（cgxx）表结构Table Ⅰ Information (cgxx) Table Composition of Sports Facilities

表2 宾馆信息（bgxx）表结构Table Ⅱ Information (bgxx) Table Composition of Hotels

（2）地图可视化的实现①Google Maps API 简介

Google Maps API 是一种通过JavaScript将Google地图嵌入到网页的API，现有多个版本，本系统用的是Google Maps API V2，使用之前需要申请一个Google MAP API的key。

②页面布局分析

在本系统中，页面使用的是div布局：a.用于装载查询条件的div：

b.用于装载体育场馆查询结果的div：

c.用于装载宾馆查询结果的div：

d.用于装载google地图的div：

利用document.getElementById(“.”) 可得到需要的div对象，有value和length等属性，例如，要想定位到地图

div，则代码为document.getElementById('map_canvas')。

③地图的载入

a.加载Google地图API：

b. 加载地图

④体育场馆、宾馆的标注

a.创建自定义图标

b.创建标记和信息窗口

⑤侧边栏的实现

（3）体育场馆的选择

“分区选择体育场馆”的实现是一个二级联动下拉框，即根据区域的选择动态赋予体育场馆下拉框的值。

（4）按条件筛选宾馆

a.周边范围（距离）的计算使用的公式

b.sql语句

[1]苏仰娜.基于Flash+XML的多媒体电子教学地图的设计[J].中国电化教育,2011,3(1):127.

[2]田景汉，尹振君.基于多媒体电子地图系统的实验室管理与教学[J].实验室科学,2011,14(2):146.

[3]张跃，谢超.电子地图可视化质量因素研究与实践[J].测绘科学,2011,2(4):146.

[4]赵靓.对上海市杨浦区体育场地信息平台及其空间分布的研究[D].上海：上海体育学院，2011.

[5]刘增宝.GIS 的空间关系表达及计算研究综述[J].电脑知识与技术,2009,5(2):462.

(责任编辑：陈建萍)

Design of a Visual System of Sports Facilities and Reception Capacity of the Surrounding Hotels Based on Electronic Map

ZHANG Feng-yun, ZHAO Jing, FENG Fan
(Shanghai University of Sport Events Research Center, Shanghai 200438, China)

Through the survey and analysis of the sports facilities and the surrounding hotels and hotel reception capacity, the author, using Google Maps API, designed a visual system of sports facilities and the surrounding hotel reception capacity based on electronic map. Google Maps were inserted into the system. New data were added to the Map so as to realize the functions of data tagging, display, addition and statistics of sports facilities and the reception capacity of the surrounding hotels.

electronic map; sports facilities; hotel reception; visualization

G80-05

A

1006-1207(2012)03-0067-03

2012-03-29

上海市科委科研项目（09490503200）

张峰筠，女，讲师。主要研究方向：体育信息管理.

1.上海体育学院 赛事研究中心，上海 200438；2. 上海威途体育咨询有限公司，上海 200438