【Mars3d】关于locationBar等控件的css样式冲突处理问题

【Mars3d】关于locationBar等控件的css样式冲突处理问题

问题场景：

1.通过代码加载new mars3d.control.Zoom(或者通过地球map初始化配置?option.control = {加载放大缩小工具控件的时候，出现图标的样式冲突效果：

2.sceneModePicker， 二三维切换按钮也是，出现样式冲突效果，无法出现示例中的相关类似效果。

排查后发现是cesium本身的css文件问题导致的样式冲突。

根据开发教程的说明，这个文件是cesium原生css，说明这个问题是原生cesium有bug了导致的样式冲突。

解决方案：

1.学习Mars3d官网提供的示例和项目写的覆盖cesium的css

2.相关路径：src\components\mars-work\mars-map.vue

示例地址

git clone https://gitee.com/marsgis/mars3d-vue-example.git

项目地址：

git clone https://gitee.com/marsgis/mars3d-vue-project.git

相关的代码（已经写好覆盖了cesium原生的css效果）：

<style lang="less">

/**cesium 工具按钮栏*/

.cesium-viewer-toolbar {

? top: auto !important;

? bottom: 35px !important;

? left: 12px !important;

? right: auto !important;

}

.cesium-toolbar-button img {

? height: 100%;

}

.cesium-viewer-toolbar > .cesium-toolbar-button,

.cesium-navigationHelpButton-wrapper,

.cesium-viewer-geocoderContainer {

? margin-bottom: 5px;

? float: left;

? clear: both;

? text-align: center;

}

.cesium-button {

? background-color: rgba(23, 49, 71, 0.7);

? color: #e6e6e6;

? fill: #e6e6e6;

? box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

? line-height: 32px;

}

.cesium-button:hover {

? background-color: rgba(0, 138, 255, 0.7);

}

/**cesium 底图切换面板*/

.cesium-baseLayerPicker-dropDown {

? bottom: 0;

? left: 40px;

? max-height: 700px;

? margin-bottom: 5px;

? background-color: rgba(23, 49, 71, 0.7);

}

/**cesium 帮助面板*/

.cesium-navigation-help {

? top: auto;

? bottom: 0;

? left: 40px;

? transform-origin: left bottom;

? background: none;

? background-color: rgba(23, 49, 71, 0.8);

? .cesium-navigation-help-instructions {

? ? background: none;

? }

? .cesium-navigation-button {

? ? background: none;

? }

? .cesium-navigation-button-selected,

? .cesium-navigation-button-unselected:hover {

? ? background-color: rgba(23, 49, 71, 1);

? }

}

/**cesium 二维三维切换*/

.cesium-sceneModePicker-wrapper {

? width: auto;

}

.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {

? float: right;

? margin: 0 3px;

}

/**cesium POI查询输入框*/

.cesium-viewer-geocoderContainer .search-results {

? left: 0;

? right: 40px;

? width: auto;

? z-index: 9999;

}

.cesium-geocoder-searchButton {

? background-color: rgba(23, 49, 71, 0.8);

}

.cesium-viewer-geocoderContainer .cesium-geocoder-input {

? background-color: rgba(63, 72, 84, 0.7);

}

.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {

? background-color: var(--mars-bg-base, rgba(63, 72, 84, 0.9));

}

.cesium-viewer-geocoderContainer .search-results {

? background-color: rgba(23, 49, 71, 0.8);

}

/**cesium info信息框*/

.cesium-infoBox {

? top: 50px;

? background: var(--mars-bg-base, rgba(63, 72, 84, 0.9));

}

.cesium-infoBox-title {

? background-color: rgba(23, 49, 71, 0.8);

}

/**cesium 任务栏的FPS信息*/

.cesium-performanceDisplay-defaultContainer {

? top: auto;

? bottom: 35px;

? right: 50px;

}

.cesium-performanceDisplay-ms,

.cesium-performanceDisplay-fps {

? color: #fff;

}

/**cesium tileset调试信息面板*/

.cesium-viewer-cesiumInspectorContainer {

? top: 10px;

? left: 10px;

? right: auto;

}

.cesium-cesiumInspector {

? background-color: rgba(23, 49, 71, 0.8);

}

/**覆盖mars3d内部控件的颜色等样式*/

.mars3d-compass .mars3d-compass-outer {

? fill: rgba(23, 49, 71, 0.8);

}

.mars3d-contextmenu-ul,

.mars3d-sub-menu {

? background-color: rgba(23, 49, 71, 0.8);

? > li > a:hover,

? > li > a:focus,

? > li > .active {

? ? background-color: var(--mars-hover-btn-bg, #3ea6ff);

? }

? > .active > a,

? > .active > a:hover,

? > .active > a:focus {

? ? background-color: var(--mars-hover-btn-bg, #3ea6ff);

? }

}

/* Popup样式*/

.mars3d-popup-color {

? color: var(--mars-text-color, #ffffff);

}

.mars3d-popup-background {

? background: var(--mars-bg-base, rgba(63, 72, 84, 0.9));

}

.mars3d-popup-content {

? margin: 15px;

}

.mars3d-popup-btn-custom {

? padding: 3px 10px;

? border: 1px solid #209ffd;

? background: #209ffd1c;

}

.mars3d-tooltip {

? color: var(--mars-text-color, #ffffff);

? background: var(--mars-bg-base, rgba(63, 72, 84, 0.9));

? border: 1px solid var(--mars-bg-base, rgba(63, 72, 84, 0.9));

}

.mars3d-tooltip-top:before {

? border-top-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));

}

.mars3d-tooltip-bottom:before {

? border-bottom-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));

}

.mars3d-tooltip-left:before {

? border-left-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));

}

.mars3d-tooltip-right:before {

? border-right-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));

}

/* all 中的html样式 */

.mars3d-template-titile {

? color: var(--mars-base-color);

? border-bottom: 1px solid var(--mars-hover-btn-bg);

? a {

? ? font-size: 16px;

? ? color: var(--mars-msg-title-color);

? }

}

.mars3d-template-content {

? label {

? ? padding-right: 6px;

? }

? input {

? ? color: var(--mars-text-color);

? ? background-color: transparent !important;

? ? padding: 4px 5px;

? }

? input::placeholder {

? ? color: #cdcdcd !important;

? }

? textarea {

? ? color: var(--mars-base-color);

? ? background-color: transparent !important;

? ? padding: 4px 5px;

? }

? textarea::placeholder {

? ? color: #cdcdcd !important;

? }

}

</style>