在vue3中使用cesium显示比例尺以及海拔高度的方法

要在Vue 3中使用cesium显示比例尺和海拔高度，你需要进行以下步骤：

1. 安装cesium库

使用以下命令安装Cesium库：

npm install cesium --save

2. 在组件中引入cesium

在Vue组件中引入cesium库，并创建一个Cesium Viewer实例：

import * as Cesium from 'cesium';

export default {
  created() {
    this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
      terrainProvider: Cesium.createWorldTerrain()
    });
  }
}

3. 显示比例尺

使用Cesium的`ImageryLayer`和`ScaleBar`类可以在Cesium Viewer中显示比例尺：

import * as Cesium from 'cesium';

export default {
  created() {
    this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
      terrainProvider: Cesium.createWorldTerrain()
    });

    const imageryProvider = new Cesium.createWorldImagery();
    const layer = this.viewer.imageryLayers.addImageryProvider(imageryProvider);
    this.viewer.scene.globe.depthTestAgainstTerrain = true;

    const scaleBar = new Cesium.ScaleBar({
      container: this.$refs.cesiumContainer,
      // 样式可以自定义
      //scaleBarElement: ,
      //verticalPosition: ,
      //horizontalPosition: ,
      //minimumWidthInPixels: ,
      //maximumWidthInPixels: ,
      //minBarThicknessInPixels: ,
      //maxBarThicknessInPixels: ,
      //units: ,
      //color: ,
      //backgroundColor: ,
      //font: ,
      //barThickness: ,
      //padding: ,
      //border: ,
      //class: ,
      //id:
    });
    this.viewer.scene.canvas.addEventListener('mousedown', scaleBar.update, false);
  }
}

4. 显示海拔高度

使用Cesium的`TerrainProvider`和`SampledHeightProperty`类可以在Cesium Viewer中显示海拔高度：

import * as Cesium from 'cesium';

