基于WebGIS的医疗服务系统的研究与实现

汪玉笳 李功权 许林瑞 黄晟祺 曾嫒

摘要：为解决武汉市各医院数量多，规模大，种类杂，就医人数多，但医疗服务系统并不完善等问题，该系统基于Webgis，百度地图API结合Ajax、JQuery等技术实现武汉医疗服务可视化，为用户做交通流量图展示，提供关键字查询，针对不同种类医院做条件查询并分析，服务区查询，缓冲区查询，最短路径规划，并分别在地图上做出可视化展示，帮助用户更清晰直观了解武汉市各大医院位置特点以及优势所在，方便用户看病就医。

关键词：看病就医;百度地图API;Webgis;JQuery;Ajax;查询分析;路径规划

中图分类号：TP311      文献标识码：A

文章编号：1009-3044（2021）14-0007-04

1 背景

随着当今社会经济发展和生活水平的提高，越来越多居民注重自身身体健康以及当地医疗服务条件。随着地图应用的发展、互联网技术的提升，各种地图的衍生应用得到普及[1]，百度地图与高德地图API应用日益广泛，WebGis技术发展迅速，如今网络信息时代已然来临，数据获取方式多且丰富，面对海量数据，对于数据的存储与数据资源管理的需求在增加，应用部门所提出的要求也在增加，在存储与管理多源异构数据这一功能上，WebGis有着极大的优势，且其具有巨大挖掘信息化技术的潜能，在数据分析与可视化工作过程中，Web GIS都有着极为显著的作用，促进其发展进步 [2]，且Web GIS的体系结构具有开放性、互操作、可升级、可扩展性等特点[3]，基于WebGIS就医无忧系统是将地理位置与各大医院实际情况相结合起来进行可视化展示，在整个系统中对于地图的应用是必不可少的，通过地图可直观地展示各大医院所在的地理位置，以及所在医院周围的公共设施情况、医院的密集程度，所在地区交通流量、步行路经规划、驾车路径规划、公交线路查询等，提高用户体验感，故选择通过调用百度地图API所提供的地图应用开发接口，获取百度地图服务与数据，利用WebGis做空间分析，可视化展示来实现上述功能。

2 技术支持

2.1 Webgis技术

WebGIS是“Internet”与地理信息系统的结合，是最初原始的GIS在互联网上的繁衍和发展。即GIS（地理信息系统）以B/S方式将其所提供的功能供应给用户，用户通过网络浏览器即可方便快捷使用多种服务[4] ，可对空间数据进行检索、查询，并将结果制图输出，除此之外可在互联网上发布地理信息，将此信息共享以方便用户间的交流与合作。（在应用层面上，与本地GIS空间分析手段相比，基于互联网GIS服务进行可实现性研究省去了建立基础空间数据图层和众多参数的标定等繁杂工作，极大地简化了空间建模流程，降低了可实现性的应用门槛）[5]。

2.2 百度地图API技术

百度地图API是一套完整的应用程序接口，由JavaScript语言编写， 开发者通过在官网学习阅读开发文档可在网站中构建功能丰富、交互性强的地图应用，百度地图API既可提供PC端基于浏览器的地图應用开发，也支持移动端基于浏览器的地图应用开发[6]。用户可展示所在地区地图、搜索目标地物、定位自身地理位置、逆/地理编码、LBS云存储与检索等基本功能，除上述基本功能外，同时具有范围内服务区搜索、最短路径规划等数据服务。JS版本为用户开放了开源库，简化开发。百度地图服务具有多兴趣点（POI）数据这一大特点，拥有LBS云服务器，在一定程度上减轻了服务器端日益增长的海量位置数据的存储维护压力，且百度地图LBS云在位置数据的存储、检索方面具有极大的优势，使用十分方便，用户在百度开发者中心进行注册后，便可在百度LBS云管理后台，利用可视化的数据编辑工具，创建或修改所需要的数据库、数据表[7]。

2.3 JQuery技术

JQuery技术，本质上是JavaScript的一种，开发者使用封装在JavaScript中的功能代码，使用过程中不必将原封装代码一一列出，这种更为简单快捷的设计模式为开发带来很大的便利。它在DOM文本处理、动画效果设计、Ajax动态交互方面有较大的优势[8]。

2.4 Ajax技术

