持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情
一直想为疫情防控做点贡献，前段时间由于疫情原因，利用在家办公的便利，简单做了一个疫情分区地图，分享给大家。
按我们这边政府（嘉兴）的做法，一般会在各大主流公众号发布官方的公告，将三区管控信息通过文字发布，但是，同一个市，几个区的信息发布有时候是市一级统一的，有时候又是单独发布的，所以普通市民看着就比较费劲，而且都是文字，不够直观。我做的仅仅就是汇总这些信息，并将其在一个图上展示出来，便于个人对照，搬到地图上后，还可以使用腾讯的定位接口，查看自己是否在三区之中，如果担心自己隐私，也可以拒绝定位权限，不影响其它功能。
这个项目足够简单，所有接口都在前端完成，几乎没有后端，唯一操作的就是一个json文件。在页面编辑完成后，直接点击保存可以获取json字符串，或者保存为config.json文件，这个文件就是数据对象，然后使用同步工具同步这个文件就可以，因为对于一个小的地级市来说，点位不多，更新也不会很频繁。
在正式操作之前，需要先介绍一下背景条件：
- 首先要明确区域是随时变化的，比如A点开始是防范区，过了两天又变成了封控区，这些区域都是动态变化的，这个也是没办法，每天政策都在调整。区域发生了变化，这个其实一定要体现出来，也就是在地图上展示出来历史的，一个区域被封控了不会是一成不变的，这个可以通过历史区域页面来选择不同时期的区域。
- 正常一个区域需要设置一个解封时间，过了这个时间，那么区域就不会显示，需要到历史页面中调出，默认一般是14天，这个以各地的政策为准。
框架选型
项目框架: vite + vue3 + tailwindcss 地图使用的是腾讯3D地图,区域使用的是多边形棱台的接口，绑定个人app_key即可。
一开始也不确定，没有后端是否能实现，但经过思考后，发现整个数据结构可以抽象成一个树形结构，比较符合json的风格。基本结构如下图所示：
因为组件少，这里就以页面讲解功能。
维护页面
页面地址： /pick
先说维护页面，这里主要做的工作就是对一个区域通过点击地图，获取到经纬度信息。
区域信息更新后，根据文字描述，找到地图上的相应点位，与新闻公告同步修改。这个页面上用到的方法也比较多，对各层的数据进行增删改都要在此页面完成，因为页面少，这里也没有组件化设计，直接单页面写完。
地图层：
initMap：初始化地图polygonEventClick: 点击地图多边形的回调函数，显示区域相关文字showAllZone:显示所有区域到地图上clearAllZone：清除地图预览
对于区块层，有
addZone:增加区块saveZoneInfo：保存区块基本信息deleteZone：删除对应区块editZone： 编辑区块基本信息，将此区块数据绑定到一个reactive对象setCenter: 设置当前中心点坐标为此区块中心zonePreview：区块显示在地图上预览，用于检查校验
对于区域信息，有
editArea： 编辑区域对象，将点击的区域对象摘出来进行操作copyAnArea：复制当前的区域节点对象SaveAreaInfo： 保存区域信息pasteArea: 粘贴区域对象 对于点位信息，有moveDownPosition: 将坐标点下移moveOnPosition： 坐标点上移clearPosition:清空当前区域所有标记点deletePosition:删除标记点addPosition:新增点位信息save: 保存json文件，直接下载到本地
展示页面
页面地址： /index
维护页面导出config.json之后，同步到服务器项目目录下，展示页面即可加载数据，主要的功能就是解析出所有的区域信息，并通过时间筛选出当前日期正在管控中的区域，地图按照一定的顺序展示出不同类型的区域。
右侧加了一个图例面板，显示一些汇总信息，可以通过面板切换地图样式，黑夜的效果更好，可以通过点击名称进一步展示二级区域。
总结
这个项目有几个特点：
-
- 组件少。整个项目就两个页面，一个维护页面，一个展示页面。
-
- 结构简单。无后端，无数据库，无状态管理器，无用户登录。
-
- 功能实用。查历史、个人定位、封控详情、信息来源，区域统计等都有。
选择历史的一天，然后可以查看那一天的分区情况。嘉兴疫情基本集中在4月份，所以只有选择四月份地图才有显示。这个项目是开源的，代码在码云，需要的朋友可以做一个本地区的疫情地图，只要将index.html中的地图key和统计key替换，将标题改一下即可使用。
由于个人水平有限，难免有许多不足之处，欢迎批评指正！
