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

相关推荐
bug爱好者6 分钟前
原生小程序如何实现跨页面传值
前端·javascript
bug爱好者15 分钟前
原生微信小程序最实用的工具函数合集
前端·javascript
3Katrina18 分钟前
JS事件机制详解(2)--- 委托机制、事件应用
前端·javascript·面试
前端wchen26 分钟前
Vue 3 组件通信实战系列(一)父子组件通信的标准姿势:Props 与 Emit(含实战与进阶技巧)
前端·vue.js
code_YuJun38 分钟前
从内存角度理解JS代码执行过程
javascript
DoraBigHead1 小时前
【JS三兄弟谁是谁】搞懂 splice、slice、split,只需一杯奶茶的时间!
前端·javascript·面试
国家不保护废物1 小时前
前端存储与后端服务的奇妙冒险:一个Node.js服务器的诞生记(cookie实现用户登入)
前端·javascript·后端
前端付豪1 小时前
2、前端架构三要素:模块化、工程化、平台化
前端·javascript·架构
WildBlue1 小时前
流式输出:前端工程师的魔术表演,小白也能看懂!🎩✨
前端·javascript·node.js
多啦C梦a1 小时前
React 事件机制大揭秘:从 addEventListener 到合成事件,别再一脸懵逼!
前端·javascript