1982 lines
53 KiB
Vue
1982 lines
53 KiB
Vue
<template>
|
||
<layoutTop></layoutTop>
|
||
<div class="map-content" id="map-content">
|
||
<div id="mars3dContainer" class="mars3d-container"></div>
|
||
<!-- 搜索框 -->
|
||
<div class="input-search">
|
||
<el-input
|
||
v-model="inputVal"
|
||
@blur="closeSearch"
|
||
clearable
|
||
@focus="showHistoryList"
|
||
@input="searchInput"
|
||
placeholder="搜索 地点"
|
||
>
|
||
<template #append>
|
||
<el-icon size="18" @click="searchInput"><Search /></el-icon> </template
|
||
></el-input>
|
||
<div class="search-list" v-if="searchListShow && dataSource.length > 0">
|
||
<div v-for="(item, i) in dataSource" :key="i" class="search-list-item" @click="selectPoint(item)">
|
||
{{ item.value }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 菜单操作 -->
|
||
<div class="menu-operate">
|
||
<div class="menu-operate-item" v-for="(item, i) in data" :key="i">
|
||
<div class="toolbar-item" @click="showWidget(item.name)">
|
||
<img :src="item.icon" alt="" srcset="" style="width: 16px; height: 16px" />
|
||
<span class="title">{{ item.name }}</span>
|
||
<el-icon size="14" v-if="item.children" color="#fff"><ArrowDown /></el-icon>
|
||
</div>
|
||
<!-- <el-dropdown v-if="item.children" trigger="click" popper-class="dropdown-style">
|
||
<div class="toolbar-item">
|
||
<img :src="item.icon" alt="" srcset="" style="width: 16px; height: 16px" />
|
||
<span class="title">{{ item.name }}</span>
|
||
<el-icon size="14" color="#fff"><ArrowDown /></el-icon>
|
||
</div>
|
||
<template #dropdown>
|
||
<el-dropdown-menu class="dropdown">
|
||
<el-dropdown-item v-for="child in item.children" :key="child.name" @click="clickMenu(child.name)">
|
||
<img :src="child.icon" alt="" srcset="" style="width: 14px; height: 14px" />
|
||
<span>{{ child.name }}</span></el-dropdown-item
|
||
>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown> -->
|
||
</div>
|
||
</div>
|
||
<!-- 工具菜单操作 -->
|
||
<div class="tool-menu-operate" v-if="toolListShow">
|
||
<div class="tool-item" v-for="(item, index) in data[2].children" :key="index" @click="clickMenu(item.name)">
|
||
<img :src="item.icon" alt="" srcset="" style="width: 14px; height: 14px" />
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
</div>
|
||
<!-- 底图菜单操作页面 -->
|
||
<div class="basic-map" v-if="basicMapShow">
|
||
<div class="basic-title">
|
||
<span>底图</span>
|
||
<el-icon size="16" color="#fff" @click="basicMapShow = false"><Close /></el-icon>
|
||
</div>
|
||
<div class="basemap">
|
||
<div
|
||
v-for="(item, i) in baseMaps"
|
||
:key="i"
|
||
class="basemap-card"
|
||
:class="{ 'active-card': active === item.id }"
|
||
@click="changeBaseMaps(item.id)"
|
||
>
|
||
<div><img class="icon" :src="`${item.options.icon || 'src/assets/images/Mars3DImg/basemaps/bingAerial.png'}`" /></div>
|
||
<div>{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="terrain-show">
|
||
<span>显示地形</span>
|
||
<el-switch v-model="chkHasTerrain" @change="terrainOperate" />
|
||
</div>
|
||
</div>
|
||
<!-- 图层添加 -->
|
||
<div class="layer-add" v-if="layersShow">
|
||
<div class="layer-add-title">
|
||
<span>图层</span>
|
||
<el-icon size="16" color="#fff" @click="layersShow = false"><Close /></el-icon>
|
||
</div>
|
||
<div class="layer-add-tree">
|
||
<el-tree
|
||
:default-expanded-keys="expandedKeys"
|
||
:default-checked-keys="checkedKeys"
|
||
:data="treeData"
|
||
:props="props"
|
||
show-checkbox
|
||
node-key="id"
|
||
@check-change="handleCheckChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- 卷帘对比弹框 -->
|
||
<div class="roller-add" v-if="rollerComparisonShow">
|
||
<div class="roller-add-content">
|
||
<span>左侧图层：</span>
|
||
<el-select v-model="rollerVal.leftRollerVal" placeholder="请选择" @change="changeLeft">
|
||
<el-option v-for="item in leftRollerList" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
<span>右侧图层：</span>
|
||
<el-select v-model="rollerVal.rightRollerVal" placeholder="请选择" @change="changeRight">
|
||
<el-option v-for="item in rightRollerList" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
<el-icon size="16" color="#fff" style="cursor: pointer" @click="clearRollerComparison"><CloseBold /></el-icon>
|
||
</div>
|
||
</div>
|
||
<!-- 分屏对比弹框 -->
|
||
<div class="screen-layer-add" v-if="screenComparisonShow" v-draggable>
|
||
<div class="screen-layer-add-title">
|
||
<span>图层</span>
|
||
<el-icon size="16" color="#fff" @click="clearScreenComparison"><Close /></el-icon>
|
||
</div>
|
||
<div class="screen-layer-add-tree">
|
||
<el-tree
|
||
:default-expanded-keys="expandedKeys"
|
||
:default-checked-keys="checkedKeys"
|
||
:data="treeData"
|
||
:props="props"
|
||
show-checkbox
|
||
node-key="id"
|
||
@check-change="handleCheckChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- 图上量算弹框 -->
|
||
<MapMeasurement :mapInstance="map" v-if="measurementShow" @hiddenConfim="measurementShow = false" />
|
||
<!-- 空间分析弹框 -->
|
||
<SpaceAnalysis :mapInstance="map" v-if="analysisShow" @hiddenConfim="analysisShow = false" />
|
||
<!-- 坐标定位弹框 -->
|
||
<CoordinatePicking :mapInstance="map" v-if="pickingShow" @hiddenConfim="pickingShow = false" />
|
||
<!-- 地区导航弹框 -->
|
||
<RegionalNavigation :mapInstance="map" v-if="regionalNavigationShow" @hiddenConfim="regionalNavigationShow = false" />
|
||
<!-- 我的标记弹框 -->
|
||
<MyTags :mapInstance="map" v-if="myTagsShow" @hiddenConfim="myTagsShow = false" />
|
||
<!-- 视角书签弹框 -->
|
||
<ViewBookmark :mapInstance="map" v-if="viewBookmarkShow" @hiddenConfim="viewBookmarkShow = false" />
|
||
<!-- 地图打印弹框 -->
|
||
<MapPrint :mapInstance="map" v-if="mapPrintShow" @hiddenConfim="mapPrintShow = false" />
|
||
<!-- 飞行漫游弹框 -->
|
||
<FlyRoam :mapInstance="map" v-if="flyRoamShow" @hiddenConfim="flyRoamShow = false" />
|
||
<!-- 图上标绘弹框 -->
|
||
<MapMark :mapInstance="map" v-if="mapMarkShow" @hiddenConfim="mapMarkShow = false" />
|
||
<!-- 路线导航弹框 -->
|
||
<RouteNavigation :mapInstance="map" v-if="routeNavigationShow" @hiddenConfim="routeNavigationShow = false" />
|
||
</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">
|
||
<el-radio-group v-model="skyProperty.boxVal" size="small" style="margin-top: 10px" @change="boxChange">
|
||
<el-radio-button :label="1" border>晴天</el-radio-button>
|
||
<el-radio-button :label="2" border>晚霞</el-radio-button>
|
||
<el-radio-button :label="3" border>蓝天</el-radio-button>
|
||
<el-radio-button :label="4" border>默认</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
</div> -->
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, onMounted, onUnmounted, computed, markRaw } 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";
|
||
import layoutTop from "@/components/layoutTop/index.vue";
|
||
import { ElMessage } from "element-plus";
|
||
import { datas } from "@/enums/company/SetpsEnum";
|
||
import { initVue3Popup } from "@/utils/file-util";
|
||
import QueryPopup from "./components/query-popup.vue";
|
||
import MapMeasurement from "./components/mapMeasurement.vue";
|
||
import SpaceAnalysis from "./components/spaceAnalysis.vue";
|
||
import CoordinatePicking from "./components/coordinatePicking.vue";
|
||
import RegionalNavigation from "./components/regionalNavigation.vue";
|
||
import MyTags from "./components/myTags.vue";
|
||
import ViewBookmark from "./components/viewBookmark.vue";
|
||
import MapPrint from "./components/mapPrint.vue";
|
||
import FlyRoam from "./components/flyRoam.vue";
|
||
import MapMark from "./components/mapMark.vue";
|
||
import RouteNavigation from "./components/routeNavigation.vue";
|
||
import {
|
||
getSystemConfig,
|
||
baseMapList,
|
||
albugineaMapList,
|
||
diffuseWallList,
|
||
polylineCombineList,
|
||
gltfModelList
|
||
} from "@/api/modules/mapCommon";
|
||
const toolListShow = ref(false);
|
||
const configJson = ref<any>({});
|
||
const screenComparisonShow = ref(false); // 分屏对比弹框
|
||
const leftRollerList = ref<any>([]);
|
||
const rightRollerList = ref<any>([]);
|
||
const rollerVal = ref({
|
||
leftRollerVal: "",
|
||
rightRollerVal: ""
|
||
});
|
||
const rollerComparisonShow = ref(false); // 卷帘对比弹框
|
||
const routeNavigationShow = ref(false); // 路线导航弹框
|
||
const mapMarkShow = ref(false); // 图上标绘弹框
|
||
const flyRoamShow = ref(false); // 飞行漫游弹框
|
||
const mapPrintShow = ref(false); // 地图打印弹框
|
||
const viewBookmarkShow = ref(false); // 视角书签弹框
|
||
const myTagsShow = ref(false); // 我的标记弹框
|
||
const regionalNavigationShow = ref(false); // 地区导航弹框
|
||
const pickingShow = ref(false); // 坐标定位弹框
|
||
const analysisShow = ref(false); // 空间分析弹框
|
||
const measurementShow = ref(false); // 图上量算弹框
|
||
const layersShow = ref(false); // 图层弹框
|
||
const basicMapShow = ref(false); // 底图弹框
|
||
const chkHasTerrain = ref(false);
|
||
const active = ref("");
|
||
const baseMaps = ref([]);
|
||
const storageName = "mars3d_queryGaodePOI";
|
||
const inputVal = ref();
|
||
const dataSource = ref<any>([]);
|
||
const searchListShow = ref(false);
|
||
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 skyProperty = ref({
|
||
boxVal: 4
|
||
});
|
||
const checkedKeys = ref<any[]>([]);
|
||
const expandedKeys = ref<any>([]);
|
||
const layersObj: any = {};
|
||
const treeData = ref<any>([]);
|
||
const props = {
|
||
label: "title",
|
||
children: "children"
|
||
};
|
||
// 白膜列表
|
||
const albugineaList = ref([]);
|
||
const hours = computed(() => Math.floor(sunProperty.value.currDate / 60));
|
||
const minutes = computed(() => Math.floor(sunProperty.value.currDate / 60));
|
||
let map: any;
|
||
let queryPoi: any; // GaodePOI
|
||
let address: any = ""; // 选中的地址
|
||
let rainEffect: any; // 雨天气
|
||
let fogEffect: any; // 雾天气
|
||
let snowEffect: any; // 雪天气
|
||
let snowCover: any; // 积雪
|
||
let currSkyBox: any; // 当前生效的Skybox
|
||
let defaultSkybox: any; // cesium自带的Skybox
|
||
let graphicLayer: any; // 覆盖物
|
||
let imgArr = [] as any; // canvas 图标数组
|
||
let timer: any; // 延时器
|
||
let mapSplit: any; // 卷帘对比
|
||
let mapScreenSplit: any; // 分屏对比
|
||
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);
|
||
// });
|
||
for (let i = 0; i < 6; i++) {
|
||
const img = await getCanvas(i + 1);
|
||
imgArr.push(img);
|
||
}
|
||
let requestData = {
|
||
configKey: "mapConfig"
|
||
};
|
||
const { result } = await getSystemConfig(requestData);
|
||
if (result) {
|
||
configJson.value = JSON.parse(result.configValue);
|
||
} else {
|
||
configJson.value = ConfigJson.map3d;
|
||
}
|
||
// 查询配置的图层
|
||
const resBaseMaps: any = await baseMapList({});
|
||
console.log(resBaseMaps, "6666666666");
|
||
if (resBaseMaps.result && resBaseMaps.result.length > 0) {
|
||
let initBasemaps: any = [{ id: 10, name: "地图底图", type: "group" }];
|
||
resBaseMaps.result.map((item: any) => {
|
||
initBasemaps.push({
|
||
pid: 10,
|
||
id: item.id,
|
||
name: item.name,
|
||
...JSON.parse(item.layer),
|
||
show: item.show ? item.show : false
|
||
});
|
||
});
|
||
configJson.value.basemaps = initBasemaps;
|
||
}
|
||
// 查询配置的白膜
|
||
const resAlbuginea: any = await albugineaMapList({});
|
||
console.log(resAlbuginea, "白膜666666");
|
||
if (resAlbuginea.result && resAlbuginea.result.length > 0) {
|
||
let initAlbugineamaps: any = [{ id: 2040, name: "城市白模", type: "group" }];
|
||
albugineaList.value = resAlbuginea.result;
|
||
resAlbuginea.result.map((item: any) => {
|
||
initAlbugineamaps.push({
|
||
pid: 2040,
|
||
id: item.id,
|
||
name: item.name,
|
||
type: "3dtiles",
|
||
url: item.url,
|
||
maximumScreenSpaceError: 1,
|
||
style: {
|
||
color: {
|
||
conditions: [["true", "color('" + item.color + "')"]]
|
||
}
|
||
},
|
||
show: item.show ? item.show : false,
|
||
flyTo: item.flyTo ? item.flyTo : false
|
||
});
|
||
configJson.value.layers = initAlbugineamaps;
|
||
});
|
||
}
|
||
// 查询配置的gltf模型
|
||
const resModel: any = await gltfModelList({});
|
||
console.log(resModel, "gltf模型666666");
|
||
if (resModel.result && resModel.result.length > 0) {
|
||
let initModel: any = [{ id: 2020, name: "gltf模型", type: "group" }];
|
||
resModel.result.map((item: any) => {
|
||
initModel.push({
|
||
pid: 2020,
|
||
type: "graphic",
|
||
name: item.name,
|
||
data: [
|
||
{
|
||
type: "modelP",
|
||
position: [+item.lng, +item.lat, +item.alt],
|
||
style: {
|
||
url: item.url
|
||
}
|
||
}
|
||
],
|
||
popup: item.name,
|
||
show: item.show ? item.show : false
|
||
});
|
||
});
|
||
configJson.value.layers = configJson.value.layers.concat(initModel);
|
||
}
|
||
await initMars3d(configJson.value);
|
||
await initTree();
|
||
});
|
||
const qingtianSkybox = new mars3d.GroundSkyBox({
|
||
// 晴天天空盒
|
||
sources: {
|
||
positiveX: new URL("@/assets/images/skybox_near/qingtian/rightav9.jpg", import.meta.url).href,
|
||
negativeX: new URL("@/assets/images/skybox_near/qingtian/leftav9.jpg", import.meta.url).href,
|
||
positiveY: new URL("@/assets/images/skybox_near/qingtian/frontav9.jpg", import.meta.url).href,
|
||
negativeY: new URL("@/assets/images/skybox_near/qingtian/backav9.jpg", import.meta.url).href,
|
||
positiveZ: new URL("@/assets/images/skybox_near/qingtian/topav9.jpg", import.meta.url).href,
|
||
negativeZ: new URL("@/assets/images/skybox_near/qingtian/bottomav9.jpg", import.meta.url).href
|
||
}
|
||
});
|
||
const wanxiaSkybox = new mars3d.GroundSkyBox({
|
||
// 晚霞天空盒
|
||
sources: {
|
||
positiveX: new URL("@/assets/images/skybox_near/wanxia/SunSetRight.png", import.meta.url).href,
|
||
negativeX: new URL("@/assets/images/skybox_near/wanxia/SunSetLeft.png", import.meta.url).href,
|
||
positiveY: new URL("@/assets/images/skybox_near/wanxia/SunSetFront.png", import.meta.url).href,
|
||
negativeY: new URL("@/assets/images/skybox_near/wanxia/SunSetBack.png", import.meta.url).href,
|
||
positiveZ: new URL("@/assets/images/skybox_near/wanxia/SunSetUp.png", import.meta.url).href,
|
||
negativeZ: new URL("@/assets/images/skybox_near/wanxia/SunSetDown.png", import.meta.url).href
|
||
}
|
||
});
|
||
const lantianSkybox = new mars3d.GroundSkyBox({
|
||
// 晴天天空盒
|
||
sources: {
|
||
positiveX: new URL("@/assets/images/skybox_near/lantian/Right.jpg", import.meta.url).href,
|
||
negativeX: new URL("@/assets/images/skybox_near/lantian/Left.jpg", import.meta.url).href,
|
||
positiveY: new URL("@/assets/images/skybox_near/lantian/Front.jpg", import.meta.url).href,
|
||
negativeY: new URL("@/assets/images/skybox_near/lantian/Back.jpg", import.meta.url).href,
|
||
positiveZ: new URL("@/assets/images/skybox_near/lantian/Up.jpg", import.meta.url).href,
|
||
negativeZ: new URL("@/assets/images/skybox_near/lantian/Down.jpg", import.meta.url).href
|
||
}
|
||
});
|
||
const data = [
|
||
{ name: "底图", icon: new URL("@/assets/images/Mars3DIcon/dt.png", import.meta.url).href },
|
||
{ name: "图层", icon: new URL("@/assets/images/Mars3DIcon/tc.png", import.meta.url).href },
|
||
{
|
||
name: "工具",
|
||
icon: new URL("@/assets/images/Mars3DIcon/gj.png", import.meta.url).href,
|
||
children: [
|
||
{ name: "图上量算", icon: new URL("@/assets/images/Mars3DIcon/tsls.png", import.meta.url).href },
|
||
{ name: "空间分析", icon: new URL("@/assets/images/Mars3DIcon/kjfx.png", import.meta.url).href },
|
||
{ name: "坐标定位", icon: new URL("@/assets/images/Mars3DIcon/zbdw.png", import.meta.url).href },
|
||
{ name: "地区导航", icon: new URL("@/assets/images/Mars3DIcon/dqdh.png", import.meta.url).href },
|
||
{ name: "我的标记", icon: new URL("@/assets/images/Mars3DIcon/wdbj.png", import.meta.url).href },
|
||
{ name: "视角书签", icon: new URL("@/assets/images/Mars3DIcon/sjsq.png", import.meta.url).href },
|
||
{ name: "地图打印", icon: new URL("@/assets/images/Mars3DIcon/dtdy.png", import.meta.url).href },
|
||
{ name: "飞行漫游", icon: new URL("@/assets/images/Mars3DIcon/fxmy.png", import.meta.url).href },
|
||
{ name: "图上标绘", icon: new URL("@/assets/images/Mars3DIcon/tsbh.png", import.meta.url).href },
|
||
{ name: "路线导航", icon: new URL("@/assets/images/Mars3DIcon/lxdh.png", import.meta.url).href },
|
||
{ name: "卷帘对比", icon: new URL("@/assets/images/Mars3DIcon/jldb.png", import.meta.url).href },
|
||
{ name: "分屏对比", icon: new URL("@/assets/images/Mars3DIcon/fpdb.png", import.meta.url).href }
|
||
]
|
||
}
|
||
];
|
||
// 再次点击首页到中心点
|
||
const toCenter = () => {};
|
||
// 清除分屏对比
|
||
const clearScreenComparison = () => {
|
||
if (mapScreenSplit) {
|
||
map.removeControl(mapScreenSplit);
|
||
mapScreenSplit = null;
|
||
const mapOld = document.getElementById("mars3dContainer");
|
||
mapOld.style.width = "100%";
|
||
screenComparisonShow.value = false;
|
||
map.basemap = layersObj[baseMaps.value[0].id];
|
||
}
|
||
};
|
||
// 分屏对比
|
||
const screenComparison = () => {
|
||
if (mapScreenSplit) {
|
||
return;
|
||
}
|
||
// 加入的父元素
|
||
const mapParent = document.getElementById("map-content");
|
||
// 修改已有地图为50%
|
||
const mapOld = document.getElementById("mars3dContainer");
|
||
mapOld.style.width = "50%";
|
||
// 获取原来地图的参数
|
||
const mapOptions2 = map.getCurrentOptions(); // map.getOptions()
|
||
mapOptions2.control.baseLayerPicker = true; // basemaps底图切换按钮
|
||
mapOptions2.control.sceneModePicker = false;
|
||
// 用于双屏同图层，不同配置展示
|
||
for (let i = 0, len = mapOptions2.layers.length; i < len; i++) {
|
||
const item = mapOptions2.layers[i];
|
||
if (item.compare) {
|
||
for (const key in item.compare) {
|
||
item[key] = item.compare[key]; // 存在compare属性时
|
||
}
|
||
}
|
||
}
|
||
mapScreenSplit = new mars3d.control.MapCompare({
|
||
...mapOptions2,
|
||
parentContainer: mapParent,
|
||
insertBefore: mapOld
|
||
});
|
||
map.addControl(mapScreenSplit);
|
||
};
|
||
// 修改卷帘右侧图层
|
||
const changeRight = (e: any) => {
|
||
console.log(mapSplit);
|
||
mapSplit.rightLayer = [layersObj[e]];
|
||
leftRollerList.value = baseMaps.value.filter((item: any) => {
|
||
return item.id != rollerVal.value.rightRollerVal;
|
||
});
|
||
};
|
||
// 修改卷帘左侧图层
|
||
const changeLeft = (e: any) => {
|
||
mapSplit.leftLayer = [layersObj[e]];
|
||
rightRollerList.value = baseMaps.value.filter((item: any) => {
|
||
return item.id != rollerVal.value.leftRollerVal;
|
||
});
|
||
};
|
||
// 清除卷帘对比
|
||
const clearRollerComparison = () => {
|
||
if (mapSplit) {
|
||
map.removeControl(mapSplit);
|
||
mapSplit = null;
|
||
rollerComparisonShow.value = false;
|
||
map.basemap = layersObj[baseMaps.value[0].id];
|
||
}
|
||
};
|
||
// 卷帘对比
|
||
const rollerComparison = () => {
|
||
if (mapSplit) {
|
||
return;
|
||
}
|
||
map.basemap = null;
|
||
mapSplit = new mars3d.control.MapSplit({
|
||
rightLayer: [layersObj[rollerVal.value.rightRollerVal]],
|
||
leftLayer: [layersObj[rollerVal.value.leftRollerVal]]
|
||
});
|
||
map.addControl(mapSplit);
|
||
|
||
// mapSplit.on(mars3d.EventType.mouseMove, function (event: any) {
|
||
// console.log("拖动了mapSplit控件", event);
|
||
// });
|
||
};
|
||
// 显示地形
|
||
const terrainOperate = (e: any) => {
|
||
map.hasTerrain = chkHasTerrain.value;
|
||
};
|
||
// 改变底图
|
||
const changeBaseMaps = (id: string) => {
|
||
map.basemap = active.value = id;
|
||
};
|
||
const showWidget = (name: string) => {
|
||
if (name == "底图") {
|
||
basicMapShow.value = true;
|
||
layersShow.value = false;
|
||
toolListShow.value = false;
|
||
} else if (name == "图层") {
|
||
layersShow.value = true;
|
||
basicMapShow.value = false;
|
||
toolListShow.value = false;
|
||
} else if (name == "工具") {
|
||
toolListShow.value = !toolListShow.value;
|
||
basicMapShow.value = false;
|
||
layersShow.value = false;
|
||
}
|
||
console.log(666);
|
||
};
|
||
|
||
const clickMenu = (name: any) => {
|
||
console.log(name);
|
||
if (name == "图上量算") {
|
||
measurementShow.value = true;
|
||
} else if (name == "空间分析") {
|
||
analysisShow.value = true;
|
||
} else if (name == "坐标定位") {
|
||
pickingShow.value = true;
|
||
} else if (name == "地区导航") {
|
||
regionalNavigationShow.value = true;
|
||
} else if (name == "我的标记") {
|
||
myTagsShow.value = true;
|
||
} else if (name == "视角书签") {
|
||
viewBookmarkShow.value = true;
|
||
} else if (name == "地图打印") {
|
||
mapPrintShow.value = true;
|
||
} else if (name == "飞行漫游") {
|
||
flyRoamShow.value = true;
|
||
} else if (name == "图上标绘") {
|
||
mapMarkShow.value = true;
|
||
} else if (name == "路线导航") {
|
||
routeNavigationShow.value = true;
|
||
} else if (name == "卷帘对比") {
|
||
rollerComparisonShow.value = true;
|
||
// 卷帘对比
|
||
rollerComparison();
|
||
} else if (name == "分屏对比") {
|
||
screenComparisonShow.value = true;
|
||
// 分屏对比
|
||
screenComparison();
|
||
}
|
||
toolListShow.value = false;
|
||
};
|
||
// 获取Canvas对象
|
||
const getCanvas = (text: any) => {
|
||
return new Promise(resolve => {
|
||
const img = new Image(19, 25);
|
||
img.crossOrigin = "Anonymous";
|
||
img.src = "src/assets/images/Mars3DImg/poi/indexMark.png";
|
||
img.onload = () => {
|
||
const canvas = document.createElement("canvas");
|
||
canvas.width = 19;
|
||
canvas.height = 25;
|
||
const ctx = canvas.getContext("2d");
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
// 绘制图片
|
||
ctx.drawImage(img, 0, 0);
|
||
// 绘制文字
|
||
ctx.fillStyle = "#ffffff";
|
||
ctx.font = "22px 楷体";
|
||
ctx.textBaseline = "middle";
|
||
ctx.fillText(text, 4, 10);
|
||
// 将图片赋予给矢量对象进行显示，this.image是父类的属性
|
||
resolve(canvas.toDataURL("image/png"));
|
||
};
|
||
});
|
||
};
|
||
// 相机切换，定位点切换
|
||
const cameraChanged = () => {
|
||
queryPoi.getAddress({
|
||
location: map.getCenter(),
|
||
success: (result: any) => {
|
||
address = result;
|
||
}
|
||
});
|
||
};
|
||
// 将需要搜查的关键字记录进历史数据中
|
||
const addHistory = (data: any) => {
|
||
try {
|
||
const arrHistory = JSON.parse(localStorage.getItem(storageName)!) || [];
|
||
let isExist = false;
|
||
isExist = arrHistory.some((item: any) => item.id == data.id);
|
||
if (!isExist) {
|
||
arrHistory.unshift(data);
|
||
}
|
||
// if (!arrHistory.includes(data)) {
|
||
// arrHistory.unshift(data);
|
||
// }
|
||
localStorage.setItem(storageName, JSON.stringify(arrHistory.slice(0, 10)));
|
||
} catch (err: any) {
|
||
throw new Error(err);
|
||
}
|
||
};
|
||
// 开始查询并加载数据
|
||
const selectPoint = async (item: any) => {
|
||
inputVal.value = item.value;
|
||
addHistory(item);
|
||
searchListShow.value = false;
|
||
showPOIArr([item] || []);
|
||
};
|
||
const showPOIArr = (arr: any) => {
|
||
console.log(arr);
|
||
graphicLayer.closePopup();
|
||
graphicLayer.clear();
|
||
arr.forEach(async (item: any, index: number) => {
|
||
const jd = Number(item.lng);
|
||
const wd = Number(item.lat);
|
||
if (isNaN(jd) || isNaN(wd)) {
|
||
return;
|
||
}
|
||
|
||
item.lng = jd;
|
||
item.lat = wd;
|
||
|
||
// 添加图标实体
|
||
const graphic = new mars3d.graphic.BillboardEntity({
|
||
position: Cesium.Cartesian3.fromDegrees(jd, wd),
|
||
style: {
|
||
pixelSize: 10,
|
||
color: "#ffffff",
|
||
outline: true,
|
||
outlineColor: "#ffffff",
|
||
outlineWidth: 2,
|
||
scaleByDistance: new Cesium.NearFarScalar(1000, 1, 1000000, 0.1),
|
||
clampToGround: true, // 贴地
|
||
visibleDepth: false, // 是否被遮挡
|
||
label: {
|
||
text: item.name,
|
||
font_size: 20,
|
||
color: "#ffffff",
|
||
outline: true,
|
||
outlineWidth: 2,
|
||
outlineColor: Cesium.Color.BLACK,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
pixelOffsetY: -10, // 偏移量
|
||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000),
|
||
clampToGround: true, // 贴地
|
||
visibleDepth: false // 是否被遮挡
|
||
},
|
||
image: imgArr[index]
|
||
},
|
||
attr: item
|
||
});
|
||
graphicLayer.addGraphic(graphic);
|
||
|
||
item._graphic = graphic;
|
||
});
|
||
|
||
if (arr.length > 0) {
|
||
graphicLayer.flyTo({ radius: 5000, pitch: -90 });
|
||
}
|
||
};
|
||
// 输入框输入值时
|
||
const searchInput = async () => {
|
||
if (!inputVal.value) {
|
||
showHistoryList();
|
||
graphicLayer.closePopup();
|
||
graphicLayer.clear();
|
||
return;
|
||
}
|
||
if (inputVal.value) {
|
||
let result: any;
|
||
result = await queryPoi.queryText({
|
||
text: inputVal.value,
|
||
// city: address?.city,
|
||
page: 1,
|
||
count: 10
|
||
});
|
||
if (!result || !result.list || result.list.length <= 0) {
|
||
ElMessage("暂无数据");
|
||
return;
|
||
}
|
||
// const result = await queryPoi.autoTip({
|
||
// text: inputVal.value,
|
||
// city: address?.city,
|
||
// location: map.getCenter()
|
||
// });
|
||
const list = [] as any;
|
||
result.list.forEach((item: any) => {
|
||
if (list.every(l => l.value !== item.name)) {
|
||
list.push({
|
||
...item,
|
||
value: item.name
|
||
});
|
||
}
|
||
});
|
||
dataSource.value = list;
|
||
searchListShow.value = true;
|
||
}
|
||
};
|
||
// 输入框获取焦点时，先展示历史记录
|
||
const showHistoryList = () => {
|
||
if (inputVal.value) {
|
||
return;
|
||
}
|
||
const history = JSON.parse(localStorage.getItem(storageName)!);
|
||
if (history) {
|
||
// dataSource.value = (history || []).map((item: any) => ({ ...item, value: item }));
|
||
dataSource.value = history || [];
|
||
searchListShow.value = true;
|
||
}
|
||
if (timer) {
|
||
clearTimeout(timer);
|
||
}
|
||
};
|
||
// 输入框失去焦点时
|
||
const closeSearch = () => {
|
||
timer = setTimeout(function () {
|
||
searchListShow.value = false;
|
||
clearTimeout(timer);
|
||
timer = null;
|
||
}, 500); // 时间太短会导致点击获取失效
|
||
};
|
||
const initMars3d = (option: any) => {
|
||
map = new mars3d.Map("mars3dContainer", option);
|
||
// 创建查询api
|
||
queryPoi = new mars3d.query.GaodePOI({
|
||
key: ["ad31e514e7e740179d6d8f182720bcf5"]
|
||
// city: '深圳市',
|
||
});
|
||
map.on(mars3d.EventType.cameraChanged, cameraChanged);
|
||
// 创建覆盖物数据图层
|
||
graphicLayer = new mars3d.layer.GraphicLayer({
|
||
name: "POI查询",
|
||
pid: 99 // 图层父级ID，一般图层管理中使用
|
||
});
|
||
graphicLayer.bindPopup((event: any) => {
|
||
const attr = event.graphic.attr || {};
|
||
if (!attr) {
|
||
return;
|
||
}
|
||
const dom = initVue3Popup(QueryPopup, attr);
|
||
return dom;
|
||
});
|
||
map.addLayer(graphicLayer);
|
||
// 获取配置文件底图数据
|
||
getBasicMaps();
|
||
// 查询配置点坐标效果
|
||
getPointPosition();
|
||
// 查询配置线效果
|
||
getLineEffect();
|
||
// 飞到地图中心
|
||
map.flyHome();
|
||
};
|
||
// 取区域内的随机点
|
||
const randomPoint = (position: any) => {
|
||
const jd = random(position[0].lng * 1000, position[1].lng * 1000) / 1000;
|
||
const wd = random(position[0].lat * 1000, position[1].lat * 1000) / 1000;
|
||
return new mars3d.LngLatPoint(jd, wd, 100);
|
||
};
|
||
// 取随机数字
|
||
const random = (min: any, max: any) => {
|
||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||
};
|
||
// 查询配置线效果
|
||
const getLineEffect = async () => {
|
||
const resLineEffect: any = await polylineCombineList({});
|
||
console.log(resLineEffect, "线效果666666");
|
||
if (resLineEffect.result && resLineEffect.result.length > 0) {
|
||
resLineEffect.result.map((item: any) => {
|
||
if (item.show) {
|
||
const arrData: any = [];
|
||
if (item.type == "LineFlowColor") {
|
||
const linePositions = JSON.parse(item.positions);
|
||
for (let j = 0; j < 100; ++j) {
|
||
const startPt = randomPoint(linePositions);
|
||
|
||
const endPt = startPt.clone();
|
||
endPt.alt = random(linePositions[0].alt, linePositions[1].alt);
|
||
|
||
arrData.push({
|
||
positions: [startPt, endPt],
|
||
style: {
|
||
width: item.width,
|
||
materialType: mars3d.MaterialType.LineFlowColor,
|
||
materialOptions: {
|
||
color: item.color,
|
||
speed: item.speed,
|
||
startTime: random(1000, 3000),
|
||
percent: 0.1,
|
||
alpha: 0.01
|
||
}
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
mars3d.Util.fetchJson({ url: JSON.parse(item.jsonFile).url }).then(function (data) {
|
||
const busLines: any = [];
|
||
data.map((busLine: any, idx: any) => {
|
||
let prevPt: any;
|
||
const points = [];
|
||
for (let i = 0; i < busLine.length; i += 2) {
|
||
let pt = [busLine[i], busLine[i + 1]];
|
||
if (i > 0) {
|
||
pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]];
|
||
}
|
||
prevPt = pt;
|
||
|
||
const longitude = pt[0] / 1e4;
|
||
const latitude = pt[1] / 1e4;
|
||
const cart = Cesium.Cartesian3.fromDegrees(longitude, latitude, 100.0);
|
||
points.push(cart);
|
||
}
|
||
|
||
busLines.push({
|
||
positions: points,
|
||
color: item.color,
|
||
speed: 2 + 1.0 * Math.random(),
|
||
bgColor: item.bgColor
|
||
});
|
||
});
|
||
busLines.map((item2: any, index2: any) => {
|
||
arrData.push({
|
||
positions: item2.positions,
|
||
style: {
|
||
width: item2.width,
|
||
materialType: mars3d.MaterialType.ODLine,
|
||
materialOptions: {
|
||
color: item2.color,
|
||
speed: item2.speed,
|
||
bgColor: item2.bgColor,
|
||
startTime: Math.random()
|
||
}
|
||
},
|
||
attr: { index: index2 }
|
||
});
|
||
});
|
||
});
|
||
}
|
||
setTimeout(function () {
|
||
// 多个线对象的合并渲染。
|
||
const graphic = new mars3d.graphic.PolylineCombine({
|
||
id: item.id,
|
||
instances: arrData
|
||
});
|
||
console.log(graphic);
|
||
graphicLayer.addGraphic(graphic);
|
||
graphic.flyTo();
|
||
}, 100);
|
||
}
|
||
});
|
||
}
|
||
};
|
||
// 查询配置点坐标效果
|
||
const getPointPosition = async () => {
|
||
const resPointPosition: any = await diffuseWallList({});
|
||
console.log(resPointPosition, "点坐标效果666666");
|
||
if (resPointPosition.result && resPointPosition.result.length > 0) {
|
||
resPointPosition.result.map((item: any) => {
|
||
if (item.show) {
|
||
let _rotation = Math.random();
|
||
let loadJson = {
|
||
id: item.id,
|
||
position: new mars3d.LngLatPoint(item.lng, item.lat, item.alt),
|
||
style: {
|
||
radius: item.radius,
|
||
materialType: mars3d.MaterialType[item.type],
|
||
materialOptions: {
|
||
// 扫描材质
|
||
image: item.type == "CircleScan" ? item.image : "",
|
||
color: item.color,
|
||
speed: item.speed
|
||
},
|
||
// stRotation: new Cesium.CallbackProperty(function (e) {
|
||
// _rotation += 0.1;
|
||
// return _rotation;
|
||
// }, false),
|
||
// classificationType: Cesium.ClassificationType.BOTH,
|
||
clampToGround: true // 是否贴地
|
||
},
|
||
attr: { remark: "展示" }
|
||
};
|
||
|
||
if (item.type == "CircleScan") {
|
||
loadJson.style.stRotation = new Cesium.CallbackProperty(function (e) {
|
||
_rotation += 0.1;
|
||
return _rotation;
|
||
}, false);
|
||
loadJson.style.classificationType = Cesium.ClassificationType.BOTH;
|
||
}
|
||
const graphic = new mars3d.graphic.CircleEntity(loadJson);
|
||
graphicLayer.addGraphic(graphic);
|
||
}
|
||
});
|
||
}
|
||
};
|
||
// 获取config.json中的底图配置
|
||
const getBasicMaps = async () => {
|
||
const layers = {
|
||
baseMaps: map.getBasemaps(true),
|
||
hasTerrain: map.hasTerrain
|
||
};
|
||
console.log(layers.baseMaps);
|
||
baseMaps.value = layers.baseMaps.map((m: any) => {
|
||
if (m.isAdded && m.show) {
|
||
active.value = m.id;
|
||
}
|
||
return {
|
||
name: m.name,
|
||
id: m.id,
|
||
options: markRaw(m.options)
|
||
};
|
||
});
|
||
if (baseMaps.value.length > 1) {
|
||
rollerVal.value.leftRollerVal = baseMaps.value[0].id;
|
||
rollerVal.value.rightRollerVal = baseMaps.value[1].id;
|
||
leftRollerList.value = baseMaps.value.filter((item: any) => {
|
||
return item.id != rollerVal.value.rightRollerVal;
|
||
});
|
||
rightRollerList.value = baseMaps.value.filter((item: any) => {
|
||
return item.id != rollerVal.value.leftRollerVal;
|
||
});
|
||
} else if (baseMaps.value.length > 0) {
|
||
rollerVal.value.leftRollerVal = baseMaps.value[0].id;
|
||
}
|
||
chkHasTerrain.value = layers.hasTerrain || false;
|
||
};
|
||
const addRandomGraphicByCount = (graphicLayer: any, position: any) => {
|
||
const graphicImg = new mars3d.graphic.DivGraphic({
|
||
position: position,
|
||
style: {
|
||
html: ` <div class="mars3d-camera-content">
|
||
<img class="mars3d-camera-img" src="src/assets/images/icon/camera.svg" >
|
||
</div>
|
||
<div class="mars3d-camera-line" ></div>
|
||
<div class="mars3d-camera-point"></div>
|
||
`,
|
||
offsetX: -16,
|
||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000)
|
||
},
|
||
popup: `<video src='http://data.mars3d.cn/file/video/lukou.mp4' controls autoplay style="width: 300px;" ></video>`,
|
||
popupOptions: {
|
||
offsetY: -170, // 显示Popup的偏移值,是DivGraphic本身的像素高度值
|
||
template: `<div class="marsBlackPanel animation-spaceInDown">
|
||
<div class="marsBlackPanel-text">{content}</div>
|
||
<span class="mars3d-popup-close-button closeButton" >×</span>
|
||
</div>`,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
||
verticalOrigin: Cesium.VerticalOrigin.CENTER
|
||
}
|
||
});
|
||
graphicLayer.addGraphic(graphicImg);
|
||
};
|
||
// 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;
|
||
// }
|
||
// }
|
||
// };
|
||
const handleCheckChange = (e: any, isCheck: any, haveChildCheck: any) => {
|
||
const layer = layersObj[e.key];
|
||
const isChildern = e.children;
|
||
console.log("node", e);
|
||
console.log(layer);
|
||
console.log(isCheck);
|
||
console.log(haveChildCheck);
|
||
|
||
if (layer && !isChildern && isCheck) {
|
||
setTimeout(function () {
|
||
// 修改白膜的偏移位置
|
||
let findItem: any = albugineaList.value.find(item => item.id == e.key);
|
||
console.log(findItem);
|
||
let initCenter: any;
|
||
initCenter = {
|
||
lng: layer.orginCenterPoint.lng,
|
||
lat: layer.orginCenterPoint.lat,
|
||
alt: layer.orginCenterPoint.alt
|
||
};
|
||
layer.position = {
|
||
lng: initCenter.lng + +findItem.lng,
|
||
lat: initCenter.lat + +findItem.lat,
|
||
alt: initCenter.alt + +findItem.alt
|
||
};
|
||
console.log(layer.position);
|
||
}, 200);
|
||
layer.show = true;
|
||
layer.flyTo();
|
||
} else {
|
||
layer.show = false;
|
||
}
|
||
|
||
// 增添模型
|
||
if (isChildern && isChildern.length === 0 && !e.checked) {
|
||
map.addLayer(layer);
|
||
}
|
||
|
||
// 处理子节点
|
||
if (e.children && e.children.length) {
|
||
renderChildNode(isCheck, e.children, e.key);
|
||
}
|
||
|
||
// 删除模型
|
||
if (isChildern && isChildern.length === 0 && e.checked) {
|
||
layer.show = false;
|
||
}
|
||
};
|
||
const renderChildNode = (isCheck: any, children: any[], key: any) => {
|
||
children.forEach(child => {
|
||
const layer = layersObj[child.key];
|
||
if (layer) {
|
||
if (!layer.isAdded) {
|
||
map.addLayer(layer);
|
||
}
|
||
if (child.key == key) {
|
||
if (isCheck && key == child.key) {
|
||
layer.show = true;
|
||
} else {
|
||
layer.show = false;
|
||
}
|
||
if (child.children) {
|
||
renderChildNode(isCheck, child.children, child.key);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
};
|
||
// 初始化树结构
|
||
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);
|
||
}
|
||
}
|
||
};
|
||
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 boxChange = (e: any) => {
|
||
switch (e) {
|
||
case 1:
|
||
currSkyBox = qingtianSkybox;
|
||
break;
|
||
case 2:
|
||
currSkyBox = wanxiaSkybox;
|
||
break;
|
||
case 3:
|
||
currSkyBox = lantianSkybox;
|
||
break;
|
||
case 4:
|
||
currSkyBox = defaultSkybox;
|
||
break;
|
||
}
|
||
};
|
||
onUnmounted(() => {
|
||
map.removeLayer(graphicLayer);
|
||
map.off(mars3d.EventType.cameraChanged, cameraChanged);
|
||
queryPoi = null;
|
||
address = null;
|
||
map = null;
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@mixin flex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.map-content {
|
||
height: 100%;
|
||
width: 100%;
|
||
position: relative;
|
||
background-color: #ccc;
|
||
overflow: hidden;
|
||
.mars3d-container {
|
||
height: 100%;
|
||
width: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
border: none;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
right: 0px;
|
||
}
|
||
.input-search {
|
||
width: 260px;
|
||
position: absolute;
|
||
top: 92px;
|
||
left: 28px;
|
||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||
:deep() {
|
||
.el-input {
|
||
border: 1px solid #3b60a7;
|
||
}
|
||
.el-input__wrapper {
|
||
box-shadow: none;
|
||
border-radius: 0px;
|
||
|
||
background: rgba(28, 44, 84, 0.6);
|
||
}
|
||
.el-input__inner {
|
||
color: white;
|
||
}
|
||
.el-input__inner::placeholder {
|
||
color: white;
|
||
}
|
||
.el-input-group__append {
|
||
box-shadow: none;
|
||
border-radius: 0px;
|
||
border-left: 1px solid #3b60a7;
|
||
background-color: #29407c;
|
||
}
|
||
}
|
||
.search-list {
|
||
width: 100%;
|
||
height: max-content;
|
||
background-color: rgba(23, 49, 71, 0.8);
|
||
border: 1px solid rgba(0, 138, 255, 0.9);
|
||
position: absolute;
|
||
top: 32px;
|
||
left: 0;
|
||
&-item {
|
||
width: 100%;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-indent: 0.5em;
|
||
color: white;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
&-item:hover {
|
||
background-color: rgba(0, 138, 255, 0.5);
|
||
}
|
||
}
|
||
}
|
||
.menu-operate {
|
||
@include flex;
|
||
position: absolute;
|
||
top: 92px;
|
||
right: 28px;
|
||
padding: 0 !important;
|
||
background-image: none !important;
|
||
border: 1px solid #008aff70;
|
||
border-radius: 2px !important;
|
||
background: rgba(28, 44, 84, 0.6);
|
||
height: 40px;
|
||
// box-shadow: 0 4px 15px 1px #02213bb3;
|
||
z-index: 10;
|
||
&-item {
|
||
.toolbar-item {
|
||
@include flex;
|
||
padding: 6px 12px;
|
||
height: 100%;
|
||
font-size: 15px;
|
||
cursor: pointer;
|
||
.title {
|
||
color: white;
|
||
margin-left: 5px;
|
||
}
|
||
&:hover {
|
||
background-color: rgba(51, 89, 181, 0.6);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 菜单弹框出现动画
|
||
@keyframes fadeIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translate3d(100%, 0, 0);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
}
|
||
.tool-menu-operate {
|
||
@include flex;
|
||
position: absolute;
|
||
top: 138px;
|
||
right: 28px;
|
||
padding: 10px;
|
||
border: 1px solid #008aff70;
|
||
width: 110px;
|
||
background: rgba(11, 22, 51, 0.6);
|
||
border-radius: 0px;
|
||
opacity: 1;
|
||
border: 1px solid #3b60a7;
|
||
z-index: 10;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.tool-item:not(:last-child) {
|
||
margin-bottom: 12px;
|
||
}
|
||
.tool-item {
|
||
width: 90px;
|
||
height: 26px;
|
||
@include flex;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
img {
|
||
width: 14px;
|
||
width: 14px;
|
||
margin-right: 8px;
|
||
}
|
||
span {
|
||
font-size: 13px;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
margin-bottom: 2px;
|
||
}
|
||
}
|
||
.tool-item:hover {
|
||
background: rgba(51, 89, 181, 0.6);
|
||
}
|
||
}
|
||
.basic-map {
|
||
position: absolute;
|
||
top: 142px;
|
||
right: 28px;
|
||
padding: 0 !important;
|
||
background-image: none !important;
|
||
border: 1px solid #008aff70;
|
||
border-radius: 2px !important;
|
||
background-color: rgba(23, 49, 71, 0.8);
|
||
width: 380px;
|
||
height: 500px;
|
||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||
animation: fadeIn 1s;
|
||
z-index: 10;
|
||
.basic-title {
|
||
@include flex;
|
||
width: 100%;
|
||
height: 40px;
|
||
padding: 0 5px 0 10px;
|
||
background-color: #173147;
|
||
span {
|
||
font-size: 16px;
|
||
color: white;
|
||
margin-right: auto;
|
||
}
|
||
:deep() {
|
||
.el-icon {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.basemap {
|
||
width: 95%;
|
||
height: calc(100% - 80px);
|
||
margin: 0 auto;
|
||
overflow-y: scroll;
|
||
.basemap-card {
|
||
display: inline-block;
|
||
width: 75px;
|
||
margin-top: 10px;
|
||
margin-left: 10px;
|
||
vertical-align: top;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
color: white;
|
||
&:hover {
|
||
color: #337fe5 !important;
|
||
.icon {
|
||
border-color: #337fe5;
|
||
}
|
||
}
|
||
.icon {
|
||
border: 1px solid #4db3ff78;
|
||
width: 75px;
|
||
height: 70px;
|
||
padding: 1px;
|
||
}
|
||
}
|
||
.active-card {
|
||
color: #337fe5 !important;
|
||
.icon {
|
||
border-color: #337fe5;
|
||
}
|
||
}
|
||
}
|
||
.terrain-show {
|
||
@include flex;
|
||
width: 100%;
|
||
height: 40px;
|
||
span {
|
||
color: white;
|
||
margin: 0 5px 0 10px;
|
||
}
|
||
}
|
||
}
|
||
.layer-add {
|
||
position: absolute;
|
||
top: 142px;
|
||
right: 28px;
|
||
padding: 0 !important;
|
||
background-image: none !important;
|
||
border: 1px solid #008aff70;
|
||
border-radius: 2px !important;
|
||
background-color: rgba(23, 49, 71, 0.8);
|
||
width: 300px;
|
||
height: 500px;
|
||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||
animation: fadeIn 1s;
|
||
z-index: 10;
|
||
&-title {
|
||
@include flex;
|
||
width: 100%;
|
||
height: 40px;
|
||
padding: 0 5px 0 10px;
|
||
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
span {
|
||
font-size: 16px;
|
||
color: #0089fe;
|
||
margin-right: auto;
|
||
}
|
||
:deep() {
|
||
.el-icon {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
&-tree {
|
||
height: calc(100% - 40px);
|
||
overflow-y: scroll;
|
||
:deep() {
|
||
.el-tree {
|
||
background-color: transparent;
|
||
color: white;
|
||
}
|
||
.el-tree-node__content:hover {
|
||
background-color: rgba(0, 138, 255, 0.5);
|
||
}
|
||
.el-tree-node:focus > .el-tree-node__content {
|
||
background-color: rgba(0, 138, 255, 0.5);
|
||
}
|
||
.el-checkbox__inner {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.roller-add {
|
||
position: absolute;
|
||
top: 92px;
|
||
right: 288px;
|
||
padding: 10px;
|
||
background-image: none !important;
|
||
border: 1px solid #008aff70;
|
||
border-radius: 2px !important;
|
||
background-color: rgba(23, 49, 71, 0.8);
|
||
min-width: 400px;
|
||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||
&-content {
|
||
@include flex;
|
||
width: 100%;
|
||
height: 40px;
|
||
padding: 0 5px 0 10px;
|
||
span {
|
||
font-size: 14px;
|
||
color: white;
|
||
margin-right: 10px;
|
||
}
|
||
:deep() {
|
||
.el-select {
|
||
width: 150px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.screen-layer-add {
|
||
position: absolute;
|
||
top: 150px;
|
||
left: 28px;
|
||
padding: 0 !important;
|
||
background-image: none !important;
|
||
border: 1px solid #008aff70;
|
||
border-radius: 2px !important;
|
||
background-color: rgba(23, 49, 71, 0.8);
|
||
width: 300px;
|
||
height: 500px;
|
||
box-shadow: 0 4px 15px 1px #02213bb3;
|
||
animation: fadeIn 1s;
|
||
&-title {
|
||
@include flex;
|
||
width: 100%;
|
||
height: 40px;
|
||
padding: 0 5px 0 10px;
|
||
background-image: url("@/assets/images/Mars3DIcon/subClassTitle.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
span {
|
||
font-size: 16px;
|
||
color: #0089fe;
|
||
margin-right: auto;
|
||
}
|
||
:deep() {
|
||
.el-icon {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
&-tree {
|
||
height: calc(100% - 40px);
|
||
overflow-y: scroll;
|
||
:deep() {
|
||
.el-tree {
|
||
background-color: transparent;
|
||
color: white;
|
||
}
|
||
.el-tree-node__content:hover {
|
||
background-color: rgba(0, 138, 255, 0.5);
|
||
}
|
||
.el-tree-node:focus > .el-tree-node__content {
|
||
background-color: rgba(0, 138, 255, 0.5);
|
||
}
|
||
.el-checkbox__inner {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
.item-classify {
|
||
display: flex;
|
||
flex-direction: column;
|
||
&-item {
|
||
display: flex;
|
||
align-items: center;
|
||
:deep() {
|
||
.el-slider,
|
||
.el-date-editor {
|
||
width: 60% !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 视频监控点位样式
|
||
:deep() {
|
||
.mars3d-camera-content {
|
||
height: 30px;
|
||
}
|
||
.mars3d-camera-img {
|
||
width: 30px;
|
||
height: 30px;
|
||
animation: cameraMove 1s linear infinite alternate;
|
||
-webkit-animation: cameraMove 1s linear infinite alternate;
|
||
}
|
||
@keyframes cameraMove {
|
||
from {
|
||
margin-top: 20px;
|
||
}
|
||
to {
|
||
margin-top: 0px;
|
||
}
|
||
}
|
||
@-webkit-keyframes cameraMove {
|
||
from {
|
||
margin-top: 20px;
|
||
}
|
||
to {
|
||
margin-top: 0px;
|
||
}
|
||
}
|
||
.mars3d-camera-line {
|
||
height: 120px;
|
||
width: 5px;
|
||
margin-top: 20px;
|
||
border-left: 3px dashed #5b8fee;
|
||
margin-left: calc(50% - 1px);
|
||
}
|
||
.mars3d-camera-point {
|
||
border-radius: 50%;
|
||
width: 8px;
|
||
height: 8px;
|
||
margin-left: calc(50% - 3px);
|
||
background-color: #5b8fee;
|
||
}
|
||
.animation-spaceInDown {
|
||
animation-duration: 1s;
|
||
animation-fill-mode: both;
|
||
animation-name: spaceInDown;
|
||
}
|
||
@keyframes spaceInDown {
|
||
0% {
|
||
opacity: 0;
|
||
transform-origin: 0% 100%;
|
||
transform: scale(0.2) translate(0, 200%);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform-origin: 0% 100%;
|
||
transform: scale(1) translate(0, 0);
|
||
}
|
||
}
|
||
.marsBlackPanel {
|
||
min-width: 90px;
|
||
min-height: 35px;
|
||
position: absolute;
|
||
left: 16px;
|
||
bottom: 31px;
|
||
cursor: default;
|
||
border-radius: 4px;
|
||
opacity: 0.96;
|
||
border: 1px solid #14171c;
|
||
box-shadow: 0px 2px 21px 0px rgba(33, 34, 39, 0.55);
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
background: linear-gradient(0deg, #1e202a 0%, #0d1013 100%);
|
||
}
|
||
|
||
.marsBlackPanel::before {
|
||
content: "";
|
||
width: calc(100% + 22px);
|
||
height: 39px;
|
||
position: absolute;
|
||
bottom: -39px;
|
||
left: -22px;
|
||
background: url("src/assets/images/icon/popupLbl.png") 0px 0px no-repeat;
|
||
background-position: 0px 0px;
|
||
}
|
||
|
||
.marsBlackPanel-text {
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 33px;
|
||
text-align: center;
|
||
padding: 10px 5px 0 5px;
|
||
margin: 0;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
border: 1px solid #ffffff4f;
|
||
-webkit-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.marsBlackPanel-highlight {
|
||
border: 2px solid yellow;
|
||
}
|
||
.mars3d-popup-close-button {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
padding: 4px 4px 0 0;
|
||
text-align: center;
|
||
width: 20px;
|
||
height: 20px;
|
||
font: 16px/14px Tahoma, Verdana, sans-serif;
|
||
text-decoration: none;
|
||
font-weight: bold;
|
||
background: transparent;
|
||
z-index: 20170825;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
}
|
||
}
|
||
: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;
|
||
}
|
||
// 分屏属性
|
||
.mars3d-mapCompare {
|
||
left: 0px;
|
||
right: auto;
|
||
}
|
||
}
|
||
</style>
|