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

41 | 实战(五):如何实现3D地球可视化(下)?

addMarker函数
initMarker函数
makeMarkerVerts函数
makeSpotVerts函数
光柱的Shader代码
addBeam函数
project函数
latlngToPosition函数
setGlobeTarget函数
修改mousemove事件处理函数
highlightMap函数
将经纬度转换为球面坐标
将球面坐标转换为平面地图坐标
添加动画
实现两点之间的连线
实现摆放地标
实现摆放光柱
实现计算几何体摆放位置
实现高亮国家地区的方法
实现坐标转换
小试牛刀
摆放地标
摆放光柱
计算几何体摆放位置
高亮国家地区的方法
坐标转换
要点总结
在地球上放置标记
与地球交互
如何给3D地球可视化增加光柱和地标

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

你好,我是月影。
上节课,我们实现了一个有着星空背景的 3D 地球效果。但这个效果还比较简单,在某些可视化大屏项目中,我们不仅要呈现视觉效果,还要允许用户与可视化大屏中呈现的内容进行交互。所以这节课,我们会先给这个 3D 地球添加各种交互细节,比如让地球上的国家随着我们鼠标的移动而高亮,接着,我们再在地球上放置各种记号,比如光柱、地标等等。

如何选中地球上的地理位置?

我们先来解决上节课留下的一个问题,为什么我们在绘制 3D 地球的时候,要大费周章地使用 topoJSON 数据,而不是直接用一个现成的等角方位投影的世界地图图片作为球体的纹理。这是因为,我们想让地球能够和我们的鼠标进行交互,比如当点击到地图上的中国区域的时候,我们想让中国显示高亮,这是纹理图片无法实现的。接下来,我们就来看看怎么实现这样交互的效果。

实现坐标转换

实现交互效果的难点在于坐标转换。因为鼠标指向地球上的某个区域的时候,我们通过 SpriteJS 拿到的是当前鼠标在点击的地球区域的一个三维坐标,而这个坐标是不能直接判断点中的区域属于哪个国家的,我们需要将它转换成二维的地图经纬度坐标,才能通过地图数据来获取到当前经纬度下的国家或地区信息。
那如何实现这个坐标转换呢?首先,我们的鼠标在地球上移动的时候,通过 SpriteJS,我们拿到三维的球面坐标,代码如下:
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文介绍了如何在3D地球可视化中增加光柱和地标的技术方法。首先讲解了实现地球上交互效果的方法,包括将鼠标在地球上的三维坐标转换为二维地图经纬度坐标,实现鼠标移动到地球上的国家或地区时的高亮效果。其次,介绍了在地球上放置标记的方法,通过选中对应的国家,在地球的指定经纬度处放置一些标记。文章通过代码示例和详细解释,帮助读者理解了实现这些交互效果的具体步骤和方法。另外,文章还介绍了如何摆放光柱,通过Cylinder对象绘制光柱,并实现光线随高度衰减的效果。总的来说,本文内容深入浅出,适合对3D地球可视化感兴趣的读者阅读学习。文章还提到了在地球上放置标记的方法,包括实现地标的顶点着色器和片元着色器,以及生成spot和marker的顶点的算法。另外,文章还提到了实现两点之间的连线以及动态的飞线的方法,通过Path3d对象绘制空间中的三维曲线,以及添加动画实现两点之间的飞线动画效果。

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

全部留言(5)

  • 最新
  • 精选
  • Geek_e15910
    vertex.push(x, y, 1, 0, x, y, 1, 1.0); 月影大大,这个生成marker的方法中,为什么要添加两次x,y,1,0呢?

    作者回复: 因为要构造三角形,用到两次点

    2020-12-03
  • 萌萌的程序媛
    我用代码中例子,但是报错 没有createGlobe这个对象,这是什么原因呢?
    2021-03-10
    1
    1
  • 冰糖爱白开水
    知道了,通过射线
    2023-02-21归属地:浙江
  • 冰糖爱白开水
    鼠标与地球交互时,鼠标点击时,是怎样获取的球面坐标??
    2023-02-21归属地:浙江
  • Geek_0e4bce
    老师,代码没有办法正常运行,vid-geo-earth中的例子除了b_globe.html可以正常运行外,其他都报错
    2022-04-28
收起评论
显示
设置
留言
5
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部