export default {
  created() {
    this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
      terrainProvider: Cesium.createWorldTerrain()
    });

    const imageryProvider = new Cesium.createWorldImagery();
    const layer = this.viewer.imageryLayers.addImageryProvider(imageryProvider);
    this.viewer.scene.globe.depthTestAgainstTerrain = true;

    const terrainProvider = Cesium.createWorldTerrain();
    const entity = this.viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
      name: 'Philadelphia',
      label: {
        text: 'Philadelphia',
        font: '14pt monospace',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -9)
      }
    });

    const heights = [];
    const positions = [
      Cesium.Cartesian3.fromDegrees(-75.596639, 40.039028),
      Cesium.Cartesian3.fromDegrees(-75.596765, 40.038994),
      Cesium.Cartesian3.fromDegrees(-75.596825, 40.038959),
      Cesium.Cartesian3.fromDegrees(-75.596856, 40.038929),
      Cesium.Cartesian3.fromDegrees(-75.596862, 40.038899),
      Cesium.Cartesian3.fromDegrees(-75.596869, 40.038833),
      Cesium.Cartesian3.fromDegrees(-75.596848, 40.038732),
      Cesium.Cartesian3.fromDegrees(-75.596809, 40.038635),
      Cesium.Cartesian3.fromDegrees(-75.596745, 40.038536),
      Cesium.Cartesian3.fromDegrees(-75.596664, 40.038455),
      Cesium.Cartesian3.fromDegrees(-75.596558, 40.038391),
      Cesium.Cartesian3.fromDegrees(-75.59644, 40.038348),
      Cesium.Cartesian3.fromDegrees(-75.59633, 40.038333),
      Cesium.Cartesian3.fromDegrees(-75.596208, 40.038333),
      Cesium.Cartesian3.fromDegrees(-75.596075, 40.038349),
      Cesium.Cartesian3.fromDegrees(-75.595976, 40.038374),
      Cesium.Cartesian3.fromDegrees(-75.595898, 40.038407),
      Cesium.Cartesian3.fromDegrees(-75.595828, 40.038447),
      Cesium.Cartesian3.fromDegrees(-75.595771, 40.038492),
      Cesium.Cartesian3.fromDegrees(-75.595735, 40.03854),
      Cesium.Cartesian3.fromDegrees(-75.595719, 40.03859),
      Cesium.Cartesian3.fromDegrees(-75.595712, 40.038642),
      Cesium.Cartesian3.fromDegrees(-75.595718, 40.038695),
      Cesium.Cartesian3.fromDegrees(-75.595734, 40.038744),
      Cesium.Cartesian3.fromDegrees(-75.595761, 40.03879),
      Cesium.Cartesian3.fromDegrees(-75.595799, 40.038832),
      Cesium.Cartesian3.fromDegrees(-75.595845, 40.038866),
      Cesium.Cartesian3.fromDegrees(-75.595897, 40.038891),
      Cesium.Cartesian3.fromDegrees(-75.595954, 40.038906),
      Cesium.Cartesian3.fromDegrees(-75.596013, 40.03891),
      Cesium.Cartesian3.fromDegrees(-75.596071, 40.038903),
      Cesium.Cartesian3.fromDegrees(-75.596124, 40.038886),
      Cesium.Cartesian3.fromDegrees(-75.596169, 40.038859),
      Cesium.Cartesian3.fromDegrees(-75.596204, 40.038825),
      Cesium.Cartesian3.fromDegrees(-75.596225, 40.038791),
      Cesium.Cartesian3.fromDegrees(-75.596236, 40.038751),
      Cesium.Cartesian3.fromDegrees(-75.596236, 40.038707),
      Cesium.Cartesian3.fromDegrees(-75.596225, 40.038663),
      Cesium.Cartesian3.fromDegrees(-75.596204, 40.038623),
      Cesium.Cartesian3.fromDegrees(-75.596169, 40.038589),
      Cesium.Cartesian3.fromDegrees(-75.596124, 40.038562),
      Cesium.Cartesian3.fromDegrees(-75.596071, 40.038545),
      Cesium.Cartesian3.fromDegrees(-75.596013, 40.038538),
      Cesium.Cartesian3.fromDegrees(-75.595954, 40.038542),
      Cesium.Cartesian3.fromDegrees(-75.595898, 40.038557),
      Cesium.Cartesian3.fromDegrees(-75.595845, 40.038582),
      Cesium.Cartesian3.fromDegrees(-75.595799, 40.038616),
      Cesium.Cartesian3.fromDegrees(-75.595761, 40.038658),
      Cesium.Cartesian3.fromDegrees(-75.595734, 40.038704),
      Cesium.Cartesian3.fromDegrees(-75.595718, 40.038753),
      Cesium.Cartesian3.fromDegrees(-75.595712, 40.038805),
      Cesium.Cartesian3.fromDegrees(-75.595719, 40.038857),
      Cesium.Cartesian3.fromDegrees(-75.595735, 40.038907),
      Cesium.Cartesian3.fromDegrees(-75.595771, 40.038955),
      Cesium.Cartesian3.fromDegrees(-75.595828, 40.038999),
      Cesium.Cartesian3.fromDegrees(-75.595898, 40.039039),
      Cesium.Cartesian3.fromDegrees(-75.595976, 40.039072),
      Cesium.Cartesian3.fromDegrees(-75.596075, 40.039097),
      Cesium.Cartesian3.fromDegrees(-75.596208, 40.039113),
      Cesium.Cartesian3.fromDegrees(-75.59633, 40.039113),
      Cesium.Cartesian3.fromDegrees(-75.59644, 40.039098),
      Cesium.Cartesian3.fromDegrees(-75.596558, 40.039055),
      Cesium.Cartesian3.fromDegrees(-75.596664, 40.038991),
      Cesium.Cartesian3.fromDegrees(-75.596745, 40.03891),
      Cesium.Cartesian3.fromDegrees(-75.596809, 40.038811),
      Cesium.Cartesian3.fromDegrees(-75.596848, 40.038714),
      Cesium.Cartesian3.fromDegrees(-75.596869, 40.038613),
      Cesium.Cartesian3.fromDegrees(-75.596862, 40.038547),
      Cesium.Cartesian3.fromDegrees(-75.596856, 40.038518),
      Cesium.Cartesian3.fromDegrees(-75.596825, 40.038488),
      Cesium.Cartesian3.fromDegrees(-75.596765, 40.038453),
      Cesium.Cartesian3.fromDegrees(-75.596639, 40.038419)
    ];
    positions.forEach((position) => {
      heights.push(terrainProvider.getHeight(Cesium.Cartographic.fromCartesian(position)));
    });

    const sampledHeightProperty = new Cesium.SampledHeightProperty();
    sampledHeightProperty.addSamples(
      Cesium.JulianDate.now(),
      positions,
      heights
    );

    entity.position = positions[0];
    entity.position.setInterpolationOptions({
      interpolationDegree: 1,
      interpolationAlgorithm: Cesium.LinearApproximation
    });

    entity.addProperty('height');
    entity.height = sampledHeightProperty;
  }
}

这样就可以在Vue 3中使用cesium显示比例尺和海拔高度了。