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

这篇具有很好参考价值的文章主要介绍了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,
     },
   },
 }

三、卫星图标实现

卫星环绕效果通过scatter3D实现,将symbolSize设置为0,通过label-textStyle-backgroundColor-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",
      },
    },
  }

总结

卫星伴随地球自转,缺点在于速度与地球相同,暂时未找到更好的替代方法。
完整代码可进github中下载:完整代码
Echarts实现3D地球加卫星环绕效果,echarts,echarts,前端,javascript文章来源地址https://www.toymoban.com/news/detail-585558.html

到了这里,关于Echarts实现3D地球加卫星环绕效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue 中使用Echarts构建3D地球

    一:要用Echarts实现3D地球 除了 echarts还是远远不够的 ,除了echarts外 我们 还得引用 echarts-gl  jquery 也是需要的 不然会有多次报错 1.收首先在 main.js中分别引入所需的插件, 此外 除了在main.js中 在相应.vue 中也需要引用 使用echarts的3D功能 全局引入Echarts-gl 一般建议装最低版本

    2024年02月12日
    浏览(37)
  • 前端echarts地图3D效果+点击地域出现弹出框可以有确定取消操作

    效果图如下:    代码如下: 运行3D项目要安装一下echarts-gl依赖: 引入的jiangsu文件要单独下载json文件,附上两个网址: DataV.GeoAtlas地理小工具系列 POI数据|高德POI|高德兴趣点|高德POI数据|高德POI下载|高德POI数据库|高德POI分类|高德北京市POI|高德上海市POI|高德广州市POI|高德

    2024年02月11日
    浏览(47)
  • vue echarts实现3D效果柱状图

    在vue2项目里面,研究了哈,这里记录下eacharts 实现3D效果柱状图 在main.js引入eacharts 展示效果:大屏demo

    2024年02月15日
    浏览(44)
  • echarts实现一个3d效果柱形图

    思路是: 通过数组循环生成多个echarts实例盒子,生成的柱形图只有一条数据,是由多个图表设置 barGap: \\\'-100%\\\' 实现重叠,并通过设置柱形图中间颜色到边上颜色的渐变形成类似3d的视觉效果,实际每一个柱形图是由以下几个图表实现的:⛽️ 内层背景的body(bar) 内层背景的

    2024年02月15日
    浏览(46)
  • 使用echarts-gl 绘制3D地球配置详解

    大屏可视化绘制关联配置绘制3D地球 为 ECharts 准备一个定义了宽高的 DOM 实例化 指定图表的配置项和数据

    2024年02月11日
    浏览(39)
  • echarts使用二维地图实现好看的3D效果

    内容概要: 使用echarts的二维地图模拟三维立体动态风格的地图效果,地图边界还带有动态流动线条效果,既有三维的立体效果,又避免了三维地图占用内存资源高的问题。 目标人群: 前端开发工程师,大屏可视化开发人员。 使用场景: 使用echarts二维地图模拟三维地图效果

    2024年02月11日
    浏览(42)
  • vue+echarts——实现3D地图+3D柱状图 效果——粗糙代码记录——技能提升

    最近看到同事在弄下面的这个图,这个图是从网上看到的,是某个网站的收费项目: 所以,最后的决定是通过 echarts 中的 3D地图 来写。但是写出来的效果不慎好看。功能是可以实现的。 初版效果图如下: 直接上代码: 我这边是存储到当前文件夹中了。。。 背景颜色是 ec

    2024年02月09日
    浏览(66)
  • vue3 echarts实现3D立体柱状图效果,多柱状图

    使用插件vchart+echarts5.x按需引入实现 需要注意下,底下的椭圆,是在柱子底下“透”出来,颜色应该暗一点,才能视觉上看着有立体感。 成品,还原了大部分设计效果

    2024年02月06日
    浏览(44)
  • 如何在echarts的3d地球上以任意一个坐标点为圆心画一个标准的圆形(附代码)

    这是我用echarts做前端开发遇到的问题,似乎echarts没有提供在3d地球坐标面上画圆的方法。  而我的需求是要在地球上画出一个卫星通信的覆盖范围的圆形区域。  (效果展示) 最开始的时候我用网上的公式将经纬度乘系数转化为千米之后直接计算采样半径,然后在圆周中采

    2024年02月03日
    浏览(36)
  • echarts地图3D效果

     

    2024年02月11日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包