CesiumGS
Cluster billboard not showing in Cesium 1.130.0
What happened?
Hello,
I have multiple entities stored in a dataSource with the clustering enabled. In previous versions, the label and the billboard configured for the different clusters appeared correctly, but since i've updated to the most recent Cesium version, the label still shows but the billboard doesn't appear anymore. I've checked the properties of the cluster but I see them right, and I didn't notice about any changes in this aspect when upgrading.
This is the function that applies the styles for the cluster:
const initializeClusterStyle = (clusteredEntities, cls) => {
cls.label.show = true;
cls.label.text = ${clusteredEntities.length} entities;
cls.label.outlineWidth = 3;
cls.label.font = '18px sans-serif';
cls.label.style = Cesium.LabelStyle.FILL_AND_OUTLINE;
cls.label.fillColor = Cesium.Color.LIGHTGREEN;
cls.label.pixelOffset = new Cesium.Cartesian2(0, -20);
cls.label.verticalOrigin = Cesium.VerticalOrigin.CENTER;
cls.label.horizontalOrigin = Cesium.HorizontalOrigin.CENTER;
cls.label.heightReference = Cesium.HeightReference.RELATIVE_TO_GROUND;
cls.label.disableDepthTestDistance = Number.POSITIVE_INFINITY;
cls.label.scaleByDistance = new Cesium.NearFarScalar(minHeight, 1.6, maxHeight, 1);
cls.billboard.show = true; cls.billboard.image = Settings.pointIcon; cls.billboard.scale = Settings.pointIconScale; cls.billboard.color = Cesium.Color.LIGHTGREEN; cls.billboard.verticalOrigin = Cesium.VerticalOrigin.CENTER; cls.billboard.horizontalOrigin = Cesium.HorizontalOrigin.CENTER; cls.billboard.heightReference = Cesium.HeightReference.RELATIVE_TO_GROUND; cls.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY; };
...
cluster.clusterEvent.addEventListener(initializeClusterStyle);
¿Any suggestions?
Thanks in advance.
Reproduction steps
- Create a dataSource
- Enable the clustering for the dataSource
- Config the stilles with a billboard
- Add entities to the dataSource (at least the mínimum configured)
Sandcastle example
No response
Environment
Browser: Microsoft Edge CesiumJS Version: 1.130.0 Operating System: Ubuntu 22
Hi @Aorrihtos, thanks for the report!
We would appreciate it if you can provide a little more information to help us track down the bug:
- Does the Clustering Sandcastle still display correctly on your system? (It works for me on Windows with both Google Chrome and Microsoft Edge.)
- In which Cesium version did your code work as expected? Was it 1.129, or something older?
- Can you share a Sandcastle example that demonstrates the bug? (Once you have your code snippet working in Sandcastle, you can click on the "Share" button to obtain a URL to your example).
Hi @jjhembd, thanks for your response!
I was trying to reproduce this bug in Sandcastle so you could see it, but I couldn't, so I guess it may not be an issue with the version itself. However, I'm still experiencing this incorrect behavior in my codebase, and I don't know what it might be related to. When I downgrade to the previous Cesium version we were using, it works as expected.
I've noticed that we were using an old version (1.108.0), so I'm not sure exactly which version started misbehaving—sorry about that. In the meantime, I’ll try upgrading one version at a time to see when it breaks.
That said, the Sandcastle example I'm testing is almost identical to the use case in my code, so I'm unsure what's happening.
Link to the Sandcastle example:
https://sandcastle.cesium.com/#c=tVYLbxo5EP4rFncSIMFCIM2DUnQt0AYdBxEhOZ1ClJpdA1aNd2V7SWjEf7+x971L1Da6ixRhz3jeM9+s7XKp0I6SJyLQB8TJE+oTSf2tdWdolUXJNve+yxWmnIhFqfp+wRfcNpKOklmxvi+Vux1ghW9cX9ikUvbx7pFymzqEK1lOC3uUf/Ipc/Kmr2N6RT+PH/cZKDePE0lrJdztnDwr7WnAX5RqsTcuc4U1Hn25mn+ZDYeTGjq9qFrK1f7dzsZZ9UOuqNq/qp0YdkH5bDg4pjXSSzlVFDP6nYTe36g9I2CkEnpLHGOXEllDNpNV9KGHXhYc6YvF8JIwS27cJ5BQwifvsxwFrgHn6+8vBW0WI3ytNgdEQsLXnKzrKwYF/Zs6agM62jn2CgoO5PLJhfeMJOayLomgq3LumQzDCXMy1kQTovV5NB4/fpwMHqe38/FoMszrp4yZDCbC+WrlJDz6TNh0tZJE5XoOCwUnzFuVZg3VW81qTnJHhKI2ZlNB15QnBu8ydKs/nMyHs5zsxhX0u27+gvRVjvOKPKHrjZqRFRSH26lUXWUZ1mRayJFDJV4yMiCe2syJVAMqFQ6UTPztEvrzenozmo/uho+jyefRZDT/x7ReoGMJGV66WDhHGyjh0i1ek6Dtwx498sj+yVIlEm9LeiL/9sSndLwp+Yn82wpwSM2/HWMWQKUV3ihfa+AJLhbh2oaTFChimIafYW6qc9ZMcbYAK1sA5RBSAF3gRSswGz4Jf4c7mH8LO445jMF/AiBeOQ5LAXA1GmjlAnQjjASpRwE8UYAJtSFm8PTUQxBRkC8o5eoBXLHjPjoaS/M1RnIxngR7yXLibSJ1JBXIZGaNuBKCgSMouNc1vG9fWqfnzdMWgEHTal+cn797qMWMs8v2ZcQ4a6cY582zSOLyvPWw4A/GSKweIFEMsb2pVCJSAta6uBHQGh8NFSE9eR1T11pAiEQ7BfBqm2UzIGtBiIxN3DcfarHQ/clDNdQT92gHhaYQMoPcSVZZLWKY4e0U91bAP4S/BnNS6vRy6aBFKdyLhg3rL2LHAJ5T/Gn8sf9npFr/HHSxDtV0RW28JQJbK7afu0GqHJguyvGvpEZCbjLpMYQoRY4vQm0nxnqpVuqaZdWLAviDbj1XKOQLVrGshiJbj2Ew2Fj69jeiLFvKYJHov9+U67IlFkl6oAbY/rYWrs+hCGK9xBXdcdF/07pIpKHu0BQwMR106j2nyEtXwGdGXWCH+jLLPBRMU+75Ku1ABLF1mOQ1RLqljsNI0WpduV4HtTKWI9bSVfDBluWGpruNdMK6Dt0h6nw48kUI846lBM7KZ0yj0aLU6zbgfUGUuVhbnYLnDO/1s81JbxwQLcvqNuB6XDJMAohEXnaVxs1eElJXLV1nnyJoksjcNcXpXWuYQQZnug24F19kKUALcq/2HgFfhJaEsAGG4XaiT/gZTq1mE84Aa15I1shVX1KuA9hh5pvpjCCuhgzp1oNXwCgbE+VUgMeN67HUViDN2uSPrBT0FSIGgviJpP0V7BwUfYXrOv8H2WulsvfD5BX33v+ZxKK1X04mXDM9CfdU06Y7/V8
Any suggestions?
Thanks in advance!
While debugging the application, I noticed that the clustered entity's billboard has a _imageTexture attribute with the following values:
_index: -1 _loadState: 2 ready: false width: undefined height: undefined
From what I’ve researched, this seems to indicate that Cesium had trouble adding the image to the texture atlas, and was unable to load it properly. However, I’m using the same image to generate billboards for non-clustered entities in the same file, and those render without any issues.
In both clustered and non-clustered entities, I’m loading the image like this:
{ cluster/entity }.billboard = { url_to_image }
I’ve double-checked, and the URL is fully accessible and returns the expected image. Are there any alternative methods for loading billboard images? Or any other suggestions that could help me solve this issue?
Thanks in advance.
I have another update,
I've noticed that the billboard is indeed in the map but it doesn't show the image. Adding a hover tooltip over the cluster billboard works properly, but the image is not loaded.
Okay @jjhembd, now i've finally found the problem! Better late than never.
The problem is related to the position of the clustered entities. When having entities inside the cluster that have a sampled position instead of a constant position, the changedEvent of the cluster, which is used to establish the styles of the clusters, triggers all the time even if the camera is not moved or the entities changed it's position.
The billboard doesn't appear due to the changedEvent being triggered with the cluster default values, which sets the billboard show to false and the label shows to true.
In the previous version of Cesium that we were using (1.108.0) it was behaving correctly with the same entities with sampled properties.
You can see this behaviour on the sandcastle:
https://sandcastle.cesium.com/#c=tVeNb9o4FP9XLO6kphIYSrt+MFbdVtjKHQdVy3Y6lapzEgPWjB3ZTls28b/fs5OQhNDbrtpVQrHf8/t+/j03kEIb9MDoI1XoDRL0EV1QzeIl/uRo3rQWuP2FFIYwQdW0tv96KqYicJKh0WWxi1gbuewRQ25krALq7cXk4Z6JgIVUGL1XFI6YeBczHm6bvtrQPXt8c/iCg3J3OJfEMyWXE/pkrKcJf1qrb7yRXCo8HHy4nHy47vdHdXR0uo+NtP59vB6W1feFYWb1rHbq2BXl1/3eLq2ZXiaYYYSzrzT1/sasOAUjXuotDZ1dRnUdBVzvozfn6NtUILvBnPiUY72QjyBhVExflzkGXAPO51+/VbRhTsXcLNaIpoTPW7IyNhwK+hcLzQJ0HG6xZ1BwIO8dnEZPSBOhG5oqNtvbOqbTcNKcDC3RhYjfD4bD+7ej3v3442Q4GPW39TPOXQZz4e1qbUlE7Iny8WymqdnqOaIMrIhoe606arRb+1uSD1QZFhA+VmzORG7wU4mOL/qjSf96S3YhFftqm78ifbnFeUaesvnCXNMZFEcEhVRdlhl4NK7kKGSa+Jz2aGQWE6pNj2lDEiWjeOlDf16NbwaTwaf+/WD0fjAaTP52rZfo8CHDviQq3NlAOZctyZwmbZ/26I5DwQ+WKpd4WdJz+ZcnvqDjRcnP5V9WgHXh/gcbzAKoxOmOibkFnmSDqbA2wrxAGcM1/DURrjrHrQJnCbCyBFBOIQXQBU60E7PpkfTbf4D7j0kYusUQ/KcA4t5uWEqAq9lEMwnQjQhStJEF8MgAJsyCuotnbz0EkQX5DRVcXYMrwaaPdsbSeo6Rb5wnyVzC4WaaaBuJB5ksjRGpIRhYgoJbW8PbwzN8dNI6agMYtPDh6cnJq7v6hnF8dniWMY4PC4yT1nEmcXbSvpuKO2dkox4gUfVJsPC8jFQAa+fJfcYoXJQMmw7dLOnRuaJUbzTctu7qmwBuD+5S5HLaNFlG0BdXKfdKyQiuzqqMfTe7D3mJomdU2Egeob/7T0aRSHJimZNVVLggFRa+HA97/6rUJ8GXn68VCp7E6KU6fo85pBNmLcVCPnr79TztSdD2Zy9bNvhcz7gqgRVAwo67Z/WEkIl2nnMgPbfBhA5KVSHkgLOTPx3qGcOBZaf6Tkj46/TrML6gzg7zDprW0neIY8NzI2NvBuaW4nfDtxd/ZKrtZ23TsN4v3qCALKkieMZXE5mkIgQ0Y4Ikof9Yr2po1lK/OgL0rDMexirVduCs1+q1rnscnGcB/MaWkVQGxYp7GDcNhXxDFXXTj4Mv1OBA66SA9u8XIyX3icrTAzWABpsrGQsogpr7xLM3PPu18GkuDXWFogNCddBR9FQg+1LBs66hSMhiXWauK6aZiGJTdCAbaQ1AzjlEumRhyGnVasPIqIPaJcsZy5cGHshlbmq62ywmrBuyB8TCNzte4ICvRGvgzGLOLfpPa+fdJpyviHJJrNUxeM7Jyh5bHJwPEyLGuNuE7W7JNAkgknnZNXZOnechdY0vw1WBYEmqtLeU8PzKwjpyuN5twr56okwBWpJ7AxABvigrCWHD2IPdgV2RJ1i1Wy1YwxiJUrKdFA2fCRvAA+Gxu53ZSKkjR/oYwSlg7DkTe4UAdxu319JagTRbk9+zUtFXiRgI6geS9mcy41H2X4+t80/IXruQve8mr/rO+D+TWLX2n5MJ21JPwr7QtMVO/wc
Thanks for the update here @Aorrihtos, I can reproduce the issue: I see a green marker in the cluster when not using the sampled positions, but I don't see it when using sampled positions.
This appears to be a regression from https://github.com/CesiumGS/cesium/pull/12495.
CC https://github.com/CesiumGS/cesium/issues/5096#issuecomment-3133638738 for the related (and ultimately underlying) issue capturing the event firing continuously.