Echarts实现3D地球加卫星环绕效果

通过 echarts 实现自动旋转3D地球加卫星环绕效果

文章 目录

一、依赖安装
二、地球自转实现
三、卫星图标实现
总结

一、依赖 安装

echarts 安装

npm install echarts

echarts–gl 安装

npm install echarts-gl

使用

全部使用

import * as echarts from 'echarts';
import 'echarts-gl';

按需使用

import * as echarts from 'echarts/core';
import { Scatter3DChart } from 'echarts-gl/charts';
import { Grid3DComponent } from 'echarts-gl/components';

echarts.use([Scatter3DChart, Grid3DComponent]);

二、地球自转实现

代码如下：

globe: {
  show: true,
   globeRadius: 80,
   baseTexture: "img/world.jpg",
   heightTexture: "img/world.jpg",
   displacementScale: 0.04,
   environment: "img/starfield.jpg",
   shading: "realistic",
   realisticMaterial: {
     roughness: 0.9,
   },
   viewControl: {
     autoRotate: true,
     autoRotateAfterStill: 3,
     distance: 300,
     maxDistance: 800,
     damping: 0,
   },
   postEffect: {
     enable: true,
   },
   light: {
     main: {
       intensity: 5,
       shadow: true,
     },
     ambientCubemap: {
       texture: "img/pisa.hdr",
       diffuseIntensity: 0.2,
     },
   },
 }

三、卫星 图标实现

卫星环绕效果通过 s catter3D实现，将symbolSize设置为0，通过 label–textStyle-backgroundCol o r–image 设置卫星图片，代码如下：

{
  type: "scatter3D",
    coordinateSystem: "globe",
    data: [[12, 14, 10]],
    symbolSize: 0,
    label: {
      show: true,
      position: "top",
      distance: -20,
      formatter(params) {
        return "卫星";
      },

      textStyle: {
        color: "transparent",
        padding: [15, 20],
        backgroundColor: {
          image: "./img/weixing.png",
        },
      },
    }
  },
  {
    type: "scatter3D",
    coordinateSystem: "globe",
    data: [[12, 14, 10]],
    symbolSize: 0,
    label: {
      show: true,
      clickable: true,
      position: "bottom",
      distance: 0,
      formatter(params) {
        return "卫星";
      },
      textStyle: {
        color: "yellow",
        padding: [15, 20],
        backgroundColor: "transparent",
      },
    },
  }