前端 - vue3+cesium显示多行文本？

Question

请问在Vue3+Cesium上如何根据后端返回的数据，在地图上面显示图片并在图片的上方或者旁边显示后台返回的数据，类似于这样的

Answer 1

如果是一个图片的话可以使用Entity实现

const viewer = new Cesium.Viewer("cesiumContainer");
viewer.clock.shouldAnimate = true;

let startLatitude = 35;
let startLongitude = 117;
let startTime = Cesium.JulianDate.now();

function getLabel(time, result) {
  return `名称：11111\n速度：${(Math.random() + 100).toFixed(1)} km`;
}
function getMidpoint(time, result) {
  startLongitude += 0.01
  startLatitude += 0.01
  
  return Cesium.Cartesian3.fromDegrees(startLongitude, startLatitude)
}

const label = viewer.entities.add({
  position: new Cesium.CallbackProperty(getMidpoint, false),
  label: {
    text: new Cesium.CallbackProperty(getLabel, false),
    font: "20px sans-serif",
    pixelOffset: new Cesium.Cartesian2(0.0, 20),
    showBackground: true,
    backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.8),
    backgroundPadding: new Cesium.Cartesian2(7, 5)
  },
  billboard: {
      show: true, // default
      // 一个属性，指定要用于广告牌的图像，URI或画布
      image: "https://sandcastle.cesium.com/images/Cesium_Logo_Color_Overlay.png",
      scale: 0.5,
      width: 74,
      height: 60,
      // 指定相对于height属性的高度
      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      // 指定要禁用深度测试的距离相机的距离
      disableDepthTestDistance: Number.POSITIVE_INFINITY,
    }
});