search

eleduck / maskhero

与子同袍-援助海外华人计划
https://eleduck.com/maskhero
33 stars 12 forks source link

省市级数据的地图高亮及数据绘制 #13

Closed baibonjwa closed 4 years ago

baibonjwa commented 4 years ago

省市级数据的地图高亮及数据绘制

实现国家地图中各省市的点亮及数据显示

  1. 当用户 zoom in 或者点击某一国家，直接自动缩放到该国家地图，此时只有该国家地图正常显示，其他周边国家都以灰度形式展现。当用户切换到具体国家地图时，每一个收到帮助的城市以 Marker 的形式标记出来，并添加一个返回按钮，可以手动点击返回世界地图。

  2. 点击城市（Marker）：当用户在某一国家地图上时，可以看到相关城市，这时如果点击这些城市 Marker，会有一个弹窗从底部滑动上来，里面显示具体信息如原型所示。

UI: https://www.figma.com/file/y5OvmknBbxOGdxD6bEekdV/%E7%94%B5%E9%B8%AD-%2B-%E4%B8%8E%E5%AD%90%E5%90%8C%E8%A2%8D?node-id=262%3A61

Map Chart Demo: https://www.amcharts.com/demos/drill-down-to-countries/

jisi724 commented 4 years ago

@BAI-Bonjwa 绘制数据是画地图的意思嘛？

baibonjwa commented 4 years ago

@jisi724 是的，目前只有国家级别的世界地图。但实际地图上点击中国、加拿大 可以进入到每个国家地图里。这个需求就是将信息筛选并展示的就是每个国家的省份上。比如四川 多少个志愿者，多少捐助，就点亮这个省份并显示信息。目前代码在 chartUtil.js 里，我注释掉的一部分是关于如何展开省市地图的。还有一些点击特定区域显示，图表下方显示一个统计信息栏的功能。详见 UI 页

UI: https://www.figma.com/file/y5OvmknBbxOGdxD6bEekdV/%E7%94%B5%E9%B8%AD-%E4%B8%8E%E5%AD%90%E5%90%8C%E8%A2%8D?node-id=262%3A61 Map Chart Demo: https://www.amcharts.com/demos/drill-down-to-countries/