需求
还是爆炸效果，粒子效果占显存，导致帧率爆炸，因此换成billboard，效率也能提高起来
cesium 加载动图方案一：通过 libgif 库实现
javascript
let point = [113.94, 23.5]
// 加载gif
loadGif()
// 定位
flyTo()
/**
* 加载gif
*/
function loadGif() {
let url = '../../assets/images/minions.gif'
let gifDiv = document.createElement('div')
let gifImg = document.createElement('img')
// gif库需要img标签配置下面两个属性
gifImg.setAttribute('rel:animated_src', url)
gifImg.setAttribute('rel:auto_play', '1') // 设置自动播放属性
gifDiv.appendChild(gifImg)
let superGif = new SuperGif({
gif: gifImg
})
superGif.load(function () {
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(point[0], point[1]),
billboard: {
image: new Cesium.CallbackProperty(() => {
// 转成base64,直接加canvas理论上是可以的，这里设置有问题
return superGif.get_canvas().toDataURL()
}, false),
scale: 0.25
}
})
})
}
/**
* 定位
*/
function flyTo() {
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(point[0], point[1], 1000000),
duration: 4
})
}cesium 加载动图方案二：通过 gifler 库实现
javascript
let point = [113.94, 23.5];
// 加载gif
loadGif();
// 定位
flyTo();
/**
* 加载gif
*/
function loadGif() {
let url = '../../assets/images/fire.gif';
let gif = gifler(url);
let entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(94.875771, 43.596378, 0),
billboard: {
scale: 1,
sizeInMeters: true,
},
});
// 解析gif每帧图片，按时间序列进行切换
gif.frames(document.createElement('canvas'), function (ctx, frame) {
entity.billboard.image = new Cesium.CallbackProperty(() => {
return frame.buffer.toDataURL();
}, false);
});
}
/**
* 定位
*/
function flyTo() {
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(94.875771, 43.596378, 1000),
duration: 4,
});
}cesium 加载动图方案三：通过 apng-js 库实现
javascript
let point = [113.94, 23.5];
// 加载gif
loadGif();
// 定位
flyTo();
/**
* 加载gif
*/
function loadGif() {
let url = '../../assets/images/fire.gif';
let gif = gifler(url);
let entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(94.875771, 43.596378, 0),
billboard: {
scale: 1,
sizeInMeters: true,
},
});
// 解析gif每帧图片，按时间序列进行切换
gif.frames(document.createElement('canvas'), function (ctx, frame) {
entity.billboard.image = new Cesium.CallbackProperty(() => {
return frame.buffer.toDataURL();
}, false);
});
}
/**
* 定位
*/
function flyTo() {
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(94.875771, 43.596378, 1000),
duration: 4,
});
}