Vue3+Vite配置Cesium

前言

说实话，我觉得各位在座的，不收藏也没事，毕竟搜一下也找到了 ，但是吧，既然点了收藏，能不能在收藏之前顺便点个赞？反正也就多一秒的事情，是吧，各位彦祖！！！

版本介绍

"vue": "3.2.45"

"vite": "^4.2.1"

"cesium": "^1.104.0"

"vite-plugin-cesium": "^1.2.22"

1. 导入cesium相关包

npm i -D cesium vite-plugin-cesium

2. vue.config配置

导入vite插件

import cesium from 'vite-plugin-cesium';

在插件中使用

export default defineConfig({
  plugins: [
    vue(),
    cesium(),
  ]
  })

3. 通过组件使用cesium

3.1 component下建立cesium组件

<script setup lang="ts">
import * as Cesium from 'cesium';

const viewer = ref();
const handlerCLick = () => {
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.value.scene.canvas);
  handler.setInputAction(function(event:any) {
    let cartesian = viewer.value.camera.pickEllipsoid(event.position);
    let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
    let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
    let alt = cartographic.height; // 高度，椭球面height永远等于0
    let coordinate = {
      longitude: Number(lng.toFixed(6)),
      latitude: Number(lat.toFixed(6)),
      altitude: Number(alt.toFixed(2))
    };
    console.log(coordinate,3333);

    console.log(viewer.value.scene.camera.heading);
    console.log(viewer.value.scene.camera.pitch);
    console.log(viewer.value.scene.camera.roll);
    console.log(viewer.value.scene.camera.position)
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

onMounted(() => {

  viewer.value = new Cesium.Viewer('cesiumContainer',{
    animation: false, // 动画球
    timeline: false, // 时间线
    infoBox: false,// 报错 Blocked script execution in ‘about:blank‘
    baseLayerPicker: false, // baselayer小组件
    terrainProvider: Cesium.createWorldTerrain({ // 地形设置
      requestWaterMask: true,
      requestVertexNormals: true,
    })
  });

  handlerCLick()
  viewer.value.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(
      xxx.426141,
      xx.288993,
      1800),// 经度, 纬度，高度，具体可以找个地图经纬度，自己写
    orientation:{// 相机镜头设置
      heading: .046, // 左右方向,正值为右,负值为左
      pitch: -.563 // 上下方向,正值为上,负值为下
    }
  })

})

</script>

<template>
  <div id="cesiumContainer">
  </div>
</template>
<style>
#cesiumContainer{
  width: 100%;
  height: 100%;
}
</style>

3.2 导入使用

这个总不用写了吧，随便找个页面当作组件导入就行了

效果