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