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 ({/* 左侧3D地球 */}{ width: '90%', height: '90%'}}/>  );
}

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！