罗孚学堂用户956
[20200223]如何制作一份疫情场所分布地图？(附数据和源码)
输入“/”快速插入内容
[20200223]如何制作一份疫情场所分布地图？(附数据和源码)
[20200223]如何制作一份疫情场所分布地图？(附数据和源码)
罗孚想要制作一份疫情场所分布地图，最初是因为看到我所在的城市(上海)疫情场所位置不准，想自己做一份数据并显示在地图上，结果一拖再拖然后疫情都快结束了[尴尬]，不过我还是花了一天时间研究了一下，于是有了这篇《如何制作一份疫情场所分布地图？》，要不就当罗孚手把手教你制作一份疫情场所分布地图吧[捂脸]。
本文是以上海地图数据为基础、基于高德地图API设计制作的一份城市地图，如果你收集了你所在城市的地图数据，那么按照本文文末提供的源码和数据结构，你也可以直接复制出一份城市疫情场所地图。要是你真实现了，记得要回来show给我看一下哦。
功能和效果预览
1.
地图显示
2.
疫情场所显示
3.
个人位置显示
4.
地图搜索
5.
其他：缩放控件显示、地图范围限定等
由于是初版，仅仅研究探讨，所以更强大的功能还无法实现，不过我会在下文中展望一下更强大的功能。
概要设计
两个文件就实现了全部功能，还要做个概要设计？不好意思，请让罗孚装一下[捂脸]。实际上，罗孚在这事情上确实走了弯路。
实现框架
罗孚最开始考虑的实现方案，超级简单，简单到甚至不需要写代码和制作数据文件。
不管是高德、百度还是腾讯，都提供了地图数据管理方案，高德的云图、百度地图的LBS云、腾讯地图的地点云，直接使用他们的云存储，然后在地图上添加一个自定义云图层或者通过数据检索API取出数据后marker到地图就行了。
云数据方案是好的，但罗孚使用下来，竟然都不好用，要么无法在地图上显示，要么API接口不返回数据，只能说罗孚作为一个非专业开发人员，确实太菜了一些。当然，也要批评一下高德，地图如果是3D模式时，无法使用云地图图层，这一信息是在某一文档的一行小字中找到的，擦，这坑挖的够深。
自建数据库成了唯一的选择。
不过，为了让方案简单易复制，使用MySQL似乎重了一点，要不使用sqlite吧。但一想到要写数据库的增删改查，又增加了不少麻烦，为了快速实现，直接将最终数据做成了json文本，数据库的操作，以后再考虑吧。
大言不惭的说，最后的实现框架是：json+js。嗯，两个文件，一个json数据文件，一个js文件(写在html文件里了)。[憨笑]
数据的定义和来源
对于地图数据，必须的字段可能有：
•
名称
•
经度
•
纬度
•
地址(可选)
对于疫情，可能的字段有：
•
次数 (有些省市会提供这个地址发生的次数)
•
类型 (可以细分为小区、商场等)
•
时间 (发现时间)
•
来源 (数据源来自哪里)
呃，考虑的是不是有点复杂？罗孚实际上也没有用这么多数据内容，数据字段越多，内容越丰富，实现难度也就越大，作为一个DEMO，就只考虑必须的名称(实际是用地址代替的)和经纬度吧。
定义完字段，就要制作数据了，这些点位数据怎么来呢？逃不出两种方式：
1.
自己收集和标注
2.
扒别人的位置数据
罗孚的初衷是想自己收集和标注，自力更生是我国人民的传统美德，但本人懒癌严重，所以最后也是取了个巧，扒了份别人的数据(仅使用了上海部分啊，其他城市的没要)。
当然，如何扒其他平台的数据，似乎又可以写一篇文章，考虑同本教程有较大出入，加上这见不得人的伎俩，以后再说吧。
地图平台的选择
确定好框架，定义好数据，可以开始开发了，但由于和地图相关，在此多讨论一下地图平台的问题。
一般来说，使用商业公司成熟的地图API是最佳选择：
高德和百度地图的API：推荐。毕竟是国内不分伯仲的顶尖API。
腾讯地图API：可用。可能可以算国内老三，但用的人真少，看在微信、小程序都是鹅厂的产品，也是值得考虑的，看了下API，也基本能用。
除了商业公司的方案，当然也可以使用开源方案，比如leaflet。我看到天地图上海做的地方疫情地图就是用了leaflet。开源方案主要是功能框架，但地图底图数据，要么用商业公司的，要么就还是自己扒了(罗孚也扒过：Google Maps瓦片(tile)地图文件下载(1-11层级)，今年过年太无聊，又扒了更多更细的数据[捂脸])。
地图平台的探讨，真可以再写几篇文章，对于本文的地图平台，最终选择了高德，主要原因是站在别人肩膀上的选择。百度地图API虽然我想用，但考虑到百度地图坐标是在GCJ02坐标系下又做了一次加密，想到后续的数据坐标混乱，还是罢了罢了。
详细设计(功能实现)
继续大言不惭的说说功能实现的详细设计吧，我们针对每一项功能做详细的介绍以及实现上的注意事项，顺便把我参考的地图示例贴出来供大家参考。
地图显示
地图显示是最基本的功能，有一些地方需要注意，谈谈我在地图上的一些考虑。
1.
考虑到是地方地图，那么全国地图、世界地图层级就不要显示啦，所以我把地图层级设置在了10-18之间。
2.
既然是专题地图，那么杂项就不要显示了，比如室内地图、地图上的热点等，都设置为false吧。
3.
而地图的风格，normal的色调太亮，换一个官方的远山黛whitesmoke主题吧。
参考示例：
添加疫情场所marker并弹出气泡框