AJAX为“Asynchronous JavaScript XML”（异步的JavaScript与XML技术）的缩写， 是一种广泛应用在浏览器的网页开发技术.运用Ajax的最大优势，就是用户在执行下一步操作时不用刷新整个页面且能维护相应信息数据，从而使Web应用程序响应用户操作指令更为迅速敏捷，同时规避掉重复发送未改变信息这一问题[9]。

3 系统功能设计

该系统基于百度地图API的功能设计模块主要分为地图显示与交通流量图、查询分析、路径规划三大模块，其中查询分析模块由关键字查询、条件查询、服务区查询、缓冲区查询四类功能构成，路径规划由步行与乘车规划、公交线路查询两类功能构成，如图1所示。

3.1 地图显示与交通流量图

地图显示与交通流量图，即将研究区域进行可视化展示，并实时分析该区域交通流量情况。想要充分利用地图，首先应思考的是如何显示所需地区的地图，第一步是申请自己的密钥（ak）以获取开发者权益并且引入百度地图API文件，在此系统中选择以武汉市为例展示分析如何让用户更为快捷地查询所需医院信息以及获取其他服务。通过百度地图开发者工具中坐标拾取器，获取武汉地区的经纬度（114.293764，30.591504），结合“map.centerAndZoom（）”将地图进行初始化操作，设置中心位置经纬度坐标和地图层级，“map.enableScrollWheelZoom（ ）”开启鼠标滚轮缩，;“BMapGL.ZoomControl（）”创建缩放控件，结合“BMapGL.CityListControl（）”创建城市列表下拉菜单，使其具有城市列表菜单，根据用户选择的不同城市实现页面跳转。使用“map.setTrafficOn”添加交通流量图层，与传统的静态调查统计数据相比较， 在此功能模块中引入所在城市实时变化的动态城市路况数据，从而更加精确计算出各种交通出行方式所用时间[10]。图中各条线路的颜色即代表交通流量状态，绿色部分即代表道路较畅通，红色与黄色部分即道路较为拥堵。用户可根据交通拥堵情况选择出行时间，以最快速度到达目标医院，结果如图2所示。

3.2 查询与分析

3.2.1 关键字查询

关键字查询，即根据用户在搜索框中输入的关键字，在地图上进行查询分析，并将符合条件的地物标注出来。此系统利用百度地图API实现关键字查询，可通过代码直接绑定具体搜索内容的方式进行简单查询，首先在“myKeys”中选择以医院作为查询条件，利用“local.searchInBounds（ ）”功能，搜索查询到武汉所有医院，并以红色标记形式显示，单击mark可查看医院详细信息。为更方便用户体验，此页面提供搜索框，用户可根据需要在搜索框输入所需查询目标，如学校，医院，饭店等。利用“document.getElementById（' '）.value”获取搜索框中键入的文字内容，此时“mykey”具体值可由用户决定，进一步方便查询操作。如图3即在搜索框中输入医院后，地图上即显示武汉市所有医院具体位置及属性信息。

3.2.2 条件查询

条件查询，即用户根据需求，选择关键条件，系统筛查出不同种类等级的医院。通过选择科室如内科、消化内科，进一步选择医院等级，一甲、二甲、三级甲等确定筛选范围，使用 Ajax+JQuery+JSON技术通过后端传递的医院数据将其展示在地图上。其中存储按种类划分的医院数据经纬度及医院具体属性的JSON文件，JSON作为一种轻量级的数据交换格式， 方便开发者识别阅读及编写修改， 所存储数据体积容量小， 机器解析方便，网络传输便捷[11]，除此之外我们同时拥有百度地图强大的数据库功能，减轻了一大部分工作量。

3.2.3 服务区查询

服务区查询，即利用百度地图API查找周边公共设施，以所设置的某个点为圆心，选择设置查询条件如医院、学校、饭店等，即可出现在一定大小半径内所有符合条件的公众设施位置及属性信息，达到按需要查询相应公共设施的目的。

此功能利用监听事件，当某个事件被触发时，就会自动将相应的方法进行调用并对事件做出响应。每一个方法中的参数都是一个线程，地图事件是在子线程中完成响应，当点击地图时，点击事件会被触发，触发后监听事件函数方法中的子线程对象在传入相对应的参数后会被自动调用，并将点击相关的信息传入这个子线程中，比如点击获取该点经纬度等信息[12]，使用户点击图上任意一点并得到该点击位置经纬度，利用“var school= document.getElementById（'A'）”来确定用户所勾选的按钮，并返回按钮“value”值，通过“local.searchNearby”实现所点击位置的周围公共设施查询。在此功能中，查找视野范围内兴趣点的基本原理为：首先，对“LocalSearch”类进行实例化;然后， 在自定义的一个方法中调用实例化后的对象的“searchInBounds （）”方法。在服务区查询页面中通过多选框（选择学校，饭店，商场，酒店）与查询按钮的组合形式来呈现， 该服务区查询功能是为了用户可以在所在的地理区域内， 寻找有关联的其他兴趣点[13]，下图即选择学校作为缓冲区查询条件后，在默认半径为1000m的圆中所有学校位置及基本信息展示。

