javascript - 自定义铯HTML广告牌

我希望能够创建一个div并为其指定高度，宽度和类。然后将div作为广告牌添加到铯地图上。

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

有没有办法将HTML插入广告牌？还是有另一个更适合于此的课程？我是Cesium的新手，欢迎提出建议。

最佳答案

广告牌旨在显示栅格化数据，例如图像。如果要将HTML渲染为一个，则必须创建一个canvas元素draw the dom elements，然后将该画布作为image属性传递给广告牌。

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

您可以在Sandcastle或Codepen中运行它

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>'
  });
};