zoukankan      html  css  js  c++  java
  • echarts_3D_earth

    举个例子吧,就做这个了:

    打开之后是这样的:

    操作:

    1、准备工作:就差一个option配置项了

    2、开心地将option粘过来,报错了,没有ROOT_PATH

    3、添加ROOT_PATH(let ROOT_PATH = 'https://echarts.apache.org/examples'),还是一片空白,也不报错

     4、下载官网上的实例看看

     然后发现我的页面少了好多js文件:

    5、把这些js文件拿过来时页面报弹框提示,也有报错

    6、先解决弹框提示,这是因为百度地图的秘钥过期了,我使用自己的秘钥

    7、解决这个报错:将图片都转正base64格式的

    8、先将地图文件所需的几张图片下载下来

    9、进入http://www.jq22.com/demo/baseToImage201807250139/

    将下载好的图片都转成base64格式的

    10、新建utils.js文件,存放base64图片,因为实在是太长了。然后替换掉原来的网络路径的图片

    11、如果不嫌麻烦,可以把各个js文件都下载到本地里

    最终代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>echarts_3D_earth</title>
      <script src="./js/echarts.min.js"></script>
      <script src="./js/utils.js"></script>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
      <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=m8wa7CqexhUGYTGmdv9xzjB5iKT6WQdl&__ec_v__=20190126"></script>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    </head>
    
    <body>
      <div id="main" style=" 600px;height:400px;"></div>
      <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        // let ROOT_PATH = 'https://echarts.apache.org/examples'
        let option = {
          backgroundColor: '#000',
          globe: {
            // baseTexture: ROOT_PATH + '/data-gl/asset/earth.jpg',
            baseTexture: earth,
            // heightTexture: ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',
            heightTexture: bathymetry_bw_composite_4k,
            displacementScale: 0.1,
            shading: 'lambert',
            // environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
            environment: starfield,
            light: {
              ambient: {
                intensity: 0.1
              },
              main: {
                intensity: 1.5
              }
            },
            layers: [{
              type: 'blend',
              blendTo: 'emission',
              // texture: ROOT_PATH + '/data-gl/asset/night.jpg'
              texture: night
            }, {
              type: 'overlay',
              // texture: ROOT_PATH + '/data-gl/asset/clouds.png',
              texture: clouds,
              shading: 'lambert',
              distance: 5
            }]
          },
          series: []
        }
        myChart.setOption(option);
      </script>
    </body>
    
    </html>
  • 相关阅读:
    linux修改主机名
    selinux详解及配置文件
    linux磁盘分区
    识别光纤,模块
    free命令详解
    Linux系统修改网卡名(eth0-3)
    CentOS7的systemctl使用
    ELK集群
    ELK故障:elk在运行一段时间后,没有数据。
    superviosrd进程管理
  • 原文地址:https://www.cnblogs.com/wuqilang/p/13540024.html
Copyright © 2011-2022 走看看