new mars3d.layer.BusineDataLayer({加载动态的.png图标

问题:

用BillboardEntity或者BusineDataLayer方法加载图标是静态的,如果用div的话,400个就会很卡顿

解决方案:

目前BillboardEntity加载是静态的,无法加载动图,网上搜了下,可以使用apngjs.js插件库预先对动图进行解析。

image支持动态属性。里面传入apngjs.js 处理后的动态帧图片。

  let url = '../../assets/images/wind.png'
  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')
  let blob = await loaderURL(url)
  let arrayBuffer = await blobToArrayBuffer(blob)
  let apng = apngjs.parseAPNG(arrayBuffer)
  let player = await apng.getPlayer(ctx)
  player.play()
 
  

  const graphic = new mars3d.graphic.BillboardEntity({
    position: new mars3d.LngLatPoint(116.328539, 30.978731, 1521),
    style: {
      image:  new Cesium.CallbackProperty(() => {
        return player.currentFrame.imageElement
      }, false),
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      label: {
        text: "Popup局部更新绑定的演示",
        font_size: 18,
        font_family: "楷体",
        pixelOffsetY: -45,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
      }
    },
    attr: { remark: "示例2" }
  })
  graphicLayer.addGraphic(graphic)

功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技

利用第3方库(gifler.js)加载gif,参考

function addDemoGraphic12(graphicLayer) {
  let gifImgBuffer
  const graphic = new mars3d.graphic.BillboardEntity({
    position: new mars3d.LngLatPoint(116.3, 30.8, 1000),
    style: {
      image: new Cesium.CallbackProperty(() => {
        return gifImgBuffer
      }, false),
      scale: 0.1,
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.CENTER
    },
    attr: { remark: "示例12" }
  })
  graphicLayer.addGraphic(graphic)

  // eslint-disable-next-line no-undef
  const gif = gifler("img/icon/tf.gif")
  gif.frames(document.createElement("canvas"), function (ctx, frame) {
    gifImgBuffer = frame.buffer.toDataURL()
  })
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/475114.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

javaSE练习题(一)

1、BMI是根据体重测量健康的方式。通过以千克为单位的体重除以以米为单位的身高的平方计算出BMI。下面是16 岁以上人群的BMI图表: 编写一个java程序,提示用户输人以磅为单位的体重和以英寸为单位的身高,然后显示BMI值。注意: 1磅是0.453592 37千克而1英寸…

GPU云服务器的优势和应用

GPU即图形处理器,是一种高性能计算加速器,主要用于处理复杂的图像、视频等。GPU云服务器,指的是在云计算环境下,通过云平台提供GPU计算能力的虚拟服务器。随着科技的迅猛发展,科技领域对其的讨论和应用也日益热烈、广泛…

高德地图——轨迹回放和电子围栏

功能点 地图的初始化显示电子围栏(先初始化在调接口显示电子围栏)显示定位显示轨迹轨迹回放 (回放速度无法控制是因为高德地图的版本问题,不要设置版本,使用默认的即可生效)获取当前城市及天气情况设置地图样式坐标拾取器重点 默认当前城市地图加载完成的生命周期this.ma…

Linux课程____进程管理

记录工作日志 script 240319.log CTRLd 退出 cat 240319.log //查看 一、查看进程 1.静态 ps -aux ps -elf 2.动态 top 3.pgrep 查看特定条件的进程 pgrep -l “log” pgrep -l "ssh" pgrep -l -U redhat 4.pstree 查看进程树 pstree -aup 所有…

element plus等框架中属性值是组件如何传入,替换分页图标

在 Vue 中替换element plus 分页图标 正常写法引入组件 import prevIcon from /components/xx.vue;<el-pagination layout"prev, pager, next" :prev-icon"prevIcon" :total"5" />利用 h 函数写法 const prevIcon h(div, [xr]);可以写…

排序算法:归并排序(递归)

文章目录 一、归并排序的思路二、代码编写 先赞后看&#xff0c;养成习惯&#xff01;&#xff01;&#xff01;^ _ ^<3 ❤️ ❤️ ❤️ 码字不易&#xff0c;大家的支持就是我坚持下去的动力。点赞后不要忘了关注我哦&#xff01; 所属专栏:排序算法 一、归并排序的思路 单…

第二话 让屏幕显示想要的东西

上一话搭建了可说是可以开发了 接下来想办法 让 屏幕显示想要的东西 但是报错: ************************************************************************** * Looking for Adafruit_ILI9341.h dependency? Check our library registry! * * CLI > platformio lib se…

【DataWhale学习笔记-蝴蝶书共读】大语言模型背后

从图灵测试到ChatGPT 1950年&#xff0c;艾伦•图灵(Alan Turing)发表论文《计算机器与智能》&#xff08; Computing Machinery and Intelligence&#xff09;&#xff0c;提出并尝试回答“机器能否思考”这一关键问题。在论文中&#xff0c;图灵提出了“模仿游戏”&#xff…

AD软件中怎么添加不同元素之间的间距规则呢

AD软件中怎么添加不同元素之间的间距规则呢 答&#xff1a;AD软件提供了某一个元素针对其他元素之间的间距规则的设置。 首先执行菜单命令【设计】-【规则】或者快捷键DR打开规则约束编辑器&#xff0c;然后在间距规则Clearance里面添加一个新的规则&#xff0c;如图1所示 图…

阅读MySQL知识2

1、三大范式 2、DML 语句和 DDL 语句区别 3、主键和外键的区别 4、drop、delete、truncate 区别 5、基础架构 6、MyISAM 和 InnoDB 有什么区别&#xff1f; 7、推荐自增id作为主键问题 8、为什么 MySQL 的自增主键不连续 9、redo log 是做什么的? 10、redo log 的刷盘…

19---时钟电路设计

视频链接 时钟硬件电路设计01_哔哩哔哩_bilibili 时钟电路设计 晶振是数字电路的心脏&#xff0c;数字电路需要一个稳定的工作时钟信号&#xff0c;时钟电路至关重要&#xff01; 1、晶振概述 晶振一般指晶体振荡器。晶体振荡器是指从一块石英晶体上按一定方位角切下薄片&…

H6603实地架构降压芯片100V耐压 80V 72V 60V 48V单片机/模块供电应用

H6603 是一款内置功率 MOSFET降压开关转换器。在宽输入范围内&#xff0c;其最大持续输出电流 0.8A&#xff0c;具有极好的负载和线性调整率。电流控制模式提供了快速瞬态响应&#xff0c;并使环路更易稳定。故障保护包括逐周期限流保护和过温保护。H6603 最大限度地减少了现有…

传输层/UDP/TCP协议

再谈端口号 TCP/IP协议用“源IP”&#xff0c;“源端口号”&#xff0c;“目的IP”&#xff0c;“目的端口号”&#xff0c;“协议号”&#xff0c;这样一个五元组来标识一个通信&#xff08;可以用netstat -n来查看&#xff09;。 端口号的划分和知名端口号 我们之前就说过&am…

数据泄露问题怎么解决?迅软DSE加密软件助您守护重要信息

企业信息泄露的危害 企业数据泄露事件不仅给企业带来了经济损失和声誉损害&#xff0c;还可能导致用户个人信息的泄露&#xff0c;引起社会广泛关注。 因此&#xff0c;企业需要采取更加严格的数据保护措施&#xff0c;使用数据加密系统以防范潜在的数据泄露风险。同时&#…

每日一题——LeetCode1710.卡车上的最大单元数

方法一 排序贪心 能装的箱子数是有限的&#xff0c;那么就要使每个箱子里的单元数尽可能大&#xff0c;将数组按照单元数进行排序&#xff0c;优先装单元数最大的箱子&#xff0c;再考虑后面的箱子 var maximumUnits function(boxTypes, truckSize) {boxTypes.sort((a,b)>…

cocos 3.8开发 微信小游戏分包技巧压缩主包

Creator 版本&#xff1a; 3.8.2 目标平台&#xff1a;小游戏开发 压缩后 我不知道别人压缩几百kb是怎么做到的。不过哪个要钱。 我这个技巧不用花钱。 论坛有教程但是没有教详细怎么做。 开整&#xff01; 做一个空白的场景。然后写一个load脚本。load主场景。 从代码可…

腾讯音乐2023阵痛依旧:董事长彭迦信被“打脸”,月活持续减少

多项指标下滑&#xff0c;腾讯音乐2023年仍是喜忧参半。 3月19日&#xff0c;在线音乐与音频娱乐平台腾讯音乐娱乐集团&#xff08;TME&#xff0c;下称“腾讯音乐”&#xff0c; NYSE:TME、HK:01698&#xff09;发布截至2023年12月31日的2023年第四季度及全年未经审计财务业绩…

Google云计算原理与应用(四)

目录 七、海量数据的交互式分析工具Dremel&#xff08;一&#xff09;产生背景&#xff08;二&#xff09;数据模型&#xff08;三&#xff09;嵌套式的列存储&#xff08;四&#xff09;查询语言与执行&#xff08;五&#xff09;性能分析&#xff08;六&#xff09;小结 八、…

一款简单易学能快速上手的php开源代码,从创建一个网站开始学习

简单易学能快速上手的php开源代码从建站源码开始 学习PHP建站&#xff0c;php语法、逻辑、判断、调用数据等操作类型&#xff09; 此开源代码选择了比较成熟的ThinkPHP框架开发并遵循Apache2开源许可协议发布&#xff0c;拥有快速、简单的面向对象的轻量级PHP开发框架&#xff…

【重制版】ICML 2023 | 时间序列(Time Series)和时空数据(Spatial-Temporal)论文总结

2023ICML&#xff08;International Conference on Machine Learning&#xff0c;国际机器学习会议&#xff09;在2023年7月23日-29日在美国夏威夷举行。2023年ICML 共收到 6538 份投稿&#xff0c;其中 1827 份被接收&#xff0c;接收率约为 27.9%。&#xff08;好像ICML24要开…