1.Cesium的常用API

1.Cesium: Cesium命名空间，包含Cesium的全局变量、常量、函数等;

2.Viewer: Cesium.Viewer类，用于创建和管理Cesium场景和小部件;

3.Camera: Cesium.Camera类，用于管理摄像机的位置、朝向、视野等;

4.Entity: Cesium.Entity类，用于描述Cesium场景中的实体，包含位置、属性、图形等;

5.DataSource: Cesium.DataSource类，用于加载和解析各种格式的地理数据源;

6.ImageryLayer: Cesium.ImageryLayer类，用于管理Cesium场景中的图像图层;

9.Color: Cesium.Color类，用于描述颜色，包含RGBA、HSVA等;

2.创建Viewer视图

<template>
  <div class="m-cesium">
    <div id="cesium-container"></div>
  </div>
</template>

<script>
import * as Cesium from "cesium/Cesium";
import "cesium/Widgets/widgets.css";

export default {
  name: "MCesium",
  data() {
    return {
      viewer: null, // viewer视图对象
    };
  },
  mounted() {
    this.$nextTick(()=>{
      this.initCesium();
    })
  },
 methods: {
    initCesium() {
      //=>Token
      Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4NGZjZDNmOC0zNTgwLTQxNTUtYWIxMS0zMGY5ZjVjNmU0ZjQiLCJpZCI6MTgyNzEzLCJpYXQiOjE3MDE4MjU1Mjh9.tJzjAxvinhK-2f4T3qzTjeArrzToKdWEhCegJw0zO-I";
      //=>创建Viewer对象
      this.viewer = new Cesium.Viewer("cesium-container", {
          infoBox: false,
          animation: false, // 是否显示动画控件
          homeButton: false, // 是否显示home键
          geocoder: false, // 是否显示地名查找控件
          baseLayerPicker: false, // 是否显示图层选择控件
          timeline: false, // 是否显示时间线控件
          fullscreenButton: false, // 是否全屏显示
          sceneModePicker: false, // 是否显示投影方式控件  三维/二维
          navigationInstructionsInitiallyVisible: false,
          navigationHelpButton: false, // 是否显示帮助信息控件
          orderIndependentTranslucency: false, //设置背景透明
          shouldAnimate: true,
          scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存
          selectionIndicator: false, // 取消点击有绿框
      });
      //=>多余样式隐藏
      this.viewer.cesiumWidget.creditContainer.style.display = "none";
      // 地形遮挡
      this.viewer.scene.globe.depthTestAgainstTerrain = false;
      // 开启抗锯齿
      this.viewer.scene.postProcessStages.fxaa.enabled = true;
      // 获取可视区域
      this.rectangle = this.viewer.camera.computeViewRectangle();
      // 转地理坐标
      // const east = Cesium.Math.toDegrees(this.rectangle.east).toFixed(6);
      // console.log(this.rectangle, east);

      //=>设置初始位置（经度/纬度/高度）
      this.viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(119.15, 36.72, 400),
        orientation: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-90),
          roll: 0.0,
        },
      });
      // 加载3dtiles数据
    },
  },
};
</script>

<style scoped lang="scss">
.m-cesium {
  width: 100%;
  height: 100%;

  //=>视图的大小
  #cesium-container {
    width: 100%;
    height: 100%;
  }
}
</style>

3.主要方法

destroy(): 销毁viewer;
extend(): 扩展viewer;
resize(): 调整viewer的大小;
zoomTo(): 缩放视图以查看给定的对象;
flyTo(): 飞向一个对象;
forceResize(): 强制重新调整viewer的大小;

4.加载模型

<script>
import * as Cesium from "cesium/Cesium";
import "cesium/Widgets/widgets.css";

export default {
  name: "MCesium",
  data() {
    return {
      viewer: null, // viewer视图对象
      tileset: null, // tileset模型对象
    };
  },
  mounted() {
    this.$nextTick(()=>{
      this.initCesium();
    })
  },
  methods: {
    initCesium() {
      //=>Token
      Cesium.Ion.defaultAccessToken = "";
      //=>创建Viewer对象
      this.viewer = new Cesium.Viewer("cesium-container", {});
      //=>加载3dtiles数据
      this.loadTilesetData();
      
      this.tileset = new Cesium.Cesium3DTileset({
        // 模型要放到public目录
        url: '3dtis/tileset.json',
        // 最大的屏幕空间误差
        maximumScreenSpaceError: 2,
        // 最大加载瓦片个数
        maximumNumberOfLoadedTiles: 5000
      })
      
    },
    //=>模型加载
    loadTilesetData() {
      const tileset = new Cesium.Cesium3DTileset({
        //=>模型要放到public目录
        url: "3dtis/tileset.json",
        // url: "http://123.57.148.132/newzhsq/tileset.json",
        //=>最大的屏幕空间误差
        maximumScreenSpaceError: 2,
        //=>最大加载瓦片个数
        maximumNumberOfLoadedTiles: 5000,
      });
      //=>添加模型到视图
      this.viewer.scene.primitives.add(tileset);
      this.viewer.flyTo(tileset);
    },
  },
};
</script>

<style scoped lang="scss">
.m-cesium {
  width: 100%;
  height: 100%;

  //=>视图的大小
  #cesium-container {
    width: 100%;
    height: 100%;
  }
}
</style>