3.2.4 缓冲区查询

缓冲区查询，即用户确定所在位置后，输入缓冲半径，系统筛查出在缓冲区内所有医院及属性信息。为实现此功能首先向地图添加监听事件，通过点击地图获取所在地点经纬度，并以此点为圆心，通过“document.getElementById（'value'）.value”自定义缓冲区半径，“local.searchNearby（'医院'，pointt，R）”实现缓冲区内所有医院检索，用户可根据自身所在的地理位置，查询交通最方便的医院。图6即当设置缓冲区半径为1000米是该区域所有医院位置及属性。

3.3 路径规划

3.3.1 步行与乘车路径规划

步行与乘车路径规划，即根据用户出发地与目的地自动查询出最短路径并规划。使用“walking.search（" "， " "）”，“driving.search（）”等属性功能，在搜索框输入起点与终点位置名称查询从起点到终点的驾车路线，可选择不同查询关键词选择不同的起点和终点。查询后可出现总距离、所需时间与每一步路程导航。同时通过对地图添加监听事件，通过点击起始点具体位置实现步行路径自动生成。

3.3.2 公交线路查询

公交线路查询，即按需为用户筛选出公交线路途径、运营时间、所属公司。使用“busline.getBusList（）”，获取所需要搜索查询的公交线路信息列表。使用“busSearch（）”，获取该公交线路具体经过站台信息如图所示。可切换公交线路，查看所属公司和首末车工作时间。

4 结束语

通过Webgis，百度地图API，JQuery，Ajax等技术，分别做地图与交通图展示、查询分析、充分展示武汉各大医院地理位置、各大特色，为用户提供关键字查询，条件查询，服务区查询，缓冲区查询，路径规划等，通过用户所选择的医院医疗条件，进行医院信息展示，以便用户快速精确找到合适的医院，为用户生活提供便利。

参考文献：

[1] 刘荣，袁嵩，金鸣.基于Android平台的代买代送系统的设计与实现[J].电脑知识与技术，2018，14（13）：81-84.

[2] 邵志伟.WebGIS应用现状及发展趋势[J].化工管理，2017（18）：81.

[3] 胡勇，李德平，余满山，等.基于WebGIS的精细化格点预报可视化设计与实现[J].测绘与空间地理信息，2019，42（5）：163-165.

[4] 许开行，张洪吉，谭小琴，等.结合三维实景VR的科普基地WebGIS研究与应用[J].科技创新与应用，2019（35）：183-184.

[5] 高胜国，张兵.基于WebGIS服务的枢纽机场综合交通可达性研究[J].测绘地理信息：1-7.

[6] 夏军.基于百度地图API的快速制图系统的设计与实现[J].测绘工程，2019，28（4）：42-48.

[7] 罗丹.基于Android平台的移动社交地图设计与实现[J].北京测绘，2020，34（11）：1578-1582.

[8] 劉鹏飞，杨周胜，粟毅，等.基于百度地图的台站数据服务系统的设计与实现[J].四川地震，2020（2）：30-34.

[9] 李志秀，张军，陈光，等.JQuery Ajax异步处理JSON数据在项目管理系统中的应用[J].云南大学学报（自然科学版），2011，33（S2）：247-250.

[10] 康浩，曹雄赳，张帅，等.利用百度API数据对居民出行调查的修正与挖掘[J].交通与运输，2019，35（2）：23-27.

[11] 陈利婷.基于App Inventor的天气预报系统的设计与实现[J].电脑知识与技术，2019，15（11）：81-82，88.

[12] 邱龙龙，牛强，陈云飞，等.基于百度地图API的智能停车SDK的设计与实现[J].信息与电脑（理论版），2020，32（15）：91-93.

[13] 朱峰，赵婷婷.基于百度地图API的网点成图平台的开发与应用[J].测绘地理信息，2019，44（1）：121-123，126.

【通联编辑：谢媛媛】