Ceisum
的BillboardGraphics
方法支持加载并显示jpeg
png
等格式的图片资源。实际开发中我们经常会有GIF
图加载的需求,而Cesium
没有直接支持GIF
格式的图片格式,那么怎么加载GIF
图呢?
1.解决思路
GIF
图是通过时间轴叠加 N 张图片实现图片的动态变化。因此如果能够通过某种方式将 GIF
图再解构成一张张的图片,并通过 Cesium
的 BillboardGraphics
按照时间顺序更新图片,即能实现 GIF
图的加载!
经过调研发现,第三方库 libgif
能够将 GIF
转化为 一组图片对象(DataUrl
),能够完全满足需求!
2.具体实现
首先创建图层:
/*
* 初始化地图
*/
function initMap() {
window.viewer = new Cesium.Viewer('map', {
animation: false,
fullscreenButton: false,
baseLayerPicker: false,
geocoder: false,
homeButton: false,
infoBox: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
imageryProvider: Cesium.createTileMapServiceImageryProvider({
url : '../lib/Cesium/Assets/Textures/NaturalEarthII',
fileExtension: 'jpg'
})
});
// 去除版权信息
viewer._cesiumWidget._creditContainer.style.display = 'none';
// 显示帧率插件
viewer.scene.debugShowFramesPerSecond = true;
}
其次调用 libgif
库实现图片解构,同时循环更新 Cesium
图片对象的 数据源:
/*
* gif测试
*/
function testGif() {
const gifDiv = document.createElement('div');
const gifImg = document.createElement('img');
// gif库需要img标签配置下面两个属性
gifImg.setAttribute('rel:animated_src', '../res/images/timg.gif')
gifImg.setAttribute('rel:auto_play', '0')
gifDiv.appendChild(gifImg);
// 新建gif实例
var rub = new SuperGif({ gif: gifImg } );
rub.load(function () {
var img_list = [];
// 获取 gif 图的每一帧图片
for (var i=1; i <= rub.get_length(); i++) {
// 遍历gif实例的每一帧
rub.move_to(i);
img_list.push(rub.get_canvas().toDataURL())
}
let flag = 0;
let len = img_list.length;
// 创建图片实体
let gif_entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard: {
image: img_list[0], // default: undefined
show: true, // default
scale: 0.3 // default: 1.0
}
});
// 循环更新 billboard
setInterval(() => {
flag++;
if (flag >= len) {
flag = 0;
}
gif_entity.billboard.image = img_list[flag];
}, 1000 / 30);
});
}
3.最终效果
4.总结
以上只是提供一个实现 GIF
图加载的思路,大家有更好的解决办法可以进一步交流!
注:示例代码可参见 CesiumLoadGIF。
created by @SpiderWang
转载请注明作者及链接