自己做一个简单的新冠肺炎患者时空轨迹可视化页面

一、背景及技术流程

该部分内容为我一门课程的作业，和现在社会上的先进方法来比，要差很多，不过这是我个人探索做出来的，和大家分享，帮助那些学些WEBGIS的小白初步了解。

二、使用的语言、工具

主要为与地图设计相关的百度地图API和与网络页面和结构设计的HTML、CSS等

• JavaScript
  简称“JS”， 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
• 层叠样式表（CSS）
  英文全称：Cascading Style Sheets，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
  CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
• 百度地图API开放平台
  百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口，包括JavaScript API、Web服务API、Android SDK、iOS SDK、定位SDK、车联网API、LBS云等多种开发工具与服务，提供基本地图展现、搜索、定位、逆/地理编码、路线规划、LBS云存储与检索等功能，适用于PC端、移动端、服务器等多种设备，多种操作系统下的地图应用开发。
  百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。百度地图API不仅包含构建地图的基本功能接口，还提供了诸如本地搜索、路线规划等数据服务。适用于PC或移动设备端的基于浏览器的开发。JS版本还为用户开放了开源库，简化开发。

三、数据获取

3.1 患者轨迹数据

数据内容：实验数据为河南省郑州市确诊患者的轨迹数据，具体的使用数据项包括患者编号、日期、地点名称、经纬度坐标（POI地址解析）和详细的轨迹描述，如下：
病例1轨迹信息表

id	data	place	lon	lat
1	2020-01-07之前	武汉市	114.311582	30.598467
1	2020-01-07	周口市太康县清集镇	114.709823	34.130203
1	2020-01-08	太康县人民医院	114.879742	34.040425
1	2020-01-10	郑州颐和医院	113.753865	34.78167
1	2020-01-20	郑州市第六人民医院	113.664667	34.718381

病例1轨迹描述：病例1：男，65岁，周口市太康县清集镇人。1月7日由武汉乘私家车返回太康县，1月8日前往太康县人民医院就诊，1月10日经120急救车转运至郑州颐和医院就诊，1月20日由负压救护车转诊至郑州市第六人民医院，1月21日确诊。
数据来源：郑州市卫生健康委员会官网发布的新闻信息

3.2 医院POI点数据

医院作为与本次疫情关联的重要机构，因此也利用Python语言和百度地图API接口爬取医院POI点，并删除不相关的机构。

# -*-coding:UTF-8-*-
'''根据行政区域查询'''
import json
import csv
import sys
import requests  # 导入requests库，这是一个第三方库，把网页上的内容爬下来用的

ty = sys.getfilesystemencoding()
import time

las = 1  # 给las一个值1
ak = '您申请的KEY码'
out = open('j_str.csv', 'a', newline='')
csv_write = csv.writer(out, dialect='excel')
print(time.time())
print('开始')
urls = []  # 声明一个数组列表
que = '' \
      '避险场所'
ta = '露天停车场'
for i in range(0, 20):
    page_num = str(i)
    url = 'http://api.map.baidu.com/place/v2/search?query=' + que + '&' \
                                                                    'tag=' + ta + '&region=郑州&page_size=20&page_num=' + str(
        page_num) + '&output=json&ak=' + ak
    urls.append(url)
print('url列表读取完成')
for url in urls:
    time.sleep(5)  # 为了防止并发量报警，设置了一个5秒的休眠。
    print(url)
    html = requests.get(url)  # 获取网页信息
    data = html.json()  # 获取网页信息的json格式数据
    print(data)
    for item in data['results']:
        jname1 = item['province']
        jname2 = item['city']
        jname3 = item['area']
        jname4 = item['name']
        jname = jname1 + jname2 + jname3 + jname4 
        j_uid = item['uid']
        jstreet_id = item.get('street_id')
        jlat = item['location']['lat']
        jlon = item['location']['lng']
        jaddress = item['address']
        jphone = item.get('telephone')
        j_str = (jname, j_uid, jstreet_id, str(jlat), str(jlon), jaddress, jphone)
        print(j_str)
        csv_write.writerow(j_str)
        print("write over")
    print(time.time())
print('完成')

四、数据处理

4.1 轨迹信息提取

由于数据为自然语言，计算机识别较为困难，需要进行数据结构的调整，转化为半结构化数据或结构化数据便于对轨迹点的识别与显示；因此将所有患者轨迹信息进行提取，内容包括患者id、日期、所在地点名称三个数据项，存储与excel文件中。
我此次采取的方法为人工提取，虽然比较低端，但这种方法对于此次的小项目来说是比较适合的——非手机信令数据、轨迹信息文字描述、较为简短、工作量不大等。我也在github中下载了相关大佬使用算法等提取得到的，提取的点比实际的轨迹点还要少，而且混杂在一起，不易真实显示其轨迹，处理相对较为困难。

4.2 地址解析

由于轨迹点的数据量较大，达到了586个，手动填写经纬度耗时耗力；因此使用百度地图API接口Geocoder()进行地址解析，得到所有点的经纬度坐标

4.3 数据清洗

部分患者的轨迹点分布于国外，有些分布于外省或周边城市，也有的地址存在部分“同名”现象，使用百度API进行地址解析时，对范围的界定设为郑州市，都会有一部分轨迹点位置出现错误，因此通过对解析错误点使用“百度坐标拾取系统”进行经纬度修改。

4.4 数据存储

我这里采用的是文本文件存储，但实际很多的数据库-Postgresql、MongoDB、MySQL等数据库都可以存储，也显得更加专业一些
将所有点以数组形式存储与track-points.js和hospital.js文件中，如图所示。为了方便，也将患者的详细轨迹描述以字符串形式存储于数组中，保存为track-depiction.js文件。

五、时空轨迹可视化WEB端实现

5.1 基本地图创建

设置地图中心点坐标为郑州市，缩放级别为12，开启滚轮缩放，添加地图样式控件、缩放/平移控件和鹰眼缩略图控件；将track-points.js、hospital.js和track-depiction.js文件在.html文件的标签，使用

5.2 所有轨迹点显示

通过遍历track-points.js中的点记录，取出索引值为3和4的分别代表经纬度坐标的值并创建marker；通过marker的点击事件（event）将该点的索引值为1和2的值取出保存在信息窗口中作为解释

5.3 热力图展现

该功能通过点击“显示热力图”按钮，marker消失，并展现出患者分布状况；点击“关闭热力图”按钮，则热力图消失。首先在中引入Heatmap_min.js文件，后将轨迹点的经纬度坐标遍历提取，设置权重”count”=1；对按钮添加点击事件。

5.4 某患者轨迹显示

该功能的实现思路与方法为：首先对button按钮添加点击事件，对“文本框”中的内容进行判断—是否为1-157之间的数字字符；若是则直接从track-points.js文件中取出对应id的所有点，在点上添加marker，并将其中包含的信息作为label直接添加到marker上，连成一条线；对于详细轨迹文本的呈现，也是直接将track-depiction.js文件中对应的元素取出，赋值给div值。

5.5 页面结构设计

一部分结构设计直接写在.html文件中的style标签内，一部分写在重新创建的.css文件中，并在部分使用标签将css文件引入。

6 总结

这是我个人探索出的一种方法，有其他小伙伴有更好的结果也可与我交流，非常欢迎！下面是源代码，分享供大家学习探讨
链接：https://pan.baidu.com/s/1fOp0XxL1g41h-yZYnE96ww
提取码：wsmm