cesium默认全屏按钮自定义

1  隐藏默认的svg

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

3   修改它点击时的样式

代码如下：

 .cesium-viewer-fullscreenContainer {

     position: absolute;

     top: 100px;

     right: 24px;

     width: 48px;

     height: 48px;

 }

 .cesium-button:focus {

     border-color: #001328;

 }

 .cesium-button {

     background-color: #001328;

     fill: #001328;

     background-image: url("../images/fullScreen.png");

     background-size: 20px;

     background-repeat: no-repeat;

     background-position: center;

 }

 .cesium-button:hover {

     border: 1px solid #22272B;

     background-color: #001328;

     background-image: url("../images/fullScreen.png");

     background-size: 20px;

     background-repeat: no-repeat;

     background-position: center;

 }

 .cesium-svgPath-svg {

     display: none;

 }

效果如下：

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

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

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

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

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

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