自定义铯 html 广告牌

Question

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

我可以创建带有图像和标签的广告牌，并且还发现 this link 关于如何使用 svg，但我无法弄清楚如何使广告牌包含动态生成的内容 html。此项目使用 class 名称将字体图标应用于 div。

有没有办法将 html 插入广告牌？或者是否有另一个 class 更适合这个？我是 Cesium 的新手，愿意接受建议。

Answer 1

广告牌旨在显示光栅化数据，例如图像。如果你想渲染 html 到一个你必须创建一个 canvas 元素，draw the dom elements 给它，然后将那个 canvas 作为图像属性传递给广告牌.

如果您实际上只需要让 icon/image 可见，然后在用户点击它时显示一些 HTML，那么您应该使用 Entity API 来创建广告牌。当您使用实体 API 时，您会获得其他属性，例如 'description'。描述可以是静态 HTML 字符串或 Callback 属性，可以根据需要经常更新。当用户选择实体时显示描述，通常通过鼠标单击，但可以通过 viewer.trackedEntity 属性.

以编程方式完成

您可以运行在 Sandcastle or 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>'
  });
};

自定义铯 html 广告牌

Custom cesium html billboard

javascript

cesium