Mars3d实现加载gif动图

最新推荐文章于 2024-08-08 10:10:28 发布

mianmianwu

最新推荐文章于 2024-08-08 10:10:28 发布

阅读量398

点赞数

分类专栏： app Mars3d vue 文章标签： 3d javascript vue.js

本文链接：https://blog.csdn.net/m0_69803146/article/details/130681075

版权

Mars3d 同时被 3 个专栏收录

176 篇文章 16 订阅

订阅专栏

vue

172 篇文章 2 订阅

订阅专栏

app

155 篇文章 0 订阅

订阅专栏

文章介绍了在Mars3D三维可视化平台上，使用Vue和两种不同方式来绘制台风当前位置的gif点。方式一是通过DivGraphic直接添加HTML元素，方式二是借助第三方库SuperGif加载并显示gif动画。这两种方法都实现了在地图上展示台风动态效果的功能。

摘要由CSDN通过智能技术生成

官网有相关示例参考：功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技

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

方式1：

// [终点]绘制台风当前位置gif点
const gifGraphic = new mars3d.graphic.DivGraphic({
position: [endItem.lon, endItem.lat],
style: {
html: `<img src="img/icon/typhoon.gif">`,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.CENTER
}
})
this.typhoonLayer.addGraphic(gifGraphic)

方式2：

// 利用第3方库（libgif.js）加载gif
function addDemoGraphic12(graphicLayer) {
const gifImg = document.createElement("img")
gifImg.setAttribute("rel:animated_src", "img/icon/typhoon.gif")
gifImg.setAttribute("rel:auto_play", "1") // 设置自动播放属性

// eslint-disable-next-line no-undef
const superGif = new SuperGif({ gif: gifImg })

superGif.load(function () {
const graphic = new mars3d.graphic.BillboardEntity({
position: new mars3d.LngLatPoint(116.3, 30.8, 1000),
style: {
image: new Cesium.CallbackProperty(() => {
// 转成base64,直接加canvas理论上是可以的，这里设置有问题
return superGif.get_canvas().toDataURL()
}, false),
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.CENTER
},
attr: { remark: "示例12" }
})
graphicLayer.addGraphic(graphic)
})
}