new mars3d.layer.BusineDataLayer({加载动态的.png图标

本文主要是介绍new mars3d.layer.BusineDataLayer({加载动态的.png图标，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题：

用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 gifImgBufferconst 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-undefconst gif = gifler("img/icon/tf.gif")gif.frames(document.createElement("canvas"), function (ctx, frame) {gifImgBuffer = frame.buffer.toDataURL()})
}

这篇关于new mars3d.layer.BusineDataLayer({加载动态的.png图标的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---