通过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,
},
},
}
三、卫星图标实现
卫星环绕效果通过scatter3D实现,将symbolSize设置为0,通过label-textStyle-backgroundColor-image设置卫星图片,代码如下:文章来源:https://www.toymoban.com/news/detail-585558.html
{
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",
},
},
}
总结
卫星伴随地球自转,缺点在于速度与地球相同,暂时未找到更好的替代方法。
完整代码可进github中下载:完整代码
文章来源地址https://www.toymoban.com/news/detail-585558.html
到了这里,关于Echarts实现3D地球加卫星环绕效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!