41 | 实战(五):如何实现3D地球可视化(下)?
月影
该思维导图由 AI 生成,仅供参考
你好,我是月影。
上节课,我们实现了一个有着星空背景的 3D 地球效果。但这个效果还比较简单,在某些可视化大屏项目中,我们不仅要呈现视觉效果,还要允许用户与可视化大屏中呈现的内容进行交互。所以这节课,我们会先给这个 3D 地球添加各种交互细节,比如让地球上的国家随着我们鼠标的移动而高亮,接着,我们再在地球上放置各种记号,比如光柱、地标等等。
如何选中地球上的地理位置?
我们先来解决上节课留下的一个问题,为什么我们在绘制 3D 地球的时候,要大费周章地使用 topoJSON 数据,而不是直接用一个现成的等角方位投影的世界地图图片作为球体的纹理。这是因为,我们想让地球能够和我们的鼠标进行交互,比如当点击到地图上的中国区域的时候,我们想让中国显示高亮,这是纹理图片无法实现的。接下来,我们就来看看怎么实现这样交互的效果。
实现坐标转换
实现交互效果的难点在于坐标转换。因为鼠标指向地球上的某个区域的时候,我们通过 SpriteJS 拿到的是当前鼠标在点击的地球区域的一个三维坐标,而这个坐标是不能直接判断点中的区域属于哪个国家的,我们需要将它转换成二维的地图经纬度坐标,才能通过地图数据来获取到当前经纬度下的国家或地区信息。
那如何实现这个坐标转换呢?首先,我们的鼠标在地球上移动的时候,通过 SpriteJS,我们拿到三维的球面坐标,代码如下:
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文介绍了如何在3D地球可视化中增加光柱和地标的技术方法。首先讲解了实现地球上交互效果的方法,包括将鼠标在地球上的三维坐标转换为二维地图经纬度坐标,实现鼠标移动到地球上的国家或地区时的高亮效果。其次,介绍了在地球上放置标记的方法,通过选中对应的国家,在地球的指定经纬度处放置一些标记。文章通过代码示例和详细解释,帮助读者理解了实现这些交互效果的具体步骤和方法。另外,文章还介绍了如何摆放光柱,通过Cylinder对象绘制光柱,并实现光线随高度衰减的效果。总的来说,本文内容深入浅出,适合对3D地球可视化感兴趣的读者阅读学习。文章还提到了在地球上放置标记的方法,包括实现地标的顶点着色器和片元着色器,以及生成spot和marker的顶点的算法。另外,文章还提到了实现两点之间的连线以及动态的飞线的方法,通过Path3d对象绘制空间中的三维曲线,以及添加动画实现两点之间的飞线动画效果。
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《跟月影学可视化》,新⼈⾸单¥68
《跟月影学可视化》,新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(5)
- 最新
- 精选
- Geek_e15910vertex.push(x, y, 1, 0, x, y, 1, 1.0); 月影大大,这个生成marker的方法中,为什么要添加两次x,y,1,0呢?
作者回复: 因为要构造三角形,用到两次点
2020-12-03 - 萌萌的程序媛我用代码中例子,但是报错 没有createGlobe这个对象,这是什么原因呢?2021-03-1011
- 冰糖爱白开水知道了,通过射线2023-02-21归属地:浙江
- 冰糖爱白开水鼠标与地球交互时,鼠标点击时,是怎样获取的球面坐标??2023-02-21归属地:浙江
- Geek_0e4bce老师,代码没有办法正常运行,vid-geo-earth中的例子除了b_globe.html可以正常运行外,其他都报错2022-04-28
收起评论