2023-10-10 09:31:35 +08:00
|
|
|
|
<template>
|
2023-10-12 18:45:45 +08:00
|
|
|
|
<div id="mars3dContainer" class="mars3d-container"></div>
|
|
|
|
|
|
<!-- 图层添加 -->
|
|
|
|
|
|
<div class="layer-add">
|
|
|
|
|
|
<span class="layer-add-title">图层添加</span>
|
|
|
|
|
|
<el-scrollbar style="margin-top: 10px" :style="{ height: title ? `calc(100% - 95px)` : `calc(100% - 56px)` }">
|
|
|
|
|
|
<el-tree
|
|
|
|
|
|
:default-expanded-keys="expandedKeys"
|
|
|
|
|
|
:default-checked-keys="checkedKeys"
|
|
|
|
|
|
:data="treeData"
|
|
|
|
|
|
:props="props"
|
|
|
|
|
|
show-checkbox
|
|
|
|
|
|
@check-change="handleCheckChange"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</el-scrollbar>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="option-list">
|
|
|
|
|
|
<span class="option-list-title">功能选择</span>
|
|
|
|
|
|
<el-scrollbar style="margin-top: 10px" :style="{ height: title ? `calc(100% - 95px)` : `calc(100% - 56px)` }">
|
|
|
|
|
|
<div class="option-list-item">
|
|
|
|
|
|
<span>雨天气：</span>
|
|
|
|
|
|
<div class="item-classify">
|
|
|
|
|
|
<div class="item-classify-item">
|
|
|
|
|
|
<span>是否开启：</span>
|
|
|
|
|
|
<el-switch v-model="yuProperty.enabled" @change="e => yuOperate(e, 'enabled')" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item-classify-item">
|
|
|
|
|
|
<span>粒子速度：</span>
|
|
|
|
|
|
<el-slider v-model="yuProperty.speed" @change="e => yuOperate(e, 'speed')" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item-classify-item">
|
|
|
|
|
|
<span>粒子大小：</span>
|
|
|
|
|
|
<el-slider v-model="yuProperty.size" @change="e => yuOperate(e, 'size')" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item-classify-item">
|
|
|
|
|
|
<span>粒子方向：</span>
|
|
|
|
|
|
<el-slider v-model="yuProperty.direction" @change="e => yuOperate(e, 'direction')" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="option-list-item">
|
|
|
|
|
|
<span>雾天气：</span>
|
|
|
|
|
|
<div class="item-classify">
|
|
|
|
|
|
<div class="item-classify-item">
|
|
|
|
|
|
<span>是否开启：</span>
|
|
|
|
|
|
<el-switch v-model="wuProperty.enabled" @change="e => wuOperate(e, 'enabled')" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item-classify-item">
|
|
|
|
|
|
<span>雾颜色：</span>
|
|
|
|
|
|
<el-color-picker v-model="wuProperty.color" @change="e => wuOperate(e, 'color')" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item-classify-item">
|
|
|
|
|
|
<span>近距离：</span>
|
|
|
|
|
|
<el-slider v-model="wuProperty.fogByDistanceX" @change="e => wuOperate(e, 'fogByDistanceX')" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item-classify-item">
|
|
|
|
|
|
<span>远距离：</span>
|
|
|
|
|
|
<el-slider v-model="wuProperty.fogByDistanceZ" @change="e => wuOperate(e, 'fogByDistanceZ')" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="option-list-item">
|
|
|
|
|
|
<span>雪天气：</span>
|
|
|
|
|
|
<div class="item-classify">
|
|
|
|
|
|
<div class="item-classify-item">
|
|
|
|
|
|
<span>是否开启：</span>
|
|
|
|
|
|
<el-switch v-model="xueProperty.enabledSnow" @change="e => xueOperate(e, 'enabled')" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item-classify-item">
|
|
|
|
|
|
<span>下雪速度：</span>
|
|
|
|
|
|
<el-slider v-model="xueProperty.speed" @change="e => xueOperate(e, 'speed')" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="option-list-item">
|
|
|
|
|
|
<span>积雪效果：</span>
|
|
|
|
|
|
<div class="item-classify">
|
|
|
|
|
|
<div class="item-classify-item">
|
|
|
|
|
|
<span>是否开启：</span>
|
|
|
|
|
|
<el-switch v-model="xueProperty.enabledCover" @change="e => jxOperate(e, 'enabled')" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item-classify-item">
|
|
|
|
|
|
<span>积雪程度：</span>
|
|
|
|
|
|
<el-slider v-model="xueProperty.alpha" :step="0.1" :max="1" @change="e => jxOperate(e, 'alpha')" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="option-list-item">
|
|
|
|
|
|
<span>日照效果：</span>
|
|
|
|
|
|
<div class="item-classify">
|
|
|
|
|
|
<div class="item-classify-item">
|
|
|
|
|
|
<span>日期选择：</span>
|
|
|
|
|
|
<el-date-picker v-model="sunProperty.timeVal" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item-classify-item">
|
|
|
|
|
|
<span>时间选择：</span>
|
|
|
|
|
|
<el-slider v-model="sunProperty.currDate" :min="0" :max="1440" :step="1" @change="timeChange" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="item-classify-item">
|
|
|
|
|
|
<span>当前时间：</span>
|
|
|
|
|
|
<span>{{ sunProperty.timeVal }} {{ hours }} 时 {{ minutes }}分</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-10-10 09:31:35 +08:00
|
|
|
|
</div>
|
2023-10-12 18:45:45 +08:00
|
|
|
|
</el-scrollbar>
|
2023-10-10 09:31:35 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
2023-10-12 18:45:45 +08:00
|
|
|
|
import { ref, onMounted, onBeforeMount, computed } from "vue";
|
|
|
|
|
|
//引入cesium基础库
|
|
|
|
|
|
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
|
|
|
|
|
|
import * as Cesium from "mars3d-cesium";
|
|
|
|
|
|
//导入mars3d主库
|
|
|
|
|
|
import "mars3d/dist/mars3d.css";
|
|
|
|
|
|
import * as mars3d from "mars3d";
|
|
|
|
|
|
import ConfigJson from "@/views/goverment/largeScreen/config.json";
|
|
|
|
|
|
const title = ref("");
|
|
|
|
|
|
const yuProperty = ref({
|
|
|
|
|
|
enabled: false,
|
|
|
|
|
|
speed: 10,
|
|
|
|
|
|
size: 20,
|
|
|
|
|
|
direction: 10
|
|
|
|
|
|
});
|
|
|
|
|
|
const wuProperty = ref({
|
|
|
|
|
|
enabled: false,
|
|
|
|
|
|
color: "#ffffff",
|
|
|
|
|
|
fogByDistanceX: 100,
|
|
|
|
|
|
fogByDistanceZ: 9000
|
|
|
|
|
|
});
|
|
|
|
|
|
const xueProperty = ref({
|
|
|
|
|
|
enabledSnow: false,
|
|
|
|
|
|
enabledCover: false,
|
|
|
|
|
|
speed: 20,
|
|
|
|
|
|
alpha: 0.6
|
|
|
|
|
|
});
|
|
|
|
|
|
const sunProperty = ref({
|
|
|
|
|
|
timeVal: null,
|
|
|
|
|
|
currDate: 420
|
|
|
|
|
|
});
|
|
|
|
|
|
const checkedKeys = ref<any[]>([]);
|
|
|
|
|
|
const expandedKeys = ref<any>([]);
|
|
|
|
|
|
const layersObj: any = {};
|
|
|
|
|
|
const treeData = ref<any>([]);
|
|
|
|
|
|
const props = {
|
|
|
|
|
|
label: "title",
|
|
|
|
|
|
children: "children"
|
2023-10-10 09:31:35 +08:00
|
|
|
|
};
|
2023-10-12 18:45:45 +08:00
|
|
|
|
const hours = computed(() => Math.floor(sunProperty.value.currDate / 60));
|
|
|
|
|
|
const minutes = computed(() => Math.floor(sunProperty.value.currDate / 60));
|
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
|
// const configUrl = "http://182.90.224.147:6080/file/config/config.json";
|
|
|
|
|
|
// const configUrl = "../config.json";
|
|
|
|
|
|
// mars3d.Util.fetchJson({ url: configUrl }).then(data => {
|
|
|
|
|
|
// console.log(data);
|
|
|
|
|
|
// initMars3d(data.map3d);
|
|
|
|
|
|
// });
|
|
|
|
|
|
await initMars3d(ConfigJson.map3d);
|
|
|
|
|
|
await initTree();
|
|
|
|
|
|
});
|
|
|
|
|
|
let map: any;
|
|
|
|
|
|
let rainEffect: any; // 雨天气
|
|
|
|
|
|
let fogEffect: any; // 雾天气
|
|
|
|
|
|
let snowEffect: any; // 雪天气
|
|
|
|
|
|
let snowCover: any; // 积雪
|
|
|
|
|
|
let shadows: any; // 日照效果
|
|
|
|
|
|
const initMars3d = (option: any) => {
|
|
|
|
|
|
map = new mars3d.Map("mars3dContainer", option);
|
|
|
|
|
|
// map.scene.moon.show = true; // 太阳
|
|
|
|
|
|
// map.scene.sun.show = true; // 月亮
|
|
|
|
|
|
rainEffect = new mars3d.effect.RainEffect({
|
|
|
|
|
|
speed: 10,
|
|
|
|
|
|
size: 20,
|
|
|
|
|
|
direction: 10,
|
|
|
|
|
|
enabled: false
|
|
|
|
|
|
});
|
|
|
|
|
|
fogEffect = new mars3d.effect.FogEffect({
|
|
|
|
|
|
color: Cesium.Color.WHITE,
|
|
|
|
|
|
fogByDistance: new Cesium.Cartesian4(100, 0.0, 9000, 0.9),
|
|
|
|
|
|
enabled: false
|
|
|
|
|
|
});
|
|
|
|
|
|
snowEffect = new mars3d.effect.SnowEffect({
|
|
|
|
|
|
enabled: false,
|
|
|
|
|
|
speed: 10
|
|
|
|
|
|
});
|
|
|
|
|
|
snowCover = new mars3d.effect.SnowCoverEffect({
|
|
|
|
|
|
enabled: false,
|
|
|
|
|
|
// layer: tiles3dLayer, // 如果传值3dtiles图层，只对该模型生效
|
|
|
|
|
|
alpha: 0.6,
|
|
|
|
|
|
maxHeight: 8000 // 大于此高度后不显示
|
|
|
|
|
|
});
|
|
|
|
|
|
shadows = new mars3d.thing.Shadows({
|
|
|
|
|
|
multiplier: 1600
|
|
|
|
|
|
});
|
|
|
|
|
|
map.addEffect(rainEffect);
|
|
|
|
|
|
map.addEffect(fogEffect);
|
|
|
|
|
|
map.addEffect(snowEffect);
|
|
|
|
|
|
map.addEffect(snowCover);
|
|
|
|
|
|
map.addThing(shadows);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleCheckChange = (e: any, isCheck: any) => {
|
|
|
|
|
|
const layer = layersObj[e.key];
|
|
|
|
|
|
|
|
|
|
|
|
if (layer) {
|
|
|
|
|
|
if (!layer.isAdded) {
|
|
|
|
|
|
map.addLayer(layer);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 处理子节点
|
|
|
|
|
|
if (e.children && e.children.length) {
|
|
|
|
|
|
renderChildNode(isCheck, e.children);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (isCheck) {
|
|
|
|
|
|
layer.show = true;
|
|
|
|
|
|
layer.flyTo();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
layer.show = false;
|
|
|
|
|
|
}
|
2023-10-10 09:31:35 +08:00
|
|
|
|
}
|
|
|
|
|
|
};
|
2023-10-12 18:45:45 +08:00
|
|
|
|
const renderChildNode = (isCheck: any, children: any[]) => {
|
|
|
|
|
|
children.forEach(child => {
|
|
|
|
|
|
const layer = layersObj[child.key];
|
|
|
|
|
|
if (layer) {
|
|
|
|
|
|
if (!layer.isAdded) {
|
|
|
|
|
|
map.addLayer(layer);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (isCheck) {
|
|
|
|
|
|
layer.show = true;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
layer.show = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (child.children) {
|
|
|
|
|
|
renderChildNode(isCheck, child.children);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
// 初始化树结构
|
|
|
|
|
|
const initTree = () => {
|
|
|
|
|
|
const layers = map.getLayers({
|
|
|
|
|
|
basemaps: true, // 是否取config.json中的basempas
|
|
|
|
|
|
layers: true // 是否取config.json中的layers
|
|
|
|
|
|
});
|
|
|
|
|
|
console.log(layers);
|
|
|
|
|
|
// 遍历出config.json中所有的basempas和layers
|
|
|
|
|
|
for (let i = layers.length - 1; i >= 0; i--) {
|
|
|
|
|
|
const layer = layers[i];
|
|
|
|
|
|
|
|
|
|
|
|
if (layer && layer.pid === -1) {
|
|
|
|
|
|
const node: any = {
|
|
|
|
|
|
title: layer.name,
|
|
|
|
|
|
key: layer.id,
|
|
|
|
|
|
id: layer.id,
|
|
|
|
|
|
pId: layer.pid,
|
|
|
|
|
|
group: layer.type === "group"
|
|
|
|
|
|
};
|
|
|
|
|
|
node.children = findChild(node, layers);
|
|
|
|
|
|
treeData.value.push(node);
|
|
|
|
|
|
layersObj[layer.id] = layer;
|
|
|
|
|
|
expandedKeys.value.push(node.key);
|
|
|
|
|
|
}
|
2023-10-10 09:31:35 +08:00
|
|
|
|
}
|
2023-10-12 18:45:45 +08:00
|
|
|
|
};
|
|
|
|
|
|
const findChild = (parent: any, list: any[]) => {
|
|
|
|
|
|
return list
|
|
|
|
|
|
.filter((item: any) => item.pid === parent.id)
|
|
|
|
|
|
.map((item: any) => {
|
|
|
|
|
|
const node: any = {
|
|
|
|
|
|
title: item.name,
|
|
|
|
|
|
key: item.id,
|
|
|
|
|
|
id: item.id,
|
|
|
|
|
|
pId: item.pid,
|
|
|
|
|
|
group: item.type === "group"
|
|
|
|
|
|
};
|
|
|
|
|
|
layersObj[item.id] = item;
|
|
|
|
|
|
expandedKeys.value.push(node.key);
|
|
|
|
|
|
|
|
|
|
|
|
if (item.hasEmptyGroup || item.hasChildLayer) {
|
|
|
|
|
|
node.children = findChild(node, list);
|
|
|
|
|
|
}
|
|
|
|
|
|
if (item.isAdded && item.show) {
|
|
|
|
|
|
checkedKeys.value.push(node.key);
|
|
|
|
|
|
}
|
|
|
|
|
|
return node;
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 雨天气操作
|
|
|
|
|
|
const yuOperate = (e: any, label: any) => {
|
|
|
|
|
|
console.log(e, label);
|
|
|
|
|
|
rainEffect[label] = e;
|
|
|
|
|
|
};
|
|
|
|
|
|
// 雾天气操作
|
|
|
|
|
|
const wuOperate = (e: any, label: any) => {
|
|
|
|
|
|
console.log(e, label);
|
|
|
|
|
|
switch (label) {
|
|
|
|
|
|
case "enabled":
|
|
|
|
|
|
fogEffect[label] = e;
|
|
|
|
|
|
break;
|
|
|
|
|
|
case "color":
|
|
|
|
|
|
fogEffect.color = Cesium.Color.fromCssColorString(e);
|
|
|
|
|
|
break;
|
|
|
|
|
|
case "fogByDistanceX":
|
|
|
|
|
|
fogEffect.fogByDistance.x = e;
|
|
|
|
|
|
break;
|
|
|
|
|
|
case "fogByDistanceZ":
|
|
|
|
|
|
fogEffect.fogByDistance.z = e;
|
|
|
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
// 雪天气操作
|
|
|
|
|
|
const xueOperate = (e: any, label: any) => {
|
|
|
|
|
|
console.log(e, label);
|
|
|
|
|
|
snowEffect[label] = e;
|
|
|
|
|
|
};
|
|
|
|
|
|
// 积雪操作
|
|
|
|
|
|
const jxOperate = (e: any, label: any) => {
|
|
|
|
|
|
console.log(e, label);
|
|
|
|
|
|
snowCover[label] = e;
|
|
|
|
|
|
};
|
|
|
|
|
|
// 日照时间操作
|
|
|
|
|
|
const timeChange = (e: any) => {
|
|
|
|
|
|
const dateTime = new Date(`${sunProperty.value.timeVal} ${hours.value}:${minutes.value}:00`);
|
|
|
|
|
|
shadows.time = dateTime;
|
|
|
|
|
|
};
|
2023-10-10 09:31:35 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2023-10-12 18:45:45 +08:00
|
|
|
|
.mars3d-container {
|
2023-10-10 09:31:35 +08:00
|
|
|
|
height: 100%;
|
2023-10-12 18:45:45 +08:00
|
|
|
|
width: 100%;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
.layer-add {
|
|
|
|
|
|
width: 200px;
|
|
|
|
|
|
height: 350px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 20px;
|
|
|
|
|
|
top: 20px;
|
|
|
|
|
|
background-color: white;
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
&-title {
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.option-list {
|
|
|
|
|
|
width: 200px;
|
|
|
|
|
|
height: 350px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 20px;
|
|
|
|
|
|
top: 450px;
|
|
|
|
|
|
background-color: white;
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
&-title {
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
}
|
|
|
|
|
|
&-item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
> span {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
font-weight: 700;
|
2023-10-10 09:31:35 +08:00
|
|
|
|
}
|
2023-10-12 18:45:45 +08:00
|
|
|
|
.item-classify {
|
2023-10-10 09:31:35 +08:00
|
|
|
|
display: flex;
|
2023-10-12 18:45:45 +08:00
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
&-item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
:deep() {
|
|
|
|
|
|
.el-slider,
|
|
|
|
|
|
.el-date-editor {
|
|
|
|
|
|
width: 60% !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2023-10-10 09:31:35 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2023-10-12 18:45:45 +08:00
|
|
|
|
:deep() {
|
|
|
|
|
|
.cesium-viewer-toolbar {
|
|
|
|
|
|
top: auto;
|
|
|
|
|
|
bottom: 35px;
|
|
|
|
|
|
left: 12px;
|
|
|
|
|
|
right: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.cesium-toolbar-button img {
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.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);
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
fill: #e6e6e6;
|
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.cesium-button:hover {
|
|
|
|
|
|
background-color: rgba(0, 138, 255, 0.7);
|
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**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;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.cesium-navigation-help-instructions,
|
|
|
|
|
|
.cesium-navigation-button {
|
|
|
|
|
|
background-color: rgba(23, 49, 71, 0.8);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.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);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mars3d-contextmenu-ul > li > a:hover,
|
|
|
|
|
|
.mars3d-sub-menu > li > a:hover,
|
|
|
|
|
|
.mars3d-contextmenu-ul > li > a:focus,
|
|
|
|
|
|
.mars3d-sub-menu > li > a:focus,
|
|
|
|
|
|
.mars3d-contextmenu-ul > li > .active,
|
|
|
|
|
|
.mars3d-sub-menu > li > .active {
|
|
|
|
|
|
background-color: var(--mars-hover-btn-bg, #3ea6ff);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mars3d-contextmenu-ul > .active > a,
|
|
|
|
|
|
.mars3d-sub-menu > .active > a,
|
|
|
|
|
|
.mars3d-contextmenu-ul > .active > a:hover,
|
|
|
|
|
|
.mars3d-sub-menu > .active > a:hover,
|
|
|
|
|
|
.mars3d-contextmenu-ul > .active > a:focus,
|
|
|
|
|
|
.mars3d-sub-menu > .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-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));
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mars3d-template-content label {
|
|
|
|
|
|
padding-right: 6px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mars3d-template-titile {
|
|
|
|
|
|
color: var(--mars-base-color, #ffffff);
|
|
|
|
|
|
border-bottom: 1px solid var(--mars-hover-btn-bg, #3ea6ff);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mars3d-template-titile a {
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
color: var(--mars-msg-title-color, #c7d3dd);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mars3d-popup-btn-custom {
|
|
|
|
|
|
padding: 3px 10px;
|
|
|
|
|
|
border: 1px solid #209ffd;
|
|
|
|
|
|
background: #209ffd1c;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mars3d-popup-content {
|
|
|
|
|
|
margin: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mars3d-divGraphic:hover {
|
|
|
|
|
|
z-index: 999 !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2023-10-10 09:31:35 +08:00
|
|
|
|
</style>
|
