使用echart.js和echarts-gl.js实现旋转地球

曾经终败给现在 2023-10-08 17:53 23阅读 0赞

今天，无意中看见一个同学写的旋转地球的页面，非常漂亮。因此自己动手也学习编写，现在把代码放在CSDN，和大家一起分享！

ECharts是一款基于[JavaScript][]的[数据可视化][Link 1]图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由[百度][Link 2]团队开源，并于2018年初捐赠给[Apache][]基金会，成为ASF孵化级项目。

ECharts-GL是ECharts的扩展包，用于听过 3D 维图像，全球数据可视化和WebGL性能优化。(ECharts-GL is an extension pack of Apache ECharts, which providing 3D plots, globe visualization and WebGL acceleration.)

完整例子代码：[https://download.csdn.net/download/speedwalkman/87461999][https_download.csdn.net_download_speedwalkman_87461999]

1. 准备的资源：

1）https://echarts.apache.org/examples/data-gl/asset/starfield.jpg // 星空背景图片

2）https://echarts.apache.org/examples/data-gl/asset/earth.jpg // 地球图片

3）生产 base64编码：https://c.runoob.com/front-end/59/

2. 具体代码

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8" />
      <title>旋转地球</title>
      <script id="echarts" src="https://cdn.staticfile.org/echarts/5.0.1/echarts.min.js"></script>
      <script id="echartsgl" src="https://cdn.staticfile.org/echarts-gl/2.0.8/echarts-gl.js"></script>
    </head>
    
    <body style="width: 1200px;height:1800px;">
      
      <div id="main" style="width: 936px;height:712px;"></div>
    
      </div>
      <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
    
        // 指定图表的配置项和数据
        var option = {
          backgroundColor: '#000',
          globe: {
            environment: "", //背景图在此运行这里需要把图片下载下来，然后转成base64码再套进去
            baseTexture: "", //在此运行这里需要把图片下载下来，然后转成base64码再套进去
            shading: 'lambert',
            atmosphere: {
              show: true
            },
            light: {
              ambient: {
                intensity: 0.3
              },
              main: {
                intensity: 1.5
              }
            }
          },
          series: []
        };
    
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      </script>
    </body>
    
    </html>

3. 最后效果

![c950a592061b4a908e44f27c1ffbc68a.png][]

[JavaScript]: https://baike.baidu.com/item/JavaScript/321142?fromModule=lemma_inlink
[Link 1]: https://baike.baidu.com/item/%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96/1252367?fromModule=lemma_inlink
[Link 2]: https://baike.baidu.com/item/%E7%99%BE%E5%BA%A6/6699?fromModule=lemma_inlink
[Apache]: https://baike.baidu.com/item/Apache/6265?fromModule=lemma_inlink
[https_download.csdn.net_download_speedwalkman_87461999]: https://download.csdn.net/download/speedwalkman/87461999
[c950a592061b4a908e44f27c1ffbc68a.png]: https://img-blog.csdnimg.cn/c950a592061b4a908e44f27c1ffbc68a.png