vue3+cesium显示多行文本?

作者站长头像
站长
· 阅读数 7

请问在Vue3+Cesium上如何根据后端返回的数据,在地图上面显示图片并在图片的上方或者旁边显示后台返回的数据,类似于这样的vue3+cesium显示多行文本?

回复
1个回答
avatar
test
2024-07-02

如果是一个图片的话可以使用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,
    }
});
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容