【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"
    }
  })
}
相关推荐
m0_4805026412 分钟前
Rust 入门 KV存储HashMap (十七)
java·开发语言·rust
大阳12326 分钟前
线程(基本概念和相关命令)
开发语言·数据结构·经验分享·算法·线程·学习经验
小艳加油26 分钟前
Python机器学习与深度学习;Transformer模型/注意力机制/目标检测/语义分割/图神经网络/强化学习/生成式模型/自监督学习/物理信息神经网络等
python·深度学习·机器学习·transformer
YA33334 分钟前
java基础(九)sql基础及索引
java·开发语言·sql
开发者小天40 分钟前
为什么 /deep/ 现在不推荐使用?
前端·javascript·node.js
奇树谦2 小时前
QT|windwos桌面端应用程序开发,当连接多个显示器的时候,如何获取屏幕编号?
开发语言·qt
weixin_307779132 小时前
VS Code配置MinGW64编译GNU 科学库 (GSL)
开发语言·c++·vscode·算法
学行库小秘2 小时前
ANN神经网络回归预测模型
人工智能·python·深度学习·神经网络·算法·机器学习·回归
froginwe112 小时前
HTML 框架:构建网页布局的基石
开发语言
Yn3122 小时前
在 Python 中使用 json 模块的完整指南
开发语言·python·json