Javascript 定制铯html广告牌

我希望能够创建一个div，并给它一个高度、宽度和类。然后将div添加到铯元素地图中作为广告牌

我可以创建带有图像和标签的广告牌，还可以找到关于如何使用svg的链接，但我很难弄清楚如何使广告牌包含动态生成的html。该项目使用类名将字体图标应用于div

---

有没有办法将html插入广告牌？或者还有其他更适合这个的课程吗？我是铯的新手，愿意接受建议

广告牌用于显示光栅化数据，如图像。如果要将html呈现为一个，则必须创建一个画布元素，然后将该画布作为其图像属性传递给公告牌

如果你实际上只需要有一个图标/图像可见，然后在用户点击它时显示一些HTML，那么你应该使用它来创建你的广告牌。当您使用实体API时，会向您提供其他属性，如“描述”。描述可以是静态HTML字符串或回调属性，可以根据需要随时更新。描述在用户选择实体时显示，通常通过鼠标单击，但可以通过viewer.trackedEntity属性以编程方式完成

您可以在或中运行此功能

var-viewer=新的铯查看器（“铯容器”）；
var canvas=document.createElement（'canvas'）；
画布宽度=300；
帆布高度=300；
变量svgString=''+
'' +
'' +
“我喜欢”+
'' +
“纸杯蛋糕”+
'' +
'' +
'';
var image=新图像（）；
image.src='数据：image/svg+xml；base64，“+window.btoa（svgString）；
//在继续绘制之前，需要等待图像加载
image.onload=函数（）{
canvas.getContext（'2d'）.drawImage（图像，0,0）；
viewer.entities.add({
id:'纸杯蛋糕'，
位置：铯。笛卡尔3。从度（-75.59777,40.03883），
广告牌：{
图片：画布
},
描述：“这是一个可以修改的纸杯蛋糕。
”
});
};

广告牌用于显示光栅化数据，如图像。如果要将html呈现为一个，则必须创建一个画布元素，然后将该画布作为其图像属性传递给公告牌

如果你实际上只需要有一个图标/图像可见，然后在用户点击它时显示一些HTML，那么你应该使用它来创建你的广告牌。当您使用实体API时，会向您提供其他属性，如“描述”。描述可以是静态HTML字符串或回调属性，可以根据需要随时更新。描述在用户选择实体时显示，通常通过鼠标单击，但可以通过viewer.trackedEntity属性以编程方式完成

您可以在或中运行此功能

var-viewer=新的铯查看器（“铯容器”）；
var canvas=document.createElement（'canvas'）；
画布宽度=300；
帆布高度=300；
变量svgString=''+
'' +
'' +
“我喜欢”+
'' +
“纸杯蛋糕”+
'' +
'' +
'';
var image=新图像（）；
image.src='数据：image/svg+xml；base64，“+window.btoa（svgString）；
//在继续绘制之前，需要等待图像加载
image.onload=函数（）{
canvas.getContext（'2d'）.drawImage（图像，0,0）；
viewer.entities.add({
id:'纸杯蛋糕'，
位置：铯。笛卡尔3。从度（-75.59777,40.03883），
广告牌：{
图片：画布
},
描述：“这是一个可以修改的纸杯蛋糕。
”
});
};

谢谢你的回答，但是我在后面有点困难。那么，您是说您可以使用第二个画布作为“舞台”来呈现内容，然后从画布中获取数据并将其添加到公告牌中？如何将内容添加到广告牌中？你也提到了描述，你指的是什么？我检查了Billboard类的文档，但没有看到描述字段。这是可以添加的吗？@Zeb如果这篇编辑为你澄清了一些事情，请告诉我。哦，非常好。我从未见过SVG像这样使用。太好了，谢谢！虽然要在地图上显示html并不理想，但对我来说应该是可行的。公平地说，将html显示在广告牌上是一种次优的情况。你可以在铯查看器上有一个绝对定位的div，当你移动时，它不会附着在查看器中的实体上。是的，这就是我想要避免的。谢谢你的回答，但我在后面有点麻烦。那么，您是说您可以使用第二个画布作为“舞台”来呈现内容，然后从画布中获取数据并将其添加到公告牌中？如何将内容添加到广告牌中？你也提到了描述，你指的是什么？我检查了Billboard类的文档，但没有看到描述字段。这是可以添加的吗？@Zeb如果这篇编辑为你澄清了一些事情，请告诉我。哦，非常好。我从未见过SVG像这样使用。太好了，谢谢！虽然要在地图上显示html并不理想，但对我来说应该是可行的。公平地说，将html显示在广告牌上是一种次优的情况。你可以在铯查看器上有一个绝对定位的div，当你移动时，它不会附着在查看器中的实体上。是的，这就是我想要避免的。

var viewer = new Cesium.Viewer('cesiumContainer');

var canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;

var svgString = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
       '<foreignObject width="100%" height="100%">' +
       '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px; color: #FF0">' +
         '<em>I</em> like' + 
         '<span style="color:white; text-shadow:0 0 2px blue;">' +
         'Cupcakes</span>' +
       '</div>' +
       '</foreignObject>' +
       '</svg>';

var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(svgString);

//Need to wait for image to load before proceeding to draw
image.onload = function() {
  canvas.getContext('2d').drawImage(image, 0, 0);

  viewer.entities.add({
    id: 'Cupcake SVG',
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    billboard: {
      image: canvas
    },
    description: '<p>This is a cupcake that can be modified.</p>'
  });
};