cesium默认全屏按钮自定义

1  隐藏默认的svg

2  修改它默认的按钮边框，背景

3   修改它点击时的样式

代码如下：

 1 .cesium-viewer-fullscreenContainer {  2  position: absolute;  3  top: 100px;  4  right: 24px;  5  width: 48px;  6  height: 48px;  7 }  8 
 9 .cesium-button:focus { 10     border-color: #001328; 11 } 12 
13 .cesium-button { 14     background-color: #001328; 15     fill: #001328; 16     background-image: url("../images/fullScreen.png"); 17     background-size: 20px; 18     background-repeat: no-repeat; 19     background-position: center; 20 } 21 
22 .cesium-button:hover { 23  border: 1px solid #22272B; 24     background-color: #001328; 25     background-image: url("../images/fullScreen.png"); 26     background-size: 20px; 27     background-repeat: no-repeat; 28     background-position: center; 29 } 30 
31 .cesium-svgPath-svg { 32  display: none; 33 }

效果如下：

 

 这个按钮就是我自定义的了。

.cesium-viewer-fullscreenContainer 可以改变按钮的位置和大小

.cesium-button:focus 改变点击时的颜色等

.cesium-button 控制按钮的背景色啥的

.cesium-button:hover 为了更改它默认时的划过设置，你可以再根据需要自定义一个，覆盖它原来的样式

.cesium-svgPath-svg 这就是cesium按钮中画的那个图，你可以给它隐藏了