如何在Cesium.js中绘制自定义动态广告牌 [英] How to draw custom dynamic billboards in Cesium.js

问题描述

我当前正在将Cesium用于地图绘制应用程序，并且我需要为要绘制的每个项目都配备状态指示器(例如，如果要绘制的项目是飞机，那么我需要燃油状态指示器).我无法使用Cesium的绘图工具来执行此操作，因为它们是使用地理位置进行绘制的，但是我需要状态指示器仅位于广告牌附近，而不能随着用户放大和缩小而离广告牌更远.

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的CZML文档指出，广告牌的图像"属性可以采用数据URI，因此我认为处理此问题的最简单方法是即时创建SVG路径并将其嵌入到图像属性中，但是当我在Cesium中执行此操作时，它不会显示.例如，我尝试了一个像这样的简单测试:

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,<svg viewBox='0 0 40 40' height='25' width='25'
xmlns='http://www.w3.org/2000/svg'><path fill='rgb(91, 183, 91)' d='M2.379,
14.729L5.208,11.899L12.958,19.648L25.877,6.733L28.707,9.561L12.958,25.308Z'
/></svg>"

当那没有出现时，我只尝试了简单的HTML和文本值，如下所示:

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

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

和:

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

但那些也不会出现.如果将base64字符串放入数据URI中以及存储在服务器上的图像的路径，则能够显示png，但是我确实需要能够动态绘制自定义图像.我不能将固定状态的固定生成的具有各种状态的图像集用作骇客(我可以解释为什么有人要这些细节:)).

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?

编辑只是想补充一点，我使用的是Firefox 29版，显示这样的非编码嵌入式SVG通常没有问题.以防万一，这也是我也尝试使用简单HTML或文本的原因之一.

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 我正在从后端使用CZML流来绘制我的项目，这是一个简单的测试示例，显示了我要在其中放置图像信息的地方:

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,<svg viewBox='0 0 40 40' height='25' width='25' xmlns='http://www.w3.org/2000/svg'><path fill='rgb(91, 183, 91)' d='M2.379,
14.729L5.208,11.899L12.958,19.648L25.877,6.733L28.707,9.561L12.958,25.308Z'
/></svg>",
"show" : [ {"boolean" : true} ]
},
"position":{
  "cartographicDegrees":[0.0, 0.0, 0.0]
},
"label":{"text":"TEST"},   
}

如果我在其中放置了base64 png字符串或静态图像文件的路径，则可以正常工作.

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

谢谢！

推荐答案

绘制SVG确实可以达到我的预期，但是我相信我可能只是弄错了其中一个大小元素(高度/宽度或x， y).只要这些值不完全匹配，就不会显示该图像，因为它在我为其定义的视图区域之外.

Drawing an SVG does work as I expected it to, but I believe I may have just been getting one of the size elements wrong (height/width or x, y). Whenever those values don't match up just right, the image isn't shown because it's outside of the view area I've defined for it.

请注意，我从来没有得到过简单的html示例工作，但是那不是我所需要的，因此我没有进一步进行研究.

Note that I never did get the simple html example work, but that's not what I needed anyway, so I didn't pursue it further.

这篇关于如何在Cesium.js中绘制自定义动态广告牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！