• 创建个一个模块后可以用：viewer.zoomTo(xxxx)，直接跳转到这个模块，这里的xxx是模块名。

<template>
    <div id="cesiumContainer">
      
    </div>
  </template>
  
  <script setup>
  import { ref ,onMounted} from 'vue'
 import * as Cesium from 'cesium'
  onMounted(()=>{
    // Cesium Token
    Cesium.Ion.defaultAccessToken = "这里还是自己的token";

    const viewer = new Cesium.Viewer("cesiumContainer",{});

    // 实体 entity (标点)
    // 写法一 这个方法比较麻烦，推荐用写法二

    /*const point = new Cesium.Entity({
        position:Cesium.Cartesian3.fromDegrees(120, 30),
        point:{
            pixelSize:10, // 像素点的大小
            color:Cesium.Color.BLUE  
        }
    })
    viewer.entities.add(point)
    viewer.zoomTo(point)
    */


    // 写法二(推荐) (标点)
    const point2 = viewer.entities.add({
      id: "point",
      position: Cesium.Cartesian3.fromDegrees(120, 30),
      point: {
        pixelSize: 10,
        color: Cesium.Color.BLUE,
      },
    })

    // 标点  可以用图片显示
    const billboard = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(116,41,10),
      billboard:{
        image:"/src/assets/icon_img/position.png",
        scale:3, // 图片缩放 大小
        color:Cesium.Color.BLUE  
      }
    })
    
    // 标点 可以用文字(标题)
    const label = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(116,40,20),
      label:{
        text:"标点",
        fillColor:Cesium.Color.BLUE, // 文字颜色
        showBackground:true,
        backgroundColor:new Cesium.Color(255,255,0)
      }
    })

    // 画线
    const polyline = viewer.entities.add({
      polyline:{
        positions:Cesium.Cartesian3.fromDegreesArray([120,20,121,20,121,20.5]), // 返回的是一个数组，数组是迪卡尔坐标
        width:10, // 宽度
        material:Cesium.Color.YELLOW // 线的颜色
      }
    })

    // 画面 和 画立体
    const polygon = viewer.entities.add({
      polygon:{
        hierarchy:Cesium.Cartesian3.fromDegreesArray([120,25,121,25,121,25.5]), // 返回的是一个数组，数组是迪卡尔坐标
        height:10000, // 高度
        extrudedHeight:2000,
        material:Cesium.Color.YELLOW, // 填充颜色
        outline:true, // 是否显示边框
        outlineColor:Cesium.Color.BLUE, // 边框颜色
        fill:false // 是否填充
      }
    })

    
    // 画立体多面体盒子
    const box = viewer.entities.add({
      name:'box', // 名字
      position:Cesium.Cartesian3.fromDegrees(119,30,3000), // 迪卡尔坐标 第三个值为高度
      box:{
        dimensions:new Cesium.Cartesian3(3000,3000,3000), // 长宽高
        material:Cesium.Color.PURPLE.withAlpha(0.5), // 填充颜色 透明度
        outline:true, // 是否显示边框
        outlineColor:Cesium.Color.BLUE, // 边框颜色
      }
    })

    //  画椭圆 短轴不能比长轴大 ，两个轴一样就是圆形
const ellipse = viewer.entities.add({
  position:Cesium.Cartesian3.fromDegrees(118,30),
  ellipse:{
    semiMinorAxis:10000, // 短轴
    semiMajorAxis:20000, // 长轴
    rotation: Math.PI / 2, // 旋转角度 (本来是横向的椭圆，旋转了90度，就变成竖向的了)
    material:Cesium.Color.YELLOW, // 填充颜色
    outline:true, // 是否显示边框
    outlineColor:Cesium.Color.BLUE, // 边框颜色
    fill:true // 是否填充
  }
})

// 矩形 (两个点就可以确定一个矩形：左下角 和 右上角)
const rectangle = viewer.entities.add({
  rectangle:{
    coordinates:Cesium.Rectangle.fromDegrees(110,25,115,30), // 左下角和右上角
    extrudedHeight:90000, // 高度 代表这个矩形的高度
    // material:Cesium.Color.GREEN.withAlpha(0.5), // 填充颜色 透明度 (这里还可以填充一个图，只需要放上图片地址)
    material:"/src/assets/icon_img/shuishen.jpg", // (这里还可以填充一个图，只需要放上图片地址)
    outline:true, // 是否显示边框
    outlineColor:Cesium.Color.BLUE, // 边框颜色
    fill:true // 是否填充
  }
})
    viewer.zoomTo(billboard)
})
    </script>
  
  <style scoped>
  #cesiumContainer {
    position:absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  </style>