基于百度地图API的空气质量指数发布系统的实现

马 瑞

(中国电子科技集团公司第三十三研究所，山西 太原 030006)

基于百度地图API的空气质量指数发布系统的实现

马 瑞

(中国电子科技集团公司第三十三研究所，山西 太原 030006)

本文以太原地区空气质量日报数据为基础，采用Asp.net、JavaScript以及SQL Server 等技术手段实现了基于百度地图API的空气质量指数发布系统。该系统采用B/S结构，不仅提供了电子地图的基本功能，而且利用百度地图API提供的区域着色功能对每一个县区进行着色。系统界面清晰直观，用户可以通过互联网来进行访问，为公众提供环境空气质量的日报信息。

百度地图API；GIS；空气质量指数

随着信息技术和网络技术的飞速发展，地理信息技术也得到了发展和应用，且在国土资源、环境保护以及公共安全等领域的作用也日渐突出。目前，国内的很多GIS应用都基于诸如SuperMap、ArcGIS等较为成熟的GIS平台软件，这些平台软件虽然技术成熟，但是建设周期长，实施过程复杂，而且购买以及维护成本很高。

本文介绍的空气质量指数发布系统基于开放的百度地图服务，并利用百度地图API进行二次开发，实现了一个能够依据标准[1]对各行政区域进行着色，且更为直观的空气质量指数发布系统。

1 百度地图API

百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口，通过地图服务应用接口将应用开发平台和地理信息数据捆绑，将复杂的地理信息系统底层进行封装，使用者可不必了解它的技术细节就能在应用中快速构建基础地图，并帮助使用者在Web系统中构建功能丰富、交互性强的地图应用程序。百度地图API不仅包含构建电子地图的基本功能接口，还提供了位置标注、专题图、区域着色、轨迹跟踪等扩展性功能服务，从地图数据共享和功能共享两方面简化了GIS应用，而且通过网页脚本语言就可以将地图服务嵌入到Web系统中。

2 系统架构与实现

2.1 系统体系结构

本系统采用B/S结构，系统结构如图1[2]所示，用户通过本地浏览器即可访问该系统。Web服务器负责处理用户的访问请求，完成和业务数据库、百度地图服务的交互，服务端程序采用Asp.net技术和C#语言进行开发；业务数据库采用Sql Server数据库管理系统存储和管理；百度地图服务通过百度地图JavaScript API来实现。

图1 系统结构

2.2 地图实现

百度地图API采用JavaScript将百度地图嵌入到应用系统中，地图数据和地图服务的加载采用以下几个步骤：

1) 加载地图

通过下面的JavaScript引用载入百度地图API，如下所示，本项目采用1.4版本[3]。

创建div容器来存放引入的地图，并设置容器的样式。

声明一个地图实例，以太原地区地理坐标(112.556 198，37.870277)为中心，默认为第10级。

var map = new BMap.Map(″map″);

map.centerAndZoom(new BMap.Point

(112.556198, 37.870277),10);

2) 设置电子地图基本操作

◇ 设置导航控件，可以对地图进行缩放和平移

map.addControl(new BMap.NavigationControl());

◇ 设置鹰眼控件，可以显示当前地图缩略图

map.addControl(new BMap.OverviewMapControl());

◇ 设置比例尺控件，以及该控件在地图上的位置

map.addControl(new BMap.ScaleControl());

map.addControl(new BMap.ScaleControl({off-set: new BMap.Size(1, 33),anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));

◇ 设置地图类型控件，可以在平面矢量图、卫星影像图以及三维地图三种类型间切换

map.addControl(new BMap.MapTypeControl());

◇ 设置鼠标滚轮缩放功能

map.enableScrollWheelZoom();

3) 区域着色

利用百度地图API中提供的方法getBoundary()获取行政区域并对该区域着色。

◇ 获取数据：利用Ajax技术以异步的方式从服务端获取各行政区空气质量指数日报数据。

var htmlobj = $.ajax({ type: ″post″, url: ″ajax.asp″, async: true }); var info = htmlobj.responseText;

◇ 区域着色：根据《环境空气质量指数(AQI)技术规定 (HJ633-2012)》[1]，对获取到的数据进行地图呈现，采用方法getBoundary()进行区域着色，效果如图2所示。

getBoundary(″小店区″,″#badcff″);

3 总结

本文阐述了基于百度地图API的空气质量指数发布系统的设计与实现，该系统在服务端采用Asp.net技术获取空气质量日报数据，在客户端利用百度地图API实现了太原地区十县区空气质量日报指数的区域着色呈现，界面简洁直观，能更加有效地向公众展示空气质量的状况。

[1] 环境保护部.HJ 633-2012.环境空气质量指数(AQI)技术规定(试行)[S].北京：中国环境科学出版社，2012.

[2] 杜传明.百度地图API在小型地理信息系统中的应用[J].测绘与空间地理信息，2011，(2):152-153.

[3] 百度地图开放平台[OL].2010-04-23[2016-12-20].http://lbsyun.baidu.com/index.php?title=jspopular,JavaScript API

[4] 白学文，杨红，杨韬.基于百度地图API发布乡镇精细化天气预报[J].云南科技管理，2012(1):46-48.

Implementation of Air Quality Index Publish System Based on Baidu Map API

Ma Rui

(No.33ResearchInstituteofChinaElectronicsTechnologyGroupCorporation,TaiyuanShanxi030006,China)

In this paper, air quality index publish system is implemented based on Baidu Map API with using Asp.net, JavaScript and SQL Server technologies. The system which adopts B/S structure not only provides basic functions of electronic map, also puts colors on each of districts by using Baidu Map API. The system which is accessed through internet also has a convenient and intuitive interface, and provides information on Daily Report of Air Quality for the public.

Baidu Map API; GIS; air quality index

2016-12-30

马 瑞(1981- )，男，工程师，研究方向：GIS。

1674- 4578(2017)02- 0056- 03

TP311.52

A