cesium默认全屏按钮自定义

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按钮中画的那个图，你可以给它隐藏了