如何制作一张精确到市级并时时在线更新的疫情地图？
文末附文中行政区划相关数据下载。
疫情数据获取
数据服务API来自疫情开源项目：
https://github.com/wuhan2020/map-viz
数据准备
全国省级行政区划数据 各省市级行政区划数据
数据可视化
绘制省级疫情地图
绘制填充图
const chinaLayer = new PolygonLayer({ autoFit: true }) .source(data) .shape("fill") .color("confirm", (d) => { return d > 1000 ? colors[5] : d > 499 ? colors[4] : d > 100 ? colors[3] : d > 10 ? colors[2] : d > 0 ? colors[1] : colors[0]; }) .style({ opacity: 1 });
上面这段代码我们就可以把全国省份的填充绘制出来了。
绘制省份边界
constchinaLine=new LineLayer({})
.source(data)
.size(0.5)
.shape("line")
.color("#222")
.style({
opacity: 1
});
绘制文字标注
const textlayer= new PointLayer({})
.source(dataPoint, {
parser: {
type: "json",
coordinates: "center"
}
})
.shape("name", "text")
.size(12)
.color("#fff")
.style({
stroke: "#ffffff", // 描边颜色
strokeWidth: 1.0, // 描边宽度
strokeOpacity: 1.0,
textAllowOverlap: false
});
通过添加上面的三个图层我们就完成了一个静态的全国省级疫情地图。chinaLayer.on('dblclick',(e)=>{
const {adcode, cities = []} =e.feature.properties;
// 这里可以添加加载城市图层的逻辑，并且隐藏省级地图
this.addCityLayer(adcode, cities);
})
如何加载市级地图这里就不详细描述了，跟省级地图类似。
添加上取交互
当市级地图出现之后，我们需要返回到省级地图，这里的交互通过双击市级地图空白处触发。
空白区域事件我们可以通过监听市级地图的 undblclick事件实现
cityLayer.on('undblclick',()=>{
this.cityLayer.destroy(); // 销毁市级地图
...// 显示省级地图
})
这样我们就介绍完了上钻下取地图实现的全部核心逻辑。最后我们可以添加一些图例，信息窗口等辅助信息。详细代码可以去GitHub下载源码 https://github.com/lzxue/yiqingditu这里再提供一个全球疫情可视化的案例；https://haiyu915.gitee.io/ncov-2019-map/
疫情地图
进入疫情地图首页是全国省级尺度的疫情分布填充图，鼠标滑过每个省份，右上角显示每个省份疫情详细信息。
鼠标在地图上双击即可进入到对应省份的详细的疫情分布数据
完整交互演示
这个可视化项目是开源的，你可以去GitHub 获取源码，你可以加入进来不断完善可视化功能，学习如何进行地理可视化。
地图部署
通过github的gh-page服务我们可以把疫情地图部署成在线服务在线服务就可以实现制作自己的疫情地图了，也可以分享给朋友查看。
相关资源
在线访问地址: https://github.com/lzxue/yiqingditu
在线访问国内加速:https://thinkgis.gitee.io/yiqingditu/
源码地址：https://github.com/lzxue/yiqingditu
数据可视化L7: https://github.com/antvis/L7
行政区划数据: http://datav.aliyun.com/tools/atlas
进入公众号后台
发送数字
1031
获取下载链接
- END -
Google Earth，百度地图，高德地图数据原来是这么来的！