基于vue3+vite ,Cesium完成建筑物和Gejson区域显示

下载cesium 包

vite.config文件中配置

效果如下：

都是官方的示例，gejson 待完成

<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue';
onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer')
  const initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
    21.27879878293835,
    -21.34390550872461,
    0.0716951918898415
  );
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753),
    orientation: initialOrientation,
    endTransform: Cesium.Matrix4.IDENTITY,
  });
  var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url:Cesium.IonResource.fromAssetId(75343) //官方自带的示例
  }));
  // Cesium3DTileStyle 样式的设置
  tileset.style = new Cesium.Cesium3DTileStyle({
    color : {
        conditions : [
            ['${Height} >= 100', 'color("purple", 0.5)'],  // 颜色透明度
            ['${Height} >= 50', 'color("red")'],
            // ['true', 'color("blue")']
        ]
    },
    show : '${Height} > 0',
    meta : {
        description : '"Building id ${id} has height ${Height}."'
    }
});
  
})

</script>

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

<style>
html,body,#cesiumContainer,#app {
  margin: 0;
  padding: 0;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  max-width: none;
}
body {
  display: block;
}
</style>