Echarts 3d地球toolstips实现

最近用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>
<script src="./js/mytooltips.js"></script>

4）页面完整代码

<!--自定义toolstips样式及页面样式-->
<link rel="stylesheet" href="index.css" type="text/css" />
<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>
<script src="./js/world.js"></script>
<script src="./js/config.js"></script>
<script src="./js/index.js"></script>
<script src="./js/mytooltips.js"></script>

<!--3d地球外层容器，可以加上光晕等特殊效果-->
<div class="map"></div>
<!--3d地球容器-->
<div id="container"></div>

<!--自定义tooltips层-->
<div class="globe-tips my-tips-container">
	<div class="globe-tips-con">
	  <img width="100%" alt="" src="">
	  <p class="my-tips">loading...</p>
	</div>
	<div class="boxfoot"></div>
</div>
<script>
window.onload = function(){
    //初始化地球
	DrawEarthObj.initEarth();
    //初始化toolstips事件
	HoverHandler.init();
}
</script>

项目效果：