Question

在Cesium for WebGL中添加广告牌后，前端疯狂报Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. 报警告数量和添加信息数量有关系

加载代码如下：

viewer.entities.add({
            id: billboarddata.id,
            name: billboarddata.name,
            content: billboarddata,
            position: Cesium.Cartesian3.fromDegrees(Number(billboarddata.longitude), Number(billboarddata.latitude), 0),
            label: {
                text: billboarddata.work_name,
                font: '14px sans-serif',
                fillColor: Cesium.Color.WHITE,
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                outlineWidth: 2,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                pixelOffset: new Cesium.Cartesian2(0, -20),
                // distanceDisplayCondition: new DistanceDisplayCondition(...[0, 1000000]),
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            },
            billboard: {
                image: billboardurl,
                show: true,
                scale: 1,
                width: 20,
                height: 20,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                // distanceDisplayCondition: new DistanceDisplayCondition(...[0, 10000000]),
                // disableDepthTestDistance: [0, 10000000],
            },
        })

Answer 1

您好，这个错误通常与读取图片数据相关，你可以在billboard对象中添加willReadFrequently: true，该属性告诉Cesium在多次读取图片数据时优化性能。

希望可以帮到您

Comments

 billboard: {

                image: billboardurl,

                willReadFrequently:true,

                show: true,

                scale: 1,

                width: 20,

                height: 20,

                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,

                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

                // distanceDisplayCondition: new DistanceDisplayCondition(...[0, 10000000]),

                // disableDepthTestDistance: [0, 10000000],

            },

是这样增加吗？我增加以后同样会报这个错误啊

---

在使用Cesium之前设置willReadFrequently属性

const canvas = document.getElementById('my-canvas');

const ctx = canvas.getContext('2d');

ctx.canvas.willReadFrequently = true;

如果问题仍然存在，请确保您的代码中没有其他使用getImageData()的操作

---

您的图片方便提供吗？如果方便可以私信我留下您的qq