实现思路以及原理:
1.billboard支持图片格式可以是图片地址也可以是base64图片内容;
2.获取gif图片的帧值更新对应image;
3.Cesium.CallbackProperty;
根据上面思路,我们可以找有没有现成获取gif帧换面的工具:buzzfeed/libgif-js
有了上面的工具就已经成功一半了;
libgif插件需要一个dom对象,所以我们在页面里面增加一个标签:
<script src="libgif.js"></script>
<script src="rubbable.js"></script>
<img id="example1" src="images/Rotating_earth_(small).gif" rel:auto_play="1" width="467" height="375" rel:rubbable="1" />
实现如下:
function fnLoadGif(obj) {
var superGif = new RubbableGif({
gif: obj.img
});
superGif.load(() => {
var billboardEntity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(obj.position.x, obj.position.y, obj
.position.z),
billboard: {
image: new Cesium.CallbackProperty(() => {
return superGif.get_canvas().toDataURL(
"image/png");
}, false),
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
scaleByDistance: new Cesium.NearFarScalar(500, 1.0, 2000, 0.1)
}
});
});
}
fnLoadGif({
img: document.querySelector("#example1"),
position: {
x: 120.42867,
y: 31.32425,
z: 20
}
});