Cesium：修改点击显示的infoBox内容

通过设置修改显示内容方案

最新推荐文章于 2024-07-01 13:51:35 发布

原创最新推荐文章于 2024-07-01 13:51:35 发布 · 4.6k 阅读

8 ·

CC 4.0 BY-SA版权

第三方框架专栏收录该内容

148 篇文章

订阅专栏

方案：通过设置`entity.description`修改显示内容

let entity = {
  name: "video",
  position: Cesium.Cartesian3.fromDegrees(116.20, 39.59),
  label: { //文字标签
    text: "文字标签",
    font: '500 30px Helvetica',// 15pt monospace
    scale: 0.5,
    style: Cesium.LabelStyle.FILL,
    fillColor: Cesium.Color.WHITE,
    pixelOffset: new Cesium.Cartesian2(-8, -35),   //偏移量
    showBackground: true,
    backgroundColor: new Cesium.Color(0.5, 0.6, 1, 1.0)
  },
  billboard: { //图标
    image: this.circle,
    width: 50,
    height: 50,

  },
  distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1000),
};
entity.description = '<div style="height: 360px;">' + '重写infoBox' + '</div>';
this.viewer.entities.add(entity);