html%3ch1%3e标题,svg - How to draw custom dynamic billboards in Cesium.js

在使用Cesium进行地图应用开发时，遇到一个问题：需要为每个绘制的元素（如飞机）添加状态指示器，例如燃油状态。由于Cesium的绘图工具基于地理位置绘制，而我希望指示器能固定在图标附近，不会随缩放远离。尝试通过CZML将SVG路径作为billboard的image属性，但无法显示。尝试了HTML和文本数据URI也无效，只有PNG的base64字符串或服务器上的图片路径可以正常显示。问题可能在于动态生成SVG的实现方式或CZML的使用。寻求解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

I'm currently using Cesium for a mapping application, and I have a requirement to have status indicators for each item I'm plotting (for example, if the item I'm plotting is an airplane, then I need to have a fuel status indicator). I can't use Cesium's drawing tools to do this because they are drawn using geographic locations, but I need my status indicators to simply be located near the billboard and not get farther away from the billboard as users zoom in and out.

Cesium's CZML documentation states that the billboard's "image" property can take a data URI, so I figured the easiest way to handle this would be for me to create an SVG path on the fly and embed it in the image property, but when I do this in Cesium, it does not show up. For example, I tried a simple test like this:

"data:image/svg+xml,

xmlns='http://www.w3.org/2000/svg'>

When that didn't show up, I tried just simple HTML and text values, like this:

"data:,Hello%2C%20World!"

and:

"data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E"

but those don't show up either. I am able to get a png to show up if I put the base64 string in the data URI, as well as a path to an image stored on the server, but I really need to be able to draw custom images on the fly. I can't use a fixed set of pre-generated images set with various statuses as a hack (I can explain why if anyone wants those details :) ).

Does anyone know if there's something I'm doing wrong here, or if there is another way to accomplish what I need to do?

Edit Just wanted to add that I am using Firefox version 29 and it normally has no problem displaying the non-encoded embedded SVGs like that. Just in case, that's one of the reasons I was also trying simple HTML or text.

Edit2 I am using CZML streaming from the back end to plot my items, here is a simple test example showing where I am trying to put the image information:

{

"id":"test",

"billboard" : {

"image" : "data:image/svg+xml,

"show" : [ {"boolean" : true} ]

"position":{

"cartographicDegrees":[0.0, 0.0, 0.0]

"label":{"text":"TEST"},

}

If I put a base64 png string in there, or a path to a static image file, it works fine.

Thank you!