首页 / 浏览问题 / WebGIS / 问题详情
vue3的超图cesium的天空盒一直打开失败
2EXP 2024年06月27日

代码是这样

setup(){
  const store = useStore()
  let sidebar = reactive({
      
      maplocate:{
        name: '图层管理',
        visible: false,
      },
      searchtool:{
        name: '搜索工具',
        visible: false,
      }
    })
  onMounted(()=>{
    const stores = useStore()
    const layers=[]
    var viewer = new Cesium.Viewer('cesiumContainer',{})
    var cloudSkyBox = new Cesium.SkyBox({
					sources: {
            positiveX: "@/assets/rightav9.jpg",
            negativeX: "@/assets/leftav9.jpg",
            positiveY: "@/assets/frontav9.jpg",
            negativeY: "@/assets/backav9.jpg",
            positiveZ: "@/assets/topav9.jpg",
            negativeZ: "@/assets/bottomav9.jpg",
					}
				});
    stores.state.items=viewer
    let scene = viewer.scene;
    scene.skyBox = cloudSkyBox;
  })
  return{
    sidebar
  }


}
}

到了界面是这样

1个回答

你好,你可按照以下步骤进行排查

1、可F12查看下,图片是否正常下载,检查图片路径是否正确

2、若1无误的话,可检查加载天空盒前需要先关闭环绕地球边缘的蓝天和光晕效果:viewer.scene.skyAtmosphere.show = false;

示例代码如下:

                    viewer.scene.skyAtmosphere.show = false;//关闭环绕地球边缘的蓝天和光晕效果
                    //创建天空盒
                    let hdrSkyBox = new SuperMap3D.SkyBox({
                        imageUrl: './images/SkyBox/panorama/HDR_night_4K.hdr'
                    })
                    hdrSkyBox.WSpeed = 5;
                    hdrSkyBox.show = true;
                    scene.skyBox = hdrSkyBox;

希望可以帮助到你!

2,548EXP 2024年06月27日
...