【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 分钟前
V8引擎 精品漫游指南--Ignition篇(下 一) 动态执行前的事情
前端·javascript
阿里嘎多学长3 分钟前
2026-04-30 GitHub 热点项目精选
开发语言·程序员·github·代码托管
m0_613856291 小时前
mysql如何利用事务隔离级别解决特定业务冲突_mysql隔离方案选型
jvm·数据库·python
叶小鸡2 小时前
Java 篇-项目实战-苍穹外卖-笔记汇总
java·开发语言·笔记
AI人工智能+电脑小能手2 小时前
【大白话说Java面试题】【Java基础篇】第22题:HashMap 和 HashSet 有哪些区别
java·开发语言·哈希算法·散列表·hash
我的xiaodoujiao2 小时前
API 接口自动化测试详细图文教程学习系列16--项目实战演练3
python·学习·测试工具·pytest
ID_180079054732 小时前
Python 实现亚马逊商品详情 API 数据准确性校验(极简可用 + JSON 参考)
java·python·json
时空系2 小时前
第10篇:继承扩展——面向对象编程进阶 python中文编程
开发语言·python·ai编程
CHANG_THE_WORLD4 小时前
python 批量终止进程exe
开发语言·python
古城小栈4 小时前
从 cargo-whero 库中,找到提升 rust 的契机
开发语言·后端·rust