feat: 部分功能新增
This commit is contained in:
kun
parent
8982cb1d29
commit
22480ff8e8
305
src/views/goverment/largeScreen/components/mapMeasurement.vue
Normal file
305
src/views/goverment/largeScreen/components/mapMeasurement.vue
Normal file
@ -0,0 +1,305 @@
|
|||||||
|
<template>
|
||||||
|
<div class="main-content">
|
||||||
|
<div class="main-content-title">
|
||||||
|
<span>图上量算</span>
|
||||||
|
<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
|
||||||
|
</div>
|
||||||
|
<div class="main-content-menu">
|
||||||
|
<div v-for="(item, i) in menuList" :key="i" class="menu-item" @click="mapOperate(item.name)">
|
||||||
|
<div><img class="icon" src="@/assets/images/icon/fire.png" alt="" srcset="" /></div>
|
||||||
|
<div>{{ item.name }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="only-modal">
|
||||||
|
<el-checkbox v-model="formData.checkVal" @change="onlyPickModelPosition">仅测量模型(不拾取地形)</el-checkbox>
|
||||||
|
</div>
|
||||||
|
<div class="unit-select">
|
||||||
|
<span>单位</span>
|
||||||
|
<el-select v-model="formData.unitVal" placeholder="请选择">
|
||||||
|
<el-option v-for="item in unitList" :key="item.value" :label="item.name" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="distance-show" v-if="formData.distanceVal">
|
||||||
|
<span>{{ formData.distanceVal }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="empty-btn">
|
||||||
|
<el-button type="primary" @click="emptyMeasure">清空测量数据</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="echarts-content" v-if="echartShow">sss</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
//引入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 { ref, watch, onMounted } from "vue";
|
||||||
|
const props = defineProps(["show", "mapInstance"]);
|
||||||
|
const emits = defineEmits(["hiddenConfim"]);
|
||||||
|
const echartShow = ref<boolean>(false);
|
||||||
|
const unitList = ref([
|
||||||
|
{ name: "自动", value: "auto" },
|
||||||
|
{ name: "米", value: "m" },
|
||||||
|
{ name: "公里", value: "km" },
|
||||||
|
{ name: "海里", value: "mile" },
|
||||||
|
{ name: "丈", value: "zhang " }
|
||||||
|
]);
|
||||||
|
const formData = ref({
|
||||||
|
checkVal: false,
|
||||||
|
unitVal: null,
|
||||||
|
distanceVal: 0
|
||||||
|
});
|
||||||
|
const menuList = ref([
|
||||||
|
{ name: "空间距离" },
|
||||||
|
{ name: "贴地距离" },
|
||||||
|
{ name: "剖面" },
|
||||||
|
{ name: "水平面积" },
|
||||||
|
{ name: "贴地面积" },
|
||||||
|
{ name: "角度" },
|
||||||
|
{ name: "三角测量" },
|
||||||
|
{ name: "坐标测量" },
|
||||||
|
{ name: "高度差" }
|
||||||
|
]);
|
||||||
|
let map: any = props.mapInstance;
|
||||||
|
let measure: any;
|
||||||
|
// 清空测量数据
|
||||||
|
const emptyMeasure = () => {
|
||||||
|
measure.clear();
|
||||||
|
formData.value.distanceVal = 0;
|
||||||
|
};
|
||||||
|
const onlyPickModelPosition = () => {
|
||||||
|
// 控制鼠标只取模型上的点，忽略地形上的点的拾取
|
||||||
|
map.onlyPickModelPosition = formData.value.checkVal;
|
||||||
|
};
|
||||||
|
const closeDiv = () => {
|
||||||
|
emits("hiddenConfim");
|
||||||
|
};
|
||||||
|
const mapOperate = (name: any) => {
|
||||||
|
console.log(name);
|
||||||
|
if (name == "空间距离") {
|
||||||
|
measure.distance({
|
||||||
|
showAddText: true,
|
||||||
|
// label: {
|
||||||
|
// type: "div",
|
||||||
|
// updateText: function (text: any, graphic: any) {
|
||||||
|
// // 必须，用于动态更新text
|
||||||
|
// graphic.html = `<div class="marsGreenGradientPnl" style="color: #fff;">${text}</div>`;
|
||||||
|
// },
|
||||||
|
// // 下面是graphic对应类型本身的参数
|
||||||
|
// html: `<div class="marsGreenGradientPnl"></div>`,
|
||||||
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||||
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
||||||
|
// },
|
||||||
|
unit: formData.value.unitVal
|
||||||
|
// style: {
|
||||||
|
// color: '#ffff00',
|
||||||
|
// width: 3,
|
||||||
|
// clampToGround: false // 是否贴地
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
} else if (name == "贴地距离") {
|
||||||
|
measure.distanceSurface({
|
||||||
|
showAddText: true,
|
||||||
|
unit: formData.value.unitVal,
|
||||||
|
exact: false // 是否进行精确计算, 传false时是否快速概略计算方式，该方式计算精度较低，但计算速度快，仅能计算在当前视域内坐标的高度
|
||||||
|
});
|
||||||
|
} else if (name == "剖面") {
|
||||||
|
measure.section({
|
||||||
|
splitNum: 300, // 插值次数
|
||||||
|
unit: formData.value.unitVal,
|
||||||
|
exact: false
|
||||||
|
});
|
||||||
|
} else if (name == "水平面积") {
|
||||||
|
measure.area({
|
||||||
|
unit: formData.value.unitVal
|
||||||
|
// style: {
|
||||||
|
// color: '#00fff2',
|
||||||
|
// opacity: 0.4,
|
||||||
|
// outline: true,
|
||||||
|
// outlineColor: '#fafa5a',
|
||||||
|
// outlineWidth: 1,
|
||||||
|
// clampToGround: false //贴地
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
} else if (name == "贴地面积") {
|
||||||
|
measure.areaSurface({
|
||||||
|
unit: formData.value.unitVal,
|
||||||
|
style: {
|
||||||
|
color: "#ffff00"
|
||||||
|
},
|
||||||
|
splitNum: 10, // step插值分割的个数
|
||||||
|
exact: false // 是否进行精确计算， 传false时是否快速概略计算方式，该方式计算精度较低，但计算速度快，仅能计算在当前视域内坐标的高度
|
||||||
|
});
|
||||||
|
} else if (name == "角度") {
|
||||||
|
measure.angle();
|
||||||
|
} else if (name == "三角测量") {
|
||||||
|
measure.heightTriangle({
|
||||||
|
unit: formData.value.unitVal
|
||||||
|
});
|
||||||
|
} else if (name == "坐标测量") {
|
||||||
|
measure.point();
|
||||||
|
} else if (name == "高度差") {
|
||||||
|
measure.height({
|
||||||
|
unit: formData.value.unitVal
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
console.log(map, "66666");
|
||||||
|
measure = new mars3d.thing.Measure({
|
||||||
|
label: {
|
||||||
|
color: "#ffffff",
|
||||||
|
font_family: "楷体",
|
||||||
|
font_size: 20,
|
||||||
|
background: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
map.addThing(measure);
|
||||||
|
// 触发事件：开始分析前
|
||||||
|
measure.on(mars3d.EventType.start, function (e: any) {
|
||||||
|
console.log("开始分析", e);
|
||||||
|
});
|
||||||
|
// 触发事件：异步分析完成后
|
||||||
|
measure.on(mars3d.EventType.end, function (e: any) {
|
||||||
|
console.log(e);
|
||||||
|
formData.value.distanceVal = e.label;
|
||||||
|
// echartShow.value = true;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@mixin flex {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
// 菜单弹框出现动画
|
||||||
|
@keyframes fadeIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate3d(100%, 0, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.main-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 60px;
|
||||||
|
right: 10px;
|
||||||
|
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-color: #173147;
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
color: white;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
:deep() {
|
||||||
|
.el-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-menu {
|
||||||
|
width: 90%;
|
||||||
|
height: max-content;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow-y: scroll;
|
||||||
|
.menu-item {
|
||||||
|
display: inline-block;
|
||||||
|
width: 75px;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 12px;
|
||||||
|
color: white;
|
||||||
|
.icon {
|
||||||
|
width: 65px;
|
||||||
|
height: 60px;
|
||||||
|
padding: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.only-modal {
|
||||||
|
@include flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 5px;
|
||||||
|
:deep() {
|
||||||
|
.el-checkbox__inner {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.el-checkbox__label {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.unit-select {
|
||||||
|
@include flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
span {
|
||||||
|
color: white;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.distance-show {
|
||||||
|
@include flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
span {
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.empty-btn {
|
||||||
|
width: 92%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 20px;
|
||||||
|
:deep() {
|
||||||
|
.el-button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.echarts-content {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 10px;
|
||||||
|
right: 10px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
// 图上图形样式
|
||||||
|
:deep() {
|
||||||
|
.marsGreenGradientPnl {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -17,7 +17,7 @@
|
|||||||
<!-- 菜单操作 -->
|
<!-- 菜单操作 -->
|
||||||
<div class="menu-operate">
|
<div class="menu-operate">
|
||||||
<div class="menu-operate-item" v-for="(item, i) in data" :key="i">
|
<div class="menu-operate-item" v-for="(item, i) in data" :key="i">
|
||||||
<div v-if="item.widget && !item.children" class="toolbar-item" @click="showWidget(item.widget)">
|
<div v-if="item.widget && !item.children" class="toolbar-item" @click="showWidget(item.name)">
|
||||||
<el-icon size="18" color="#fff" v-if="i == 0"><PictureRounded /></el-icon>
|
<el-icon size="18" color="#fff" v-if="i == 0"><PictureRounded /></el-icon>
|
||||||
<el-icon size="18" color="#fff" v-else-if="i == 1"><DocumentCopy /></el-icon>
|
<el-icon size="18" color="#fff" v-else-if="i == 1"><DocumentCopy /></el-icon>
|
||||||
<span class="title">{{ item.name }}</span>
|
<span class="title">{{ item.name }}</span>
|
||||||
@ -30,29 +30,58 @@
|
|||||||
</div>
|
</div>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu class="dropdown">
|
<el-dropdown-menu class="dropdown">
|
||||||
<el-dropdown-item v-for="child in item.children" :key="child.widget" @click="clickMenu"
|
<el-dropdown-item v-for="child in item.children" :key="child.name" @click="clickMenu(child.name)"
|
||||||
><el-icon size="16" color="#fff"><PictureRounded /></el-icon> <span>{{ child.name }}</span></el-dropdown-item
|
><el-icon size="16"><PictureRounded /></el-icon> <span>{{ child.name }}</span></el-dropdown-item
|
||||||
>
|
>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
</div>
|
</div>
|
||||||
</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
|
||||||
|
@check-change="handleCheckChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 图上量算弹框 -->
|
||||||
|
<MapMeasurement :mapInstance="map" v-if="measurementShow" @hiddenConfim="measurementShow = false" />
|
||||||
</div>
|
</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">
|
<!-- <div class="option-list">
|
||||||
<span class="option-list-title">功能选择</span>
|
<span class="option-list-title">功能选择</span>
|
||||||
<el-scrollbar style="margin-top: 10px" :style="{ height: title ? `calc(100% - 95px)` : `calc(100% - 56px)` }">
|
<el-scrollbar style="margin-top: 10px" :style="{ height: title ? `calc(100% - 95px)` : `calc(100% - 56px)` }">
|
||||||
@ -159,7 +188,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, onMounted, onUnmounted, computed } from "vue";
|
import { ref, onMounted, onUnmounted, computed, markRaw } from "vue";
|
||||||
//引入cesium基础库
|
//引入cesium基础库
|
||||||
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
|
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
|
||||||
import * as Cesium from "mars3d-cesium";
|
import * as Cesium from "mars3d-cesium";
|
||||||
@ -172,6 +201,13 @@ import { ElMessage } from "element-plus";
|
|||||||
import { datas } from "@/enums/company/SetpsEnum";
|
import { datas } from "@/enums/company/SetpsEnum";
|
||||||
import { initVue3Popup } from "@/utils/file-util";
|
import { initVue3Popup } from "@/utils/file-util";
|
||||||
import QueryPopup from "./components/query-popup.vue";
|
import QueryPopup from "./components/query-popup.vue";
|
||||||
|
import MapMeasurement from "./components/mapMeasurement.vue";
|
||||||
|
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 storageName = "mars3d_queryGaodePOI";
|
||||||
const inputVal = ref();
|
const inputVal = ref();
|
||||||
const dataSource = ref<any>([]);
|
const dataSource = ref<any>([]);
|
||||||
@ -279,9 +315,9 @@ const data = [
|
|||||||
name: "工具",
|
name: "工具",
|
||||||
icon: "tool",
|
icon: "tool",
|
||||||
children: [
|
children: [
|
||||||
// { name: "图上量算", icon: "ruler", widget: "measure" },
|
{ name: "图上量算", icon: "ruler", widget: "measure" },
|
||||||
// { name: "空间分析", icon: "analysis", widget: "analysis" },
|
{ name: "空间分析", icon: "analysis", widget: "analysis" }
|
||||||
{ name: "坐标定位", icon: "local", widget: "location-point" }
|
// { name: "坐标定位", icon: "local", widget: "location-point" }
|
||||||
// { name: "地区导航", icon: "navigation", widget: "location-region" },
|
// { name: "地区导航", icon: "navigation", widget: "location-region" },
|
||||||
// { name: "我的标记", icon: "mark", widget: "addmarker" },
|
// { name: "我的标记", icon: "mark", widget: "addmarker" },
|
||||||
// { name: "视角书签", icon: "bookmark", widget: "bookmark" },
|
// { name: "视角书签", icon: "bookmark", widget: "bookmark" },
|
||||||
@ -295,12 +331,30 @@ const data = [
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
const showWidget = (widget: string) => {
|
// 显示地形
|
||||||
|
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;
|
||||||
|
} else if (name == "图层") {
|
||||||
|
basicMapShow.value = false;
|
||||||
|
layersShow.value = true;
|
||||||
|
}
|
||||||
console.log(666);
|
console.log(666);
|
||||||
};
|
};
|
||||||
|
|
||||||
const clickMenu = ({ key }: any) => {
|
const clickMenu = (name: any) => {
|
||||||
console.log(666);
|
console.log(name);
|
||||||
|
if (name == "图上量算") {
|
||||||
|
measurementShow.value = true;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
// 获取Canvas对象
|
// 获取Canvas对象
|
||||||
const getCanvas = (text: any) => {
|
const getCanvas = (text: any) => {
|
||||||
@ -504,6 +558,8 @@ const initMars3d = (option: any) => {
|
|||||||
return dom;
|
return dom;
|
||||||
});
|
});
|
||||||
map.addLayer(graphicLayer);
|
map.addLayer(graphicLayer);
|
||||||
|
// 获取配置文件底图数据
|
||||||
|
getBasicMaps();
|
||||||
// 添加数据
|
// 添加数据
|
||||||
// addRandomGraphicByCount(graphicLayer, [117.080397, 31.656139, 33.3]);
|
// addRandomGraphicByCount(graphicLayer, [117.080397, 31.656139, 33.3]);
|
||||||
// addRandomGraphicByCount(graphicLayer, [117.078006, 31.65649, 49.4]);
|
// addRandomGraphicByCount(graphicLayer, [117.078006, 31.65649, 49.4]);
|
||||||
@ -558,6 +614,25 @@ const initMars3d = (option: any) => {
|
|||||||
// map.addEffect(snowCover);
|
// map.addEffect(snowCover);
|
||||||
// map.addThing(shadows);
|
// map.addThing(shadows);
|
||||||
};
|
};
|
||||||
|
// 获取config.json中的底图配置
|
||||||
|
const getBasicMaps = () => {
|
||||||
|
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)
|
||||||
|
};
|
||||||
|
});
|
||||||
|
chkHasTerrain.value = layers.hasTerrain || false;
|
||||||
|
};
|
||||||
const addRandomGraphicByCount = (graphicLayer: any, position: any) => {
|
const addRandomGraphicByCount = (graphicLayer: any, position: any) => {
|
||||||
const graphicImg = new mars3d.graphic.DivGraphic({
|
const graphicImg = new mars3d.graphic.DivGraphic({
|
||||||
position: position,
|
position: position,
|
||||||
@ -738,11 +813,16 @@ onUnmounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@mixin flex {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
.map-content {
|
.map-content {
|
||||||
height: calc(100% - 72px);
|
height: calc(100% - 72px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: #ccc;
|
background-color: #ccc;
|
||||||
|
overflow: hidden;
|
||||||
.mars3d-container {
|
.mars3d-container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -798,8 +878,7 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.menu-operate {
|
.menu-operate {
|
||||||
display: flex;
|
@include flex;
|
||||||
align-items: center;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
@ -812,11 +891,11 @@ onUnmounted(() => {
|
|||||||
box-shadow: 0 4px 15px 1px #02213bb3;
|
box-shadow: 0 4px 15px 1px #02213bb3;
|
||||||
&-item {
|
&-item {
|
||||||
.toolbar-item {
|
.toolbar-item {
|
||||||
display: flex;
|
@include flex;
|
||||||
align-items: center;
|
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
cursor: pointer;
|
||||||
.title {
|
.title {
|
||||||
color: white;
|
color: white;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
@ -827,12 +906,143 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// 菜单弹框出现动画
|
||||||
|
@keyframes fadeIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate3d(100%, 0, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.basic-map {
|
||||||
|
position: absolute;
|
||||||
|
top: 60px;
|
||||||
|
right: 10px;
|
||||||
|
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;
|
||||||
|
.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: 60px;
|
||||||
|
right: 10px;
|
||||||
|
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-color: #173147;
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
color: white;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
:deep() {
|
||||||
|
.el-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-tree {
|
||||||
|
height: calc(100% - 40px);
|
||||||
|
overflow-y: scroll;
|
||||||
|
:deep() {
|
||||||
|
.el-tree {
|
||||||
|
background-color: rgba(23, 49, 71, 0.8);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// :deep() {
|
|
||||||
// .el-dropdown__popper.el-popper {
|
|
||||||
// border: 1px solid rgba(23, 49, 71, 0.8);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// .dropdown {
|
// .dropdown {
|
||||||
// background-color: rgba(23, 49, 71, 0.8) !important;
|
// background-color: rgba(23, 49, 71, 0.8) !important;
|
||||||
// // border: 1px solid rgba(23, 49, 71, 0.8) !important;
|
// // border: 1px solid rgba(23, 49, 71, 0.8) !important;
|
||||||
@ -845,19 +1055,6 @@ onUnmounted(() => {
|
|||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
.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 {
|
.option-list {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 350px;
|
height: 350px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user