umi使用eacharts实现3D地球效果

目录

效果图 

插件安装 

实现

效果图 

插件安装 

 我们使用eacharts，所以我们首先需要下载eacharts

 安装以上三个插件

echarts-gl实现三维可视化

实现

我们打开eacharts官网，找到3d地球，当我们复制代码到我们的页面，会发现他会报一个跨域的错误，但是由于这个页面只是一个大屏展示的可视化项目，没有用到我们的后端接口，而且我们请求的只是一个图片，所以我决定把图片下载到项目中

图片

 实现代码

import React, { useEffect, useState } from 'react';
import styles from './index.less';
import * as charts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import 'echarts-gl';



type EChartsOption = charts.EChartsOption;

export default function Map() {

  const getbar = () => {
    const option: EChartsOption = {
      // backgroundColor: 'midnightblue', //背景颜色
      globe: {
        baseTexture: require('@/images/world.topo.bathy.200401.jpg'),
        heightTexture: require('@/images/world.topo.bathy.200401.jpg'),
        displacementScale: 0.04,
        shading: 'realistic',
        // environment: require('@/images/1.png'), //背景图片
        realisticMaterial: {
          roughness: 0.9,
        },
        postEffect: {
          enable: true,
        },
        viewControl: {
          autoRotate: true,
          minDistance: 20,
          targetCoord: [120.38, 36.07],
        },
        light: {
          main: {
            intensity: 5,
            shadow: true,
          },
          ambient: {
            intensity: 1,
          },
          ambientCubemap: {
            // texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
            diffuseIntensity: 0.2,
          },
        },
      },
      

    };
    return option;
  };
 
  
  return (
    <div className={styles.map}>
      <div className={styles.center}>
      
        <div className={styles.maps}>
          {/* 左侧3D地球 */}
          <div className={styles.left}>

            <div className={styles.circle}>
              <ReactEcharts
                option={getbar()}
                style={{ width: '90%', height: '90%'}}
              />
            </div>  
    
        </div>
      </div>
     </div>
    </div>
  );
}

这样我们的3d地球的效果就实现了