疫情大屏优化-ECharts 地图下钻功能实现

最近在网络上看到了很多地图下钻的文章，感觉都很不错，正好自己也在研究这部分知识，就想着把下钻这个功能结合到疫情大屏中来，这样就能够更好的展示不同省份的疫情信息了。废话不多说，直接来干货!

　　下钻功能思路

　　我这里还是使用 ECharts 来处理，有一个 API 是 registerMap，可以用来生成地图。它有两个比较重要的参数，mapName 和 geoJson。

　　mapName 顾名思义，就是该注册地图的名称。

　　而对于 geoJson 呢，需要是 GeoJson 格式的数据，具体格式可以参见 http://geojson.org/

　　说白了就是包含了经纬度信息和地理名称的 json 数据，这种数据很多网站都有提供，我选取了如下的网站获取

　　https://data.jianshukeji.com/geochina/tianjin.json

　　可以看出，只要替换 json 名称，如：tianjin，就可以获取到天津对应的 geojson 数据。

　　下面就是正常的绘制地图了，只需要注意把 mapType 设置为前面注册的地图名称即可。

　　后台数据准备

　　由于现在要展示各个市级别的数据，那么我们就需要重新准备下后台的数据接口，把各省的地级市信息捞取出来，注意对于直辖市需要特殊处理

　　然后统一到一个接口中返回

　　前端功能实现

　　下面我们来根据思路编写前端代码，首先在中国地图上设置点击事件，更加当前点击的省份信息来请求 geojson 数据并注册地图。

　　接下来就是 renderMap 函数，其实就是正常的绘制地图代码

　　这里又做了一个判断，如果用户点击标题，则会调用创建中国地图的函数，以此来达到返回全国地图的效果!

　　最后我们来看下效果图，由于从 geojson 拿到的数据和从网上接口拿到的地级市名称不尽相同，所以有一些地级市的数据无法显示，暂时还没有很好的解决办法，无奈!