<template>
|
<div class="baseMapSwitching">
|
<div class="baseMapSwitchingTitle">
|
<div class="tileLeft">
|
<div class="titleImg">
|
<ArrowLeft />
|
</div>
|
<div class="titleLable">投影图层管理</div>
|
</div>
|
</div>
|
<div class="baseMapSwitching_content">
|
<div class="baseMapSwitching_list">
|
<div
|
class="baseMapSwitching_list_tr"
|
v-for="(item, i) in list"
|
:key="i"
|
@click="setProjectionLayerChange(item)"
|
>
|
<div class="baseMapSwitching_list_tr_name">
|
<span :class="{ baseMapActive: activceIndex == item.id }">{{
|
item.cnName
|
}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
import { perms_selectProjectLayers } from "@/api/api";
|
import server from "@/assets/js/Map/server";
|
import store from "@/store";
|
import projection from "@/assets/js/Map/projectionServer";
|
|
import olMap from "@/assets/js/Map/olMap";
|
let list = ref([]);
|
const activceIndex = ref();
|
const setProjectionLayerChange = (res) => {
|
let projection = {
|
code: "",
|
extent: [],
|
};
|
if (res.cnName == "等距离圆柱投影（<75度）") {
|
projection.code = "ESRI:103881";
|
projection.extent = [-180, -75, 180, 75];
|
} else if (res.cnName == "月球近地投影") {
|
projection.code = "ESRI:103880";
|
projection.extent = [-90, -90, 90, 90];
|
} else if (res.cnName == "月球北极投影") {
|
projection.code = "ESRI:103877";
|
projection.extent = [-180, 60, 180, 90];
|
} else if (res.cnName == "月球南极投影") {
|
projection.code = "ESRI:103878";
|
projection.extent = [-180, -90, 180, -60];
|
} else if (res.cnName == "月球远地投影") {
|
projection.code = "ESRI:103879";
|
projection.extent = [-90, -90, 90, 90];
|
}
|
// olMap.initMap();
|
olMap.addTreeData(res, projection);
|
activceIndex.value = res.id;
|
// store.state.restLayer = true;
|
};
|
const getProjectionLayer = async () => {
|
const data = await perms_selectProjectLayers();
|
if (data.code != 200) return;
|
var result = data.result.filter((res) => {
|
if (res.isLayer == 1) {
|
return res;
|
}
|
});
|
list.value = result.reverse();
|
setProjectionLayerChange(list.value[0]);
|
// if (!activceIndex.value) {
|
// setProjectionLayerChange(list.value[0]);
|
// }
|
};
|
getProjectionLayer();
|
</script>
|
|
<style lang="less" scoped>
|
.baseMapSwitching {
|
width: 359px;
|
height: 680px;
|
background: rgba(7, 8, 14, 0.8);
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
z-index: 101;
|
position: relative;
|
.baseMapSwitchingTitle {
|
width: calc(100% - 27px);
|
height: 42px;
|
background: #0e151f;
|
box-shadow: 0px 0px 6px 0px #080c13,
|
0px 14px 16px 0px rgba(38, 47, 71, 0.68);
|
display: flex;
|
justify-content: space-between;
|
padding-left: 7px;
|
padding-right: 20px;
|
color: white;
|
.tileLeft {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
|
.titleLable {
|
font-size: 18px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
}
|
.titleImg {
|
width: 20px;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
color: rgba(104, 156, 255, 1);
|
}
|
}
|
.baseMapSwitching_content {
|
margin-top: 3px;
|
|
.baseMapSwitching_content_title {
|
font-size: 20px;
|
font-weight: 300;
|
color: #ffffff;
|
}
|
|
.baseMapSwitching_list_tr {
|
cursor: pointer;
|
height: 42px;
|
margin-top: 10px;
|
background: #0d131d;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 0 25px;
|
.baseMapSwitching_list_tr_name {
|
// display: flex;
|
// align-items: center;
|
// justify-content: space-between;
|
|
span {
|
font-size: 16px;
|
font-weight: 300;
|
color: #ffffff;
|
margin-left: 10px;
|
}
|
}
|
.baseMapActive {
|
color: #73a1fa !important;
|
}
|
}
|
}
|
}
|
</style>
|
