问题:
用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()
})
}