Пользовательский рекламный щит html с цезием

Рекламные щиты предназначены для отображения растровых данных, таких как изображения. Если вы хотите отображать html в один, вы должны создать элемент холста, нарисовать элементы dom к нему, затем передайте этот холст на рекламный щит как свойство изображения.

Если вам на самом деле нужно только отображать значок/изображение, а затем отображать некоторый HTML, когда пользователь нажимает на него, вам следует использовать Entity API для создания вашего рекламного щита. Вам предоставляются дополнительные свойства, такие как «описание», когда вы используете Entity 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>'
  });
};