vue3+vite+cesium 3D地图的开发

1. 在已有的 vue3+vite项目上增加 cesium相关插件

    yarn add -D vite cesium vite-plugin-cesium

2. 配置vite-plugin-cesium插件，在文件vite.config.ts 中

    import cesium from 'vite-plugin-cesium' // 引入插件
    
   // 在plugin 里增加
   plugins: [
      cesium()
    ],

3. 页面代码

    <template>
  <div id="mainMap"></div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
onMounted(() => {
  Cesium.Ion.defaultAccessToken =
    '在Cesium官网申请的token'

  const viewer = new Cesium.Viewer('mainMap', {
    infoBox: false,
    homeButton: false,
    timeline: false,
    navigationHelpButton: false,
    geocoder: false,
    sceneModePicker: false,
    animation: false,
    fullscreenButton: false
  })
  const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings())
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(116.405419, 39.926666, 3000),
    orientation: {
      heading: Cesium.Math.toRadians(0.0),
      pitch: Cesium.Math.toRadians(-25.0)
    }
  })
  viewer.cesiumWidget.creditContainer.style.display = 'none'
})
</script>
<style scoped>
#mainMap {
  width: 100%;
  height: 1000px;
  background: #aabbcc;
}
</style>

4. 可爱的地球