.js willReadFrequently

CesiumJS
1

I just started adding count(s) labels to the top of arrows on my globe, and when I did, I started getting these warnings

Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See:
Cesium.js:1 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: HTML Standard

This is the code I am using to produce the arrows and labels:

                            // Calculate position for the arrow and label
                            const position = Cesium.Cartesian3.fromDegrees(stateLongitude, stateLatitude, 600000); // Set height with offset
                            
                            // Create black arrow representing the outage
                            const arrowEntity = viewer.entities.add({
                                position: position,
                                polyline: {
                                    positions: [position, Cesium.Cartesian3.fromDegrees(stateLongitude, stateLatitude, 0)], // Set height to 0 for the arrow's base
                                    width: 2, // Set width to 2px
                                    material: new Cesium.ColorMaterialProperty(Cesium.Color.BLACK) // Set color to black
                                },
                                name: 'Outage Arrow',
                                description: `State: ${state}<br>Outage Count: ${outageCount}`
                            });


                            
                            // Add label to display outage count aligned with the arrow
                            viewer.entities.add({
                                position: position,
                                label: {
                                    text: `${outageCount}`,
                                    font: '14px sans-serif',
                                    fillColor: Cesium.Color.YELLOW,
                                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                                    outlineWidth: 2,
                                    outlineColor: Cesium.Color.RED,
                                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                                    pixelOffset: new Cesium.Cartesian2(0, 0), // Offset to position the label above the arrow
                                    pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.0e3, 1.0, 1.5e6, 0.2),
                                    willReadFrequently: true
                                }

                            });

And it is the second part which triggers the warnings. It’s pretty understandable with the globe turning, that remapping the labels or arrows is beyond my understanding graphically. But all I am asking is simply, is there a fix for this other than removing the count labels over the arrows?

I’ve read enough guesses on the web. If someone has actually found a fix, I’d love to read it.
Thanks tons

2

Hi, what version of CesiumJS are you using? This should not occur when using the most recent versions, but can occur in older versions.

3

did you solve it? it due to the labels for sure, when i remove the labels, the warning disappear