【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"
    }
  })
}
相关推荐
ct97816 分钟前
WebGL动画实现方式与定时器缺陷
webgl
云栖梦泽22 分钟前
易语言开发从入门到精通:补充篇·网络编程进阶+实用爬虫开发·API集成·代理IP配置·异步请求·防封禁优化
开发语言
java1234_小锋36 分钟前
Java高频面试题:SpringBoot为什么要禁止循环依赖?
java·开发语言·面试
铅笔侠_小龙虾42 分钟前
Flutter Demo
开发语言·javascript·flutter
2501_944525541 小时前
Flutter for OpenHarmony 个人理财管理App实战 - 账户详情页面
android·java·开发语言·前端·javascript·flutter
福大大架构师每日一题1 小时前
ComfyUI v0.11.1正式发布:新增开发者专属节点支持、API节点强化、Python 3.14兼容性更新等全方位优化!
开发语言·python
wangdaoyin20101 小时前
若依vue2前后端分离集成flowable
开发语言·前端·javascript
天天进步20152 小时前
AI Agent 与流式处理:Motia 在生成式 AI 时代的后端范式
javascript
心柠2 小时前
vue3相关知识总结
前端·javascript·vue.js
向阳开的夏天2 小时前
麒麟V10源码编译QT5.6.3 (x86 & arm64)
开发语言·qt