当前位置: 首页 > article >正文

【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"
    }
  })
}


http://www.kler.cn/a/445449.html

相关文章:

  • 服务器被攻击怎么办
  • Modbus TCP 报文说明
  • 科技云报到:人工智能时代“三大件”:生成式AI、数据、云服务
  • LUA基础语法
  • Windows API Set:那些“只存在但不被使用“的DLL
  • 钉钉h5微应用安卓报错error29 ios报错error3 加上报错52013,签名校验失败 (前端)
  • 几种广泛使用的 C++ 编译器
  • 广东省佛山市南海信息学竞赛高频考查点系列全解
  • 基于开源 AI 智能名片 S2B2C 商城小程序的智慧零售仓储管理创新策略研究
  • 简述 React 的生命周期
  • MATLAB转换C语言--问题(一)FFT 和 IFFT 的缩放因子
  • 微服务网关初体验
  • 【Java基础面试题025】什么是Java的Integer缓存池?
  • C++ 字符串(string)使用
  • Unity-Editor扩展GUI基本实现一个可拖拉放的格子列表
  • 32单片机串口数据接收、空闲IDLE中断详解
  • 【渗透技术总结】SQL手工注入总结
  • SQL进阶技巧:如何根据工业制程参数计算良品率?
  • 【学习笔记】深入浅出详解Pytorch中的View, reshape, unfold,flatten等方法。
  • hadoop技术栈的基本启停命令
  • C05S12-MySQL数据库事务
  • Day9 神经网络的偏导数基础
  • bacnet4j-5.0.2.jar资源
  • AI加持,如何让PPT像开挂一键生成?
  • 前端开发 详解 Node. js 都有哪些全局对象?
  • C# OpenCV机器视觉:图像分割(让照片中的物体各自“安家”!)