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

相关推荐
gnip1 小时前
链式调用和延迟执行
前端·javascript
杨天天.1 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu1 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
YU大宗师1 小时前
React面试题
前端·javascript·react.js
给月亮点灯|3 小时前
Vue基础知识-Vue集成 Element UI全量引入与按需引入
前端·javascript·vue.js
三思而后行,慎承诺3 小时前
Reactnative实现远程热更新的原理是什么
javascript·react native·react.js
知识分享小能手3 小时前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
lxh01133 小时前
LRU 缓存
开发语言·前端·javascript
wow_DG4 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(二):虚拟 DOM 与 Diff 算法
开发语言·javascript·vue.js·算法·前端框架
Hexene...5 小时前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架