广告牌和标签学习

效果：

知识学习：

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,});// 去除logoviewer.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 /CENTERhorizontalOrigin: 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>