View rendering is very slow if drawing elements inside a intreval loop

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

I am drawing pollylines, circles, billboards, labels inside a for loop. which is getting updated in every 2000 ms (2 seconds) after getting Geo coordinates from server. I was able to do this but after 10 iterations html view gets too slow and i am facing a bad performance issue like button clicks on HTML page is too slow. Any suggestions or links that i can follow will be appreciated.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

4. The Cesium version you’re using, your operating system and browser.

cesium: “^1.51.0”,

OS: windows 10 - 64 bit

I am running the app inside electron js environment.

2

Can you please show how you’re drawing your entities? If you’re adding all your entities again to the scene every 2 seconds, then it’s likely you’re ending up with too many/duplicate objects in your scene. You might want to consider destroy/hiding/removing entities that no longer need to be visualized.

3

Hi Omar,

Thank you for your reply. I am destroying the previous element before updating. Please check one of my drawing code. This is to show a label on each marker.

let marker = ;

let _dataList = ;

setInterval(function(){

_dataList = appModel.getData();

for(var i = 0; i < _dataList.length; i++) {

drawMarker(_dataList[i], i);

}

}, 2000);

function drawMarker(data, index) {

if(marker[index]){

marker[index].destroy();

}

marker[index] = scene.primitives.add(new Cesium.LabelCollection());

marker[index].add({

     position: Cesium.Cartesian3.fromDegrees(data.Lon, data.Lat),

        text: "Name:" +  data.name,

font: “20px OpenSans”,

fillColor: new Cesium.Color.fromCssColorString("#000000"),

showBackground: true,

backgroundColor: new Cesium.Color.fromCssColorString("#ffffff"),

backgroundPadding: new Cesium.Cartesian2(7, 5),

pixelOffset: new Cesium.Cartesian2(55, -55),

scale: 0.9

});

}

4

How big is _dataList on each iteration? Why are you adding a new LabelCollection for every new label you create instead of adding all the labels to one LabelCollection (or just using the Entity API to add the labels like in this example: https://sandcastle.cesium.com/index.html?src=Labels.html) ?