用html设计一个疫情网页代码第35卷第2期2021 年2 月
北京测绘
BeijingSurveyingand Mapping
Vol. 35 No. 2February2021
引文格式：
蔡磊，张冲，刘永轩，等•北京市新冠肺炎疫情信息平台的设计与实现北京测绘，2021,35()270274.
DOI ：10. 19580/j. cnki. 1007-3000. 2021. 02. 028
北京市新冠肺炎疫情信息平台的设计与实现
蔡 磊12张 冲12刘永轩12张宏年12吴 飞12杨川石12
(1.北京市测绘设计研究院，北京100038； 2.城市空间信息工程北京市重点实验室，北京100038)
［摘 要
］ 基于SuperMap iServer 平台和天地图底图服务，建立北京市新冠肺炎疫情信息平台，通过将
疫情信息细化到街道、乡、镇级别，实现了北京市疫情中高风险地区图、各区无新增病例分布图、各区累计本 地确诊病例分布图、确诊病例市场分布图和核酸检测机构分布图等五类专题的查询和展示。通过建立每日
更新的机制，及时向社会公众发布疫情信息，为疫情防控决策提供了参考和支持。
［关键词
］SuperMap iServer ；天地图；新冠肺炎疫情；疫情地图；WebGIS
［中图分类号］P208 ［文献标识码］A ［文章编号］1007-3000(2021)02-0270-05
0 引言
新型冠状病毒肺炎是近百年来人类遭遇的 影响范围最广的全球性大流行病，对全世界是一 次严重危机和严峻考验。人类生命安全和健康
面临重大威胁［1］。北京市自2020年6月11日0 时
〜7月5日24时，累计报告本地确诊病例335
例［］，首都疫情防控形势严峻。
在突发公共卫生事件中，疫情的实时数据对 政府与公共机构具有重要的意义，政府与公共机 构借助疫情的实时数据进行解读等活动，民众可
以借助数据展开自我防护工作［］。因此，在疫情 期间及时通过信息化的手段来发布疫情信息，对 疫情防控工作有着至关重要的作用。
当前，全国各大媒体平台对新冠肺炎疫情进
行了各种形式的信息发布，如以文本通报形式的
国家卫健委的每日疫情通报⑷；以可交互式疫情 地图形式发布的百度疫情实时大数据报告地
图［］、丁香园• 丁香医生疫情实时动态地图［］“
腾讯新闻疫情实时追踪地图［7］等；还有以小程序
形式发布的国务院客户端小程序［］、北京“健康 宝”小程序9等。但从整体来看，网络平台的疫 情实
时地图报告或大数据报告形式基本一致，在 中国地图上，以不同深浅的红表示各省疫情的
［收稿日期
］2020-08-29
［基金项目］国家重点研发计划(2016YFF0201300)
［作者简介］E-mail ： leicai @126. com
蔡磊(1981—)，男，湖北潜江人，博士，高级工程师，从事地图制图和地理信息系统研发工作。
轻重。同时，配以文本表格罗列具体的感染人 数［］。在选择各省市查看疫情信息时，只能细化到 该省市的下一级行政区，即地级行政区。以北京市 为例，能查看到的最详细一级的疫情信息是以东 城、西城、朝阳、丰台、石景山、海淀、门头沟、房山、
通州、顺义、昌平、大兴、怀柔、平谷、密云、延庆等
16个区为单位的疫情信息，如各区的确诊病例数、 各区的无新增病例的天数等，却无法查询自己所在 街道、乡、镇的疫情信息，疫情信息的颗粒度较粗,
对于公众了解自身周边的疫情动态和采用相应的 防护措施产生了不同程度的影响。
因此，本文通过将疫情信息的颗粒度细化到
街道乡镇级别，并基于SuperMap iServer 平台搭 建了北京市新冠肺炎疫情信息平台，发布疫情信 息专题服务，在Web 前端与“天地图”平台的在线
地图服务进行集成，实现了细化到街道、乡、镇的 疫情信息查询展示功能，及时向社会公众进行发
布，为疫情防控决策提供了参考和支持。
1相关技术平台
1.1 “天地图”平台
“天地图”是国家测绘地理信息局(现国家自 然资源部)主导建设的国家地理信息公共服务平 台，它是“数字中国”的重要组成部分。天地图于
第35卷第2期蔡磊，张冲，刘永轩，等.北京市新冠肺炎疫情信息平台的设计与实现271
2011年发布，它的目的在于促进地理信息资源共享和高效利用，提高测绘地理信息公共服务能力和水
平，改进测绘地理信息成果的服务方式，更好地满足国家信息化建设的需要，为社会公众的工作和生活提供方便［1011］。自2017年7月1日起施行的《中华人民共和国测绘法》［12］第四十条和自2016年1月1日起施行的《地图管理条例》［13］第六条都明确规定：通过地理信息公共服务平台向社会提供地理信息公共服务，实现地理信息数据开放共享。因此，“天地图”是社会公众获取测绘地理信息资源官方、正规、合法的有效平台。
本文通过调用天地图平台的在线地图服务，包括矢量底图/注记、影像底图/注记作为北京市新冠肺炎疫情信息平台的基础底图。
1.2SuperMap iServer服务发布平台
SuperMap iServer是北京超图软件股份有限公司基于Jakarta EE平台和SuperMap Objects Java构建的面向服务式架构的企业级地理信息系统(Geographic Information System,GIS)产品，它以面向服务的组件形式将GIS功能部署在服务器上。能够管理、发布和无缝聚合多源服务，包括表述性状态迁(Representational State Transfer, REST)服务、开放地理空间信息联盟(Open Geospatial Consortium,OGC)服务、网络地图服务(Web Map Service,WMS)、网络地图瓦片服务(Web Ma p Tile Service,WMTS).网络要素服务(Web Feature Service,WFS)网络覆盖服务(Web Coverage Service,WCS)、网络地理信息处理服务(Web Processing Service,WPS).网络目录服务(Catalogue Ser
vice for the Web,CSW)等。作为一款服务式GIS产品，能全面地支持面向服务的架构(Service-Oriented Architecture,SOA)通过对多种SOA实践标准与空间信息服务标准的支持，可以使用于各种SOA架构体系中，与其他IT业务系统进行无缝的异构集成，从而可以更容易地让应用开发者快速构建敏捷的应用系统［14］。
1.3SuperMap^Client客户端开发平台
SuperMap Client是空间信息和服务的可视化交互开发平台，是SuperMap服务器系列产品的统一客户端。产品基于统一的架构体系，面向Web 端和移动端提供了多种类型的软件开发工具包(Software Development Kit,SDK、开发包，支持JavaScript.Flash.Silverlight.Android、iOS等多种语言平台，帮助用户快速构建网络富客户端和轻量级移动端GIS应用［15］。目前，SuperMap Client客户端开发平台已在多个行业得到了应用［1618］。
北京市新冠肺炎疫情信息平台是“天地图・北京”［19］的子栏目，基于B/S(浏览器/服务器模式，Browser/Server)架构进行搭建，用户以浏览器的形式与平台进行交互，因此平台开发选取SuperMap iClient JavaScript开发包，利用其圭寸装好的API实现地图服务调用、图层叠加、疫情信息展示等相关功能。
2平台设计与实现
2.1平台总体架构
北京市新冠肺炎疫情信息平台作为“天地图・北京”的子栏目，是一个B/S架构的WebGIS 平台。最大的需求是在Web前端集成天地图的在线地图服务，并展示SuperMap iServer发布的疫情信息专题图层。为了更好地将数据专题和Web前端表现进行区分，我们在二者中间加入了逻辑层，对二者进行更好的组织，因此，我们将平台的总体架构分为数据层、逻辑层和表现层，如图1所示。
表
数
据
层
►用户Web浏览
北京市新冠肺炎疫情信息
f平台(天地图•北京子栏目)
逻
辑
SuperMap iClient JavaScript◄—疫情信息Rest服务
t t
层
调用天地图在线地图服务SuperMap iServer
______________4______________♦__
图1北京市新冠肺炎疫情信息平台总体架构
C N Internet
天地图的底图疫情信息
服务图层专题图层
数据层以Oracle关系型数据库为存储容器，通过SuperMap SDX+空间数据库引擎［0］建立空间数据库，实现疫情信息的空间和属性数据的一体化存储，便于疫情信息专题图层的维护和管理，为查询、统计、分析提供数据支持。
逻辑层以SuperMap iServer为容器，对天地图的在线地图服务和基于iServer发布的疫情信
272北京测绘第35卷第2期
息Rest服务进行集成，同时接受Web端用户的
浏览或查询请求，建立与数据库连接的通道，向
Web端反馈处理结果。
表现层是在Web端调用天地图的在线地图
服务，叠加北京市中高风险地区、各区无新增病
例天数、各区累计本地确诊病例人数、确诊病例
市场和核酸检测机构等五类疫情相关信息进行
查询和展示，使社会公众能够借助“天地图・北
京”互联网平台了解北京市新冠肺炎疫情的具体
情况。
2.2疫情信息专题数据及更新机制
疫情信息专题数据是公众最为关心的内容,
因此根据社会公众对疫情信息了解的需求，并结
合北京市新冠肺炎疫情数据的实际情况，平台将
疫情信息分为北京市中高风险地区（街乡镇级）
各区无新增病例天数、各区累计本地确诊病例人
数、确诊病例市场和核酸检测机构等五类，具体
数据的内容和形式见表1o
表1疫情信息专题数据的内容和形式
疫情信息专题数据名称疫情信息专题
数据内容
数据形式
北京市中高细化到街道、乡、镇面数据
风险地区的中、高风险地区
各区无新增以区为单位统计的
面数据
病例天数无新增病例的天数
各区累计本以区为单位统计的
地确诊病例累计本地确诊病例面数据
人数人数
确诊病例发生确诊病例的菜点数据（带名市场市场称、地址属性）
核酸检测机构北京市卫健委公布点数据（带名的可提供核酸检测称、地址、电话服务的机构属性）
在数据加工工作中，我们对平台里的疫情数据分为空间数据和属性数据两类进行更新。北京市中高风险地区对应的空间数据为全市333个街乡镇，属性数据为333个街乡镇对应的高、中、低风险级别；各区无新增病例天数、各区累计本地确诊病例人数对应的空间数据为全市的16个区，对应的属性数据为以区为单元的各区无新增病例天数和各区累计本地确诊病例人数；确诊病例市场和核酸检测机构对应的空间信息为空间点数据，确诊病例市场空间点对应其名称、地址，核酸检测机构空间点对应其名称、地址、电话等属性信息。对于前三类数据仅需对其属性信息进行修改，而后两类则需根据需要同时进行修改。空间数据和属性数据编辑完成后经过两级检查的质量控制后，由SuperMap iSever进行服务发布和管理，以天为更新周期。
2.3平台功能设计
北京市新冠肺炎疫情信息平台的功能设计，实际上是对平台Web前端的功能进行设计。平台面向的对象是公众，基于易用性原则，我们将平台功能分为基础的地图浏览模块和核心的疫情专题查询展示模
块，具体如图2所示。地图浏览模块实现WebGIS基本的地图浏览、缩放、切换等功能。疫情专题查询展示模块针对5类疫情信息进行查询展示，形成5张专题信息图层，它们是北京市中高风险地区图、各区无新增病例分布图、各区累计本地确诊病例分布图、确诊病例市场分布图、核酸检测机构分布图。它们能随比例尺的缩放进行不同详尽程度的展示。以上5类疫情专题信息保持每日更新，其中，高、中风险地区信息来源于国务院疫情风险等级查询客户端小程序，各区无新增病例数、各区累计本地确诊病例数、确诊病例市场和核酸检测机构等信息均来源于北京市卫生健康委员会。
|北京市新冠肺炎疫情信息平台］
地图浏览
p
专
题
切
换
士
底
图
切
1^
I
£
地
图
缩
放
疫情专题查询展示
丄丄丄
北
京
市
中
高
风
险
地
区
图
各
区
无
新
增
病
例
分
布
图
各
区
累
计
本
地
确
诊
病
例
分
布
图
确
诊
病
例
市
场
分
布
图
核
酸
检
测
机
构
分
布
图
图2北京市新冠肺炎疫情信息平台功能
3平台功能实现
本平台以Eclipse为集成开发环境，采用JavaScript脚本语言进行编程。开发完成了北京市新冠肺炎疫情信息平台，包括地图浏览模块、
第35卷第2期蔡磊，张冲，刘永轩，等.北京市新冠肺炎疫情信息平台的设计与实现273
疫情专题查询展示模块两部分。地图浏览模块实现了基本地图浏览功能，如平移、缩放、矢量底图和影像底图的切换等。疫情专题查询展示模块实现了街乡镇级的北京市中高风险地区图、各区无新增病例分布图、各区累计本地确诊病例分布图、确诊病例市场分布图（图3）、核酸检测机构分布图（图4）等5类专题图层的展示。
图3确诊病例市场分布图（局部）
图4核酸检测机构分布图（局部）
4结束语
本文基于SuperMap iServer平台和天地图的在线地图服务搭建了北京市新冠肺炎疫情信息平台，实现了细化到街乡镇级的北京市中高风险地区图、各区无新增病例分布图、各区累计本地确诊病例分布图、确诊病例市场分布图、核酸检测机构分布图等5类疫情专题查询信息的展示。通过建立每日更新的机制，及时向社会公众发布疫情信息。其中，细化到街道、乡、镇的中高风险地区范围图，被新华网
采用发布了四期北京市中高风险地区地图（街乡镇图），全网阅读量高达2300万人次，受到了极大的关注。下一步工作中，需继续细化疫情信息展示的颗粒度，如中、高风险地区可进一步细化到社区“村级；确诊病例可细化到病人的居住小区；还应加入流调数据进行时空展示等。希望通过不断地改进，该平台能对北京市的疫情防控工作发挥更大的作用。
参考文献
中华人民共和国国务院新闻办公室•《抗击新冠肺炎疫情的中国行动》白皮书:EB/OL].(2020-06-07)[2020-07-07].http：
〃v/ztk/dtzt/42313/43142/index.htm.
北京市卫生健康委•北京昨日新增报告1例新冠肺炎确诊病例治愈出院1例[EB/OL].(2020-07-06)2020-07-07].http:〃wjw.
孙凤临•疫情地图实时报告的数据可视化设计:J].青年记者,2020(5)60-61.
中华人民共和国国家卫生健康委员会•疫情通报:EB/OL].
(020-07-07)[2020-07-07].http：〃v/xcs/ xxgzbd/gzbd_index.shtml.
百度.新型冠状病毒肺炎疫情地图:EB/OL].(2020-07-07) [2020-07-07].https：
〃voice.baidu/act/newpneumo-nia/newpneumonia?.
丁香园•全球新冠病毒最新实时疫情地图:EB/OL].(202007-07)[2020-07-07].https：
〃ncov.dxy/ncovh5/view/ pneumonia?from=singlemessage&-isappinstalled=0. [7]腾讯新闻.新型冠状病毒肺炎疫情实时追踪[EB/OL]
(2020-07-07)[2020-07-07].https：
〃news.qq/zt2020/ page/feiyan.htm井/global.
中国政府网.国务院客户端小程序:EB/OL].(2020-07-07) [2020-07-07].http：
〃v/guowuyuan/gwykhdx-cx/xiaochengxu.html.
北京市人民政府•北京“健康宝”使用指南:EB/OL].(202007-07)[2020-07-07].http：
〃v/fuwu/ bmfw/bmzt/bjjkb/.
[0]黄蔚.国家地理信息公共服务平台天地图:J]卫星应用,
2014(1)41-44.
[1]蒋捷，吴华意，黄蔚.国家地理信息公共服务平台“天地图”
的关键技术与工程实践:J].测绘学报,2017,46(10)：1665-1671
[12]中华人民共和国自然资源部.中华人民共和国测绘法:EB/
OL].(2017-04-27)[2020-07-07].http：
〃v/ 201704/t20170428_1506260.html.
[3]中华人民共和国自然资源部.地图管理条例[EB/OL]
(015-12-14)[2020-07-07].http：〃v/201806/ t20180612_1792873.html.
[14]超图软件.SuperMap iServer联机帮助[EB/OL].(2020-01
01)[2020-07-07].http：
〃support.supermap/ DataWarehouse/WebDocHelp/iServer/index.htm. [15]超图软件.SuperMap Client8C(017)[EB/OL](2017-01
01))2020-07-07].https：
〃www.supermap/cn/xhtml/ SuperMap-iClient-8C-2017.html.
[16]汪秀兵，张广弟，耿衬.基于SuperMap Server的赣州市旅
游信息服务发布研究测绘标准化,2012,28()
2528.
274北京测绘第35卷第2期
[17]杨琳珩，黄耀裔.基于SuperMap iServer的福建省统计信息
系统设计[]•测绘与空间地理信息,017,0(2):87-89,4.
[18]丁娟，于书媛，王义.基于SuperMap的全国GIS高校信息查
询系统设计与实现[]•电脑编程技巧与维护,019(2) =89-91，99[19]天地图.北京市地理信息公共服务平台:EB/OL].(2020-01
01))2020-07-07].http：〃v/. [0]超超图软件.SuperMap SDX+空间数据库引擎:EB/OL].
(2020-01-01)[2020-07-07].https:〃www.supermap/ xhtml/SuperMap-SDX.html.
Design and Implementation of the Beijing COVID-19Information Platform
CAI Lei1'2,ZHANG Chong12,LIU Yongxuan1，,ZHANG Hongnian1，,
WU Fei1'2,YANG Chuanshi1'2
(1.Beijing Institute of Surveying and Mapping,Beijing100038,China；
2.Beijing Key Laboratory of Urban Spatial Information Engineering,Beijing100038,China) Abstract:The Beijing COVID-19information platform was established based on the SuperMap iServer platform and the Map Worldbase maps.Throughrefiningtheepidemicareastothestreetandtownshiplevel，wedevelopedthe
queryanddisplayofthematicinformation，suchasthemedium-highriskepidemicareasinBeijing，thedaysofnonew casesineach district，the distribution ofaccumulatedlocalconfirmed casesin each district，theconfirmed cases marketsandthenucleicacidtestinginstitutionsinBeijing.Throughtheestablishmentofdailyupdatemechanism，the epidemicinformationwasreleasedtothepublicintime，whichprovidedreferenceandsupportforthedecision-making ofepidemicpreventionandcontrol.
Keywords：SuperMapiServer；Map World；COVID-19information；epidemicmap；WebGIS
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论