广告牌和标签学习

效果：

知识学习：

entities添加标签label和广告牌billboard

label：

        text：文本添加

        font：字体大小和字体类型

        fillColor：字体颜色

        outlineColor：字体外轮廓颜色

        outlineWidth：字体外轮廓宽度

        style：标签样式

        pixelOffset：文字偏移量

        horizontalOrigin：水平文字显示位置

        verticalOrigin：垂直文字显示位置

billboard：

        image：图片路径，放在public路径

        width：宽度

        height：高度

        verticalOrigin:垂直图片位置

        horizontalOrigin：水平图片位置

代码应用：

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted, ref } from "vue";
import planceImage from './assets/plance.png';
onMounted(() => {
  // 使用Cesium的Ion服务进行认证
  Cesium.Ion.defaultAccessToken =
    "认证码";

  // 创建一个Viewer实例
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 使用默认的影像图层和地形图层
    terrainProvider: Cesium.createWorldTerrain({ requestWaterMask: true }),
    // 查找位置工具
    geocoder: false,
    // 返回首页按钮
    homeButton: false,
    // 场景视角
    sceneModePicker: false,
    // 图层选择
    baseLayerPicker: false,
    // 导航帮助信息
    navigationHelpButton: false,
    // 动画播放速度
    animation: false,
    // 时间轴
    timeline: false,
    // 全屏按钮
    fullscreenButton: false,
    // VR按钮
    vrButton: false,
  });
  // 去除logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
  // 飞入
  // WGS84转笛卡尔坐标系
  var destination = Cesium.Cartesian3.fromDegrees(116.390, 39.890, 1000.0);
  viewer.camera.flyTo({
    destination: destination,
    orientation: {
      heading: Cesium.Math.toRadians(0.0),
      pitch: Cesium.Math.toRadians(-10.0),
      roll: 0.0,
    },
    duration: 5,  // 飞行持续时间，单位秒
  });
  // 添加文字标签和广告牌
  var label = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116.391, 39.917, 70),
    label: {
      text: "北京故宫",
      font: "24px sans-serif",
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 4,
      // FILL填充文字，OUTLINE勾勒标签，FILL_AND_OUTLINE填充文字和勾勒标签
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      // 设置文字的偏移量
      pixelOffset: new Cesium.Cartesian2(0, -15),
      // 设置文字的显示位置,LEFT /RIGHT /CENTER
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      // 设置文字的显示位置
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    },
    billboard: {
//推荐：将静态资源放在 public 目录下，并直接使用 URL 形式加载图片，因为在 Cesium 中使用广告牌时，image 属性需要直接使用可以被浏览器访问的路径（URL）
      image: "public/plance.png",
// 如果图片路径存放到src下的assets，需要import引入，因为使用相对路径引用该图片cesium会找不到资源
   // image: planceImage,
      width: 50,
      height: 50,
      // 设置广告牌的显示位置
      verticalOrigin: Cesium.VerticalOrigin.TOP,
      // 设置广告牌的显示位置
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    },
  });
  viewer.zoomTo(label)
});

</script>