cesium星空天空盒效果(附原图)

效果:

代码:

javascript 复制代码
<template>
  <div class="btn">
    <el-form :model="person.data" label-width="140px">
      <el-form-item label="效果:">
        <div v-for="(item, index) in person.cameraData" :key="index">
          <el-button @click="item.callback">{{ item.name }}</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
  <Map />
</template>

<script setup>
import Map from "@/components/map/Map.vue";
import { nextTick, onMounted, reactive } from "vue";
import "./skybox_nearground.js";
const person = reactive({
  cameraData: [
    {
      name: "效果1",
      title: "",
      callback: () => changeView1(),
    },
    {
      name: "效果2",
      title: "",
      callback: () => changeView2(),
    },
    {
      name: "效果3",
      title: "",
      callback: () => changeView3(),
    },
    {
      name: "效果4",
      title: "",
      callback: () => changeView4(),
    },
    {
      name: "效果5",
      title: "",
      callback: () => changeView5(),
    },
    {
      name: "效果6",
      title: "",
      callback: () => changeView6(),
    },
  ],
});

onMounted(() => {
  viewer.terrainProvider = Cesium.createWorldTerrain(); //开启地形
  window.swpecesium.cesiumViewer.setMapCenter({
    lat: 31.035943,
    lon: 103.650219,
    alt: 609,
    heading: 40,
    pitch: 10,
  });
});
function changeView1() {
  viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
      negativeX: "../../imgs/天空盒/1/tycho2t3_80_mx.jpg",
      negativeY: "../../imgs/天空盒/1/tycho2t3_80_my.jpg",
      negativeZ: "../../imgs/天空盒/1/tycho2t3_80_mz.jpg",
      positiveX: "../../imgs/天空盒/1/tycho2t3_80_px.jpg",
      positiveY: "../../imgs/天空盒/1/tycho2t3_80_py.jpg",
      positiveZ: "../../imgs/天空盒/1/tycho2t3_80_pz.jpg",
    },
  });
}
function changeView2() {
  viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
      negativeX: "../../imgs/天空盒/2/tycho2t3_80_mx.jpg",
      negativeY: "../../imgs/天空盒/2/tycho2t3_80_my.jpg",
      negativeZ: "../../imgs/天空盒/2/tycho2t3_80_mz.jpg",
      positiveX: "../../imgs/天空盒/2/tycho2t3_80_px.jpg",
      positiveY: "../../imgs/天空盒/2/tycho2t3_80_py.jpg",
      positiveZ: "../../imgs/天空盒/2/tycho2t3_80_pz.jpg",
    },
  });
}
function changeView3() {
  viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
      negativeX: "../../imgs/天空盒/3/tycho2t3_80_mx.jpg",
      negativeY: "../../imgs/天空盒/3/tycho2t3_80_my.jpg",
      negativeZ: "../../imgs/天空盒/3/tycho2t3_80_mz.jpg",
      positiveX: "../../imgs/天空盒/3/tycho2t3_80_px.jpg",
      positiveY: "../../imgs/天空盒/3/tycho2t3_80_py.jpg",
      positiveZ: "../../imgs/天空盒/3/tycho2t3_80_pz.jpg",
    },
  });
}
function changeView4() {
  viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
      negativeX: "../../imgs/天空盒/4/tycho2t3_80_mx.jpg",
      negativeY: "../../imgs/天空盒/4/tycho2t3_80_my.jpg",
      negativeZ: "../../imgs/天空盒/4/tycho2t3_80_mz.jpg",
      positiveX: "../../imgs/天空盒/4/tycho2t3_80_px.jpg",
      positiveY: "../../imgs/天空盒/4/tycho2t3_80_py.jpg",
      positiveZ: "../../imgs/天空盒/4/tycho2t3_80_pz.jpg",
    },
  });
}
function changeView5() {
  viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
      negativeX: "../../imgs/天空盒/5/tycho2t3_80_mx.jpg",
      negativeY: "../../imgs/天空盒/5/tycho2t3_80_my.jpg",
      negativeZ: "../../imgs/天空盒/5/tycho2t3_80_mz.jpg",
      positiveX: "../../imgs/天空盒/5/tycho2t3_80_px.jpg",
      positiveY: "../../imgs/天空盒/5/tycho2t3_80_py.jpg",
      positiveZ: "../../imgs/天空盒/5/tycho2t3_80_pz.jpg",
    },
  });
}
function changeView6() {
  viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
      negativeX: "../../imgs/天空盒/6/tycho2t3_80_mx.jpg",
      negativeY: "../../imgs/天空盒/6/tycho2t3_80_my.jpg",
      negativeZ: "../../imgs/天空盒/6/tycho2t3_80_mz.jpg",
      positiveX: "../../imgs/天空盒/6/tycho2t3_80_px.jpg",
      positiveY: "../../imgs/天空盒/6/tycho2t3_80_py.jpg",
      positiveZ: "../../imgs/天空盒/6/tycho2t3_80_pz.jpg",
    },
  });
}
</script>
<style scoped lang='less'>
.btn {
  position: absolute;
  left: 300px;
  top: 30px;
  z-index: 999;
}
:deep(.el-form-item__label) {
  color: #fff;
}
</style>

原图链接https://pan.baidu.com/s/1ykeY8qi6L-jnHOUW6a9lDg 提取码1234

相关推荐
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅1 天前
JavaScript 作用域
前端·javascript
前端缘梦1 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
云枫晖1 天前
JS核心知识-事件循环
前端·javascript
Simon_He1 天前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown