Echarts 3d地球toolstips实现

本文分享了一个使用ECharts和echarts-gl库制作的3D地球模型,包括地球表面国界线的绘制和鼠标悬停时的自定义tooltips功能。通过详细步骤和实例展示如何在网页上实现交互式地球地图效果。

最近用echarts做了个3d地球项目,网上找了很多都没有找到适合的教程,只能自己手动写一个了。

完整项目详见:https://github.com/hlsblog/3dEarth

项目实例入口:https://hlsblog.github.io/3dEarth/

本项目支持鼠标经过地球悬停,地球上的点鼠标经过显示自定义tooltips。

1)引用echarts的js:

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>

2)引用国家国界线js(在github项目中可以找到world.js,其中world.js是从网络获取的,仅供参考)

<script src="./js/world.js"></script>

3)该项目其他引用

<script src="./js/config.js"></script>
<script src="./js/index.js"></script>
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值