cesium默认全屏按钮自定义

cesium默认全屏按钮自定义

1  隐藏默认的svg

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

3   修改它点击时的样式

代码如下：

 1 .cesium-viewer-fullscreenContainer {
 2     position: absolute;
 3     top: 100px;
 4     right: 24px;
 5      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按钮中画的那个图，你可以给它隐藏了