Cesium添加广告牌

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

<script>

var Cesium = require("cesium/Cesium")
export default {
  mounted() {
    console.log('Cesium', Cesium);
    //  创建地图----------------------------------------------------------
    let viewer = new Cesium.Viewer("cesiumContainer", {
      infoBox: false, // 点击要素之后显示的信息 信息框小部件
      geocoder: false, // 地名查找控件
      homeButton: false, // Home按钮
      animation: false, // 动画控件
      fullscreenButton: false, // 全屏按钮
      sceneModePicker: false, // 切换展示模式控件 2D/3D
      navigationHelpButton: false, // 帮助信息控件导航提示
      baseLayerPicker: false,//地图选择器
    })

    //创建广告牌
    const dataSource = new Cesium.CustomDataSource('myData');//创建一个名为myData的自定义数据源对象。
    dataSource.entities.add({                //dataSource.entities.add({ ... }) 向数据源中添加一个实体，包含以下属性。
      position: Cesium.Cartesian3.fromDegrees(108, 34, 10), //设置实体的位置，这里使用经度108、纬度34和高度10的地理坐标。
      show: true, //设置实体是否可见的布尔值，这里为可见
      billboard: {     //设置实体的图标属性，包括图像路径为./images/mi.jpg，宽度为100，高度为100。
        image: './images/mi.jpg',
        width: 100,
        height: 100,
      },
      label: {     //设置实体的标签属性，文本内容为"喵喵"，缩放比例为1，填充颜色为蓝色。
        text: "喵喵",
        scale: 1,
        fillColor: Cesium.Color.BLUE
      },
      point: {       //设置实体的点属性，像素大小为10，颜色为红色。
        pixelSize: 10,
        color: Cesium.Color.RED
      }
    });
    viewer.dataSources.add(dataSource)   //将包含上述实体的自定义数据源添加到名为viewer的地图查看器中。

    // setView  flyTo
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(109, 34, 1000000),//相机眼睛位置，不是地图位置  经度，维度，高度
      //相机姿态
      orientation: {
        heading: Cesium.Math.toRadians(0.0), // 朝向
        pitch: Cesium.Math.toRadians(-90),    //俯仰   垂直向下
        roll: 0.0                             // 滚转
      },
      duration: 2,
    });
  }
}
</script>

可以翻翻其他文章噢宝宝🤭