Multi-colored label

Itay_ba · August 30, 2021, 7:49pm

I’m trying to implement my own custom label which would be comprised from 3 rows in different colors.
Since Cesium label does not support it at the moment, I was thinking of using a billboard with an SVG based text to implement it.
Am I going the right way? What should I pay attention while implementing this?

sam.rothstein · August 31, 2021, 2:23pm

@Itay_ba

Thank you for the detailed explanation of your problem. You are absolutely correct - CesiumJS does not have robust support for creating intricate labels. I agree with your suggestion. Using a Billboard with an SVG is the correct tool for this application. I have provided the documentation for Billboard for your reference.

https://cesium.com/learn/cesiumjs/ref-doc/Billboard.html?classFilter=billboard

Let me know if you have any other questions or concerns!

-Sam

Itay_ba · October 28, 2021, 12:00pm

@sam.rothstein
Hi,
I think I have made some progress in my implementation but I am Afraid I have reached a dead-end.
My labels should also be dynamic , meaning they should be able to change in a large scale frequently .
Sadly , billboard setImage takes too long.
Setting 25 images at once take about 11ms when calling Billboards setImage while without it it takes about 0.4ms.
Any ideas why that is happening ?

sam.rothstein · October 28, 2021, 6:36pm

@Itay_ba

I am happy to hear that you have made some progress! Do you think this slight delay in rendering time makes your current implementation unfeasible? If so, do you have any workarounds in mind?

To be candid, I am not super familiar with the back-end of setImage. It looks like setImage calls createBillboardPointCallback in createBillboardPointCallback.js.

github.com

CesiumGS/cesium/blob/48c8abaca6257b568edc8c992ede5f2c487cdd38/Source/Scene/createBillboardPointCallback.js#L13

    
      
          *
          * @param {Number} centerAlpha The alpha of the center of the point. The value must be in the range [0.0, 1.0].
          * @param {String} cssColor The CSS color string.
          * @param {String} cssOutlineColor The CSS color of the point outline.
          * @param {Number} cssOutlineWidth The width of the outline in pixels.
          * @param {Number} pixelSize The size of the point in pixels.
          * @return {createBillboardPointCallback.CanvasFunction} The function that will return a canvas with the point drawn on it.
          *
          * @private
          */
          function createBillboardPointCallback(
           centerAlpha,
           cssColor,
           cssOutlineColor,
           cssOutlineWidth,
           pixelSize
          ) {
           return function () {
             var canvas = document.createElement("canvas");
          
          
   var length = pixelSize + 2 * cssOutlineWidth;

Looking through the code, I am not seeing anything that looks especially computationally intensive. It is likely that the process of accessing the HTMLImageElement is causing the delay. A lower fidelity image or a faster network connection might streamline this process. I am curious to hear your overall thoughts.

-Sam