Cesium界面自定义设置

最新推荐文章于 2024-05-19 15:38:04 发布

pjt121382333

最新推荐文章于 2024-05-19 15:38:04 发布

阅读量5.5k

点赞数 1

文章标签： Cesium

本文链接：https://blog.csdn.net/qq_40850482/article/details/100104158

版权

Cesium界面背景设置

Cesium界面自定义设置

Cesium界面自定义设置

一、纯净界面

1.css方式

在html页面中

<head>
<style>
        body{
            /*控制显示范围*/
            margin: 0px;
        }
        #cesiumContainer{
            width: 100%;
            height: 100%;
        }
        #cesiumContainer{
            background-image: url(../../Apps/SampleData/fire.png);
        }
        
        .cesium-viewer-toolbar,/*右上角按钮*/
        .cesium-viewer-animationContainer,/*左下角动画控件*/
        .cesium-viewer-timelineContainer,/*时间线*/
        .cesium-viewer-bottom/*logo信息*/
        {
            display: none;
        }
        .cesium-viewer-fullscreenContainer
        {/*注：全屏按钮不能通过display：none的方式来达到隐藏的目的，这是因为生成的按钮控件的行内样式设置了display属性，会覆盖引入的css属性*/
            position: absolute;
            top: -999em;
        }
    </style>
</head>

2.js方式

var viewer=new Cesium.Viewer('cesiumContainer',{
    //放大镜图标，查找位置工具，查找到之后会将镜头对准找到的地址，默认使用bing地图
    geocoder: false,
    //房子图标，视角返回初始位置
    homeButton: false,
    //经纬网图标，选择视角的模式，有三种：3D，2D，哥伦布视图（2.5D)
    sceneModePicker: false,
    //地图图标，图层选择器，选择要显示的地图服务和地形服务
    baseLayerPicker: false,
    //问号图标，导航帮助按钮，显示默认的地图控制帮助
    navigationHelpButton: false,
    //动画器件，显示当前时间，允许跳转特定时间
    animation: false,
    //时间轴
    timeline: false,
    //全屏图标，全屏按钮
    fullscreenButton: false,
    //虚拟现实
    vrButton: false,
    //阴影
    shadows: false,
    //点击后显示详细信息
    infoBox: false,
    //展示数据版权属性
    CreditsDisplay: false,

});
//去除logo
viewer.cesiumWidget.creditContainer.style.display = "none";

二、自定义设置背景

1.屏蔽天空盒，设置背景为自己的图片

（1）.html

<div id="cesiumContainer" style="background-image:url(图片路径)"></div>

(2).js

var viewer=new Cesium.Viewer('cesiumContainer',{
    // 设置渲染
    orderIndependentTranslucency: false,
    contextOptions:{
        webgl:{
            alpha:true,
        }
    }
});

viewer.scene.skyBox.show=false;//隐藏天空盒
viewer.scene.backgroundColor=new Cesium.Color(0.0,0.0,0.0,0.0);//设置背景透明
viewer.scene.skyAtmosphere.show=false;//隐藏大气圈
viewer.scene.sun.show=false;//隐藏太阳
viewer.scene.moon.show=false;//隐藏月亮

2.效果图

效果图如下：
在这里插入图片描述

pjt121382333

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
5
评论
Cesium界面自定义设置

Cesium界面背景设置Cesium界面自定义设置一、纯净界面1.css方式2.js方式二、自定义设置背景1.屏蔽天空盒，设置背景为自己的图片2.效果图Cesium界面自定义设置一、纯净界面1.css方式在html页面中<head><style> body{ /*控制显示范围*/ margin: 0...
复制链接

扫一扫