1. A concise explanation of the problem you're experiencing.
I am working on an application that plots billboards and labels to the Cesium map. Our application contains the information to be plotted in a datasheet, each record shows up as a row in the datasheet. The record/row shows information on the object such as name, location and a checkbox for if it is plotted or not. Our application can have multiple datasheets which show up as tabs; only the datasheet in focus is the one that will be plotted on the map (switching from datasheet A to datasheet B will unplot anything that has been plotted on A, and plot anything on B that has been selected to plot, this happens in batches at the same time (ie A won't fully unplot before B plots)). Datasheets can have anywhere from 1 to 20k+ records/rows in it, when these are plotted each record/row will display its own billboard/label on the map. So if a datasheet with 15k records/rows has Plot All selected, then 15k billboards each with its own label will appear on the map.
The issue arises when switching between datasheets multiple times that each contain 15k+ records/rows. The overall performance of the application will slow down, with the unplot/plot taking longer and longer, until eventually FireFox will crash (performance slows down on both 32 and 64-bit FireFox browsers, but we have only seen the crash on 32-bit). Not 100% sure, but the performance issues seem to be related to the memory usage of labels. Without labels the plot/unplot goes much faster and there isn't as much lag with moving the globe. I checked some memory numbers (I'm having non-related issues with my browser today so I can't get specific numbers), and plotting 10k billboards seemed to use up only a few dozen MB which was freed up once the billboards were unplotted. Plotting the billboards and labels for 10k records took up about 300 MB, and once unplotted 250 MBs were still being used by the browser.
So far we've tried only showing the labels once you zoom in to a certain level, which helps initially but once you zoom in and then out you get the same issue. We also are discussing allowing a toggle that the user can select to show or hide all labels but we aren't sure yet if the customer will go for that. So ultimately I'm wondering what, if anything, we can do to improve performance when it comes to showing/hiding tens of thousands of labels in the Cesium map.
2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.
Created entity:
this.cesiumSymbol = {
id: this.id,
name: this.opts.name,
description: this.opts.title,
position: Cesium.Cartesian3.fromDegrees(parseFloat(this.lon),
parseFloat(this.lat)),
billboard: {
image: this.iconUrl,
width: 15,
height: 15
},
label: {
show: opts.labelVisibility,
text: opts.labelText,
font: "10px monospace",
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
fillColor: opts.labelColor,
outlineWidth: 1,
verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
horizontalOrigin = Cesium.HorizontalOrigin.LEFT;
pixelOffset = new Cesium.Cartesian2(0, -6);
}
};
Adding/removing entity to map:
window.cesiumViewer.entities.add(this.cesiumSymbol);
window.cesiumViewer.entities.removeById(this.id);
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
We display lots of records/billboards on the map and we want those records/billboards to have a label attached to them to show the user what that record is (different records could potentially share the same billboard image).
4. The Cesium version you're using, your operating system and browser.
Cesium 1.58
Windows 10
Firefox 60.7.0esr 32-bit
I'll try to get exact memory numbers soon once I (hopefully) fix my browser issues. Any help would be appreciated, thanks!