vue3中使用Cesium

在Vue3中使用Cesium需要先安装Cesium库，可以通过npm或yarn进行安装：

npm install cesium

或者

yarn add cesium

然后在Vue组件中引入Cesium：

import Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css';

export default {
  mounted() {
    // 创建Cesium Viewer
    const viewer = new Cesium.Viewer('cesiumContainer');
  }
}

其中，`cesiumContainer`是一个DOM元素的ID，代表了Cesium Viewer的容器。

除了基本的Cesium Viewer创建，还可以在Vue组件中使用Cesium的其他功能，例如：

import Cesium from 'cesium/Cesium';

export default {
  data() {
    return {
      viewer: null, // 初始化viewer
    }
  },
  mounted() {
    this.viewer = new Cesium.Viewer('cesiumContainer', {
      animation: false,
      baseLayerPicker: false,
      fullscreenButton: false,
      geocoder: false,
      homeButton: false,
      infoBox: false,
      sceneModePicker: false,
      selectionIndicator: false,
      timeline: false,
      navigationHelpButton: false,
      navigationInstructionsInitiallyVisible: false,
      skyBox: false,
      skyAtmosphere: false,
      scene3DOnly: true,
      shouldAnimate: true,
      imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
        credit: new Cesium.Credit('OpenStreetMap contributors'),
      }),
      terrainProvider: new Cesium.CesiumTerrainProvider({
        url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
      })
    });

    const entity = this.viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-122.19, 46.26),
      point: {
        pixelSize: 10,
        color: Cesium.Color.RED,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 2,
      },
      label: {
        text: 'Hello, World!',
        font: '24px Helvetica',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        fillColor: Cesium.Color.YELLOW,
        outlineColor: Cesium.Color.BLACK,
        outlineWidth: 2,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -9),
      },
    });

    this.viewer.zoomTo(this.viewer.entities);
  }
}

这段代码创建了一个Cesium Viewer，并在地球上添加了一个实体（点和标签）。这里使用了Cesium的一些常见功能，例如添加实体、设置相机视角等。需要注意的是，在Vue组件中使用Cesium时，建议将Cesium实例保存到组件的data中，以便在其他方法中使用。