跟月影学可视化
月影
前奇虎 360 奇舞团团长,可视化 UI 框架 SpriteJS 核心开发者,《JavaScript 王者归来》作者
30206 人已学习
新⼈⾸单¥68
登录后,你可以任选4讲全文学习
课程目录
已完结/共 54 讲
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

39 | 实战(三):如何实现地理信息的可视化?

增加交互功能
使用D3.js的其他投影方式
使用SVG绘制地图
数据与地图结合
整合数据
绘制地图
准备数据
加入定时器实现动态疫情地图
绘制地图
创建确诊人数和颜色的映射函数
将疫情数据整合进地图数据
数据映射关系
使用TopoJSON数据
使用Canvas2D绘制地图
地图投影
获取世界地图的地理数据
收集整理成JSON文件
获取官方数据
课后练习
要点总结
数据与地图结合
整合数据
绘制地图
准备数据
实时更新疫情地图实现

该思维导图由 AI 生成,仅供参考

你好,我是月影。
前段时间,我们经常能看到新冠肺炎的疫情地图。这些疫情地图非常直观地呈现了世界上不同国家和地区,一段时间内的新冠肺炎疫情进展,能够帮助我们做好应对疫情的决策。实际上,这些疫情地图都属于地理位置信息可视化,而这类信息可视化的主要呈现方式就是地图。
在如今的互联网领域,地理信息可视化应用非常广泛。除了疫情地图,我们平时使用外卖订餐、春运交通、滴滴打车,这些 App 中都有地理信息可视化的实现。
那地理信息可视化该如何实现呢?今天,我们就通过一个疫情地图的实现,来讲一讲地理信息可视化该怎么实现。
假设,我们要使用世界地图的可视化,来呈现不同国家和地区,从 2020 年 1 月 22 日到 3 月 19 日这些天的新冠肺炎疫情进展。我们具体该怎么做呢?主要有四个步骤,分别是准备数据、绘制地图、整合数据和更新绘制方法。下面,我们一一来看。

步骤一:准备数据

新冠肺炎的官方数据在 WHO 网站上每天都会更新,我们可以直接找到 2020 年 1 月 22 日到 3 月 19 日的数据,将这些数据收集和整理成一份 JSON 文件。这份 JSON 文件的内容比较大,我把它放在 Github 上了,你可以去Github 仓库查看这份数据。
有了 JSON 数据之后,我们就可以将这个数据和世界地图上的国家一一对应。那接下来的任务就是准备世界地图,想要绘制一份世界地图,我们也需要有世界地图的地理数据,这也是一份 JSON 文件。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文介绍了如何实现实时更新的疫情地图,并提供了详细的技术指导。文章首先介绍了地理信息可视化的广泛应用,包括疫情地图、外卖订餐和春运交通等。随后,作者详细讲解了实现疫情地图的四个步骤:准备数据、绘制地图、整合数据和更新绘制方法。在准备数据阶段,作者提到了获取官方数据并整理成JSON文件,以及获取世界地图的地理数据。在绘制地图阶段,作者介绍了使用Canvas2D将数据绘制成地图的方法,包括地图投影的原理和实现,以及使用TopoJSON数据进行地图绘制的优势。整合数据阶段则介绍了如何将疫情数据整合进地图数据中,并提供了相应的数据映射函数。最后,文章展示了如何将数据与地图结合,通过设置不同颜色来表示疫情的严重程度,并使用定时器实现疫情地图的动态更新。总的来说,本文通过简洁清晰的语言和实用的技术指导,帮助读者了解了实现实时更新的疫情地图的方法和步骤。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《跟月影学可视化》
新⼈⾸单¥68
立即购买
登录 后留言

全部留言(5)

  • 最新
  • 精选
  • Noah
    Projection的讲解很棒!( CONVID应该是COVID)
    2020-10-01
    3
  • CIAO
    如果想做一个世界地图下钻的效果,要怎么找到对应的geojson数据?
    2022-09-01归属地:广东
    1
  • Leo
    问一下,老师能讲一下cesium吗
    2023-03-01归属地:江苏
  • Alice Liu
    请问动态地图源码中的这个JS文件是起什么作用的?直接看文件好像是加密的?https://lib.baomitu.com/topojson/3.0.2/topojson.min.js
    2022-08-02归属地:澳大利亚
  • Alice Liu
    奇怪呀,只有我遇到这种问题吗?我下载了html源代码和json数据,然后改了html中的数据路径到本地,可是打开html都显示不出任何内容呀?
    2022-07-31归属地:澳大利亚
收起评论
显示
设置
留言
5
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部