| 自己做一个简单的新冠肺炎患者时空轨迹可视化页面 | 您所在的位置：网站首页 › 广州病患轨迹最新消息查询 › 自己做一个简单的新冠肺炎患者时空轨迹可视化页面 |
自己做一个简单的新冠肺炎患者时空轨迹可视化页面
|
新冠肺炎患者轨迹时空可视化
一、背景及技术流程二、使用的语言、工具三、数据获取3.1 患者轨迹数据3.2 医院POI点数据
四、数据处理4.1 轨迹信息提取4.2 地址解析4.3 数据清洗4.4 数据存储
五、时空轨迹可视化WEB端实现5.1 基本地图创建5.2 所有轨迹点显示5.3 热力图展现5.4 某患者轨迹显示5.5 页面结构设计
6 总结
一、背景及技术流程
该部分内容为我一门课程的作业，和现在社会上的先进方法来比，要差很多，不过这是我个人探索做出来的，和大家分享，帮助那些学些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轨迹信息表 iddataplacelonlat12020-01-07之前武汉市114.31158230.59846712020-01-07周口市太康县清集镇114.70982334.13020312020-01-08太康县人民医院114.87974234.04042512020-01-10郑州颐和医院113.75386534.7816712020-01-20郑州市第六人民医院113.66466734.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 + '®ion=郑州&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('完成')
由于数据为自然语言，计算机识别较为困难，需要进行数据结构的调整，转化为半结构化数据或结构化数据便于对轨迹点的识别与显示；因此将所有患者轨迹信息进行提取，内容包括患者id、日期、所在地点名称三个数据项，存储与excel文件中。 我此次采取的方法为人工提取，虽然比较低端，但这种方法对于此次的小项目来说是比较适合的——非手机信令数据、轨迹信息文字描述、较为简短、工作量不大等。我也在github中下载了相关大佬使用算法等提取得到的，提取的点比实际的轨迹点还要少，而且混杂在一起，不易真实显示其轨迹，处理相对较为困难。 4.2 地址解析由于轨迹点的数据量较大，达到了586个，手动填写经纬度耗时耗力；因此使用百度地图API接口Geocoder()进行地址解析，得到所有点的经纬度坐标 部分患者的轨迹点分布于国外，有些分布于外省或周边城市，也有的地址存在部分“同名”现象，使用百度API进行地址解析时，对范围的界定设为郑州市，都会有一部分轨迹点位置出现错误，因此通过对解析错误点使用“百度坐标拾取系统”进行经纬度修改。 4.4 数据存储我这里采用的是文本文件存储，但实际很多的数据库-Postgresql、MongoDB、MySQL等数据库都可以存储，也显得更加专业一些 将所有点以数组形式存储与track-points.js和hospital.js文件中，如图所示。为了方便，也将患者的详细轨迹描述以字符串形式存储于数组中，保存为track-depiction.js文件。 设置地图中心点坐标为郑州市，缩放级别为12，开启滚轮缩放，添加地图样式控件、缩放/平移控件和鹰眼缩略图控件；将track-points.js、hospital.js和track-depiction.js文件在.html文件的标签，使用
通过遍历track-points.js中的点记录，取出索引值为3和4的分别代表经纬度坐标的值并创建marker；通过marker的点击事件（event）将该点的索引值为1和2的值取出保存在信息窗口中作为解释 该功能通过点击“显示热力图”按钮，marker消失，并展现出患者分布状况；点击“关闭热力图”按钮，则热力图消失。首先在中引入Heatmap_min.js文件，后将轨迹点的经纬度坐标遍历提取，设置权重”count”=1；对按钮添加点击事件。 该功能的实现思路与方法为：首先对button按钮添加点击事件，对“文本框”中的内容进行判断—是否为1-157之间的数字字符；若是则直接从track-points.js文件中取出对应id的所有点，在点上添加marker，并将其中包含的信息作为label直接添加到marker上，连成一条线；对于详细轨迹文本的呈现，也是直接将track-depiction.js文件中对应的元素取出，赋值给div值。 一部分结构设计直接写在.html文件中的style标签内，一部分写在重新创建的.css文件中，并在部分使用标签将css文件引入。 这是我个人探索出的一种方法，有其他小伙伴有更好的结果也可与我交流，非常欢迎！下面是源代码，分享供大家学习探讨 链接：https://pan.baidu.com/s/1fOp0XxL1g41h-yZYnE96ww 提取码：wsmm |
【本文地址】