【Mars3d】设置backgroundImage、map.scene.skyBox、backgroundImage来回切换

相关链接:

http://mars3d.cn/editor-vue.html?key=ex_1_2_1&id=map/other/backgroundImg

实现代码:

复制代码
export function show1() {
  map.setOptions({
    scene: {
      backgroundType: "image",
      backgroundImage: "url(//data.mars3d.cn/img/busines/background1.jpg)"
    }
  })
}

export function show2() {
  map.setOptions({
    scene: {
      backgroundType: "color",
      backgroundColor: "red"
    }
  })
}

export function show3() {
  map.setOptions({
    scene: {
      backgroundType: "skybox",
      skyBox: {
        sources: {
          negativeX: "//data.mars3d.cn/img/skybox/3/tycho2t3_80_mx.jpg",
          negativeY: "//data.mars3d.cn/img/skybox/3/tycho2t3_80_my.jpg",
          negativeZ: "//data.mars3d.cn/img/skybox/3/tycho2t3_80_mz.jpg",
          positiveX: "//data.mars3d.cn/img/skybox/3/tycho2t3_80_px.jpg",
          positiveY: "//data.mars3d.cn/img/skybox/3/tycho2t3_80_py.jpg",
          positiveZ: "//data.mars3d.cn/img/skybox/3/tycho2t3_80_pz.jpg"
        }
      }
    }
  })

}

效果:

原始写法:

复制代码
export function show1() {
  // map.container.style.backgroundImage = "url(//data.mars3d.cn/img/busines/background1.jpg)"
  map.setOptions({
    scene: {
      backgroundImage: "url(//data.mars3d.cn/img/busines/background1.jpg)"
    }
  })
}

export function show2() {
  // map.container.style.backgroundImage = "url(//data.mars3d.cn/img/map/world/world.jpg)"
  map.setOptions({
    scene: {
      backgroundColor: 'red',
    }
  })
}

export function show3() {
  // map.container.style.backgroundImage = "url(//data.mars3d.cn/img/busines/background2.jpg)"
  map.scene.skyBox = new Cesium.SkyBox({
    sources: {
      negativeX: "//data.mars3d.cn/img/skybox/3/tycho2t3_80_mx.jpg",
      negativeY: "//data.mars3d.cn/img/skybox/3/tycho2t3_80_my.jpg",
      negativeZ: "//data.mars3d.cn/img/skybox/3/tycho2t3_80_mz.jpg",
      positiveX: "//data.mars3d.cn/img/skybox/3/tycho2t3_80_px.jpg",
      positiveY: "//data.mars3d.cn/img/skybox/3/tycho2t3_80_py.jpg",
      positiveZ: "//data.mars3d.cn/img/skybox/3/tycho2t3_80_pz.jpg"
    }
  })
}
相关推荐
炫饭第一名2 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
曲折2 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
进击的尘埃3 小时前
Vue3 响应式原理:从 Proxy 到依赖收集,手撸一个迷你 reactivity
javascript
willow3 小时前
JavaScript数据类型整理1
javascript
LeeYaMaster4 小时前
20个例子掌握RxJS——第十一章实现 WebSocket 消息节流
javascript·angular.js
UIUV4 小时前
RAG技术学习笔记(含实操解析)
javascript·langchain·llm
叶智辽4 小时前
【Three.js与WebGPU】下一代3D技术到底强在哪?
webgl·three.js
IVEN_5 小时前
只会Python皮毛?深入理解这几点,轻松进阶全栈开发
python·全栈
Ray Liang6 小时前
用六边形架构与整洁架构对比是伪命题?
java·python·c#·架构设计
颜酱6 小时前
理解二叉树最近公共祖先(LCA):从基础到变种解析
javascript·后端·算法