348 lines
10 KiB
Vue
348 lines
10 KiB
Vue
<template>
|
|
<div :class="`layer-list-container ${openLayer? '': 'layer-list-container-close'}`" v-show="false">
|
|
<div class="title" >
|
|
图层资源
|
|
<div class="hidden-button" @click="openLayer = !openLayer">
|
|
<!-- <Icon v-if="openLayer" :icon="'ic:outline-unfold-less'" :size="18"/> -->
|
|
<img v-if="openLayer" src="/public/map/top.png" alt="">
|
|
<img v-else src="/public/map/bottom.png" alt="">
|
|
<!-- <Icon v-else :icon="'ic:outline-unfold-more'" :size="18"/> -->
|
|
</div>
|
|
</div>
|
|
<div class="layers-container">
|
|
<p class="cate-name" v-if="false">
|
|
历史影像
|
|
<div style="float:right;position:relative;top:-4px;">
|
|
<a-button style="flaot:right;" @click="drawPolygon" v-if="!drawState" size="small" type="primary">历史影像查询</a-button>
|
|
<a-button style="flaot:right;" @click="cancleDrawPolygon" v-else size="small" type="primary">取消查询</a-button>
|
|
</div>
|
|
</p>
|
|
|
|
<div class="case-list" v-if="false">
|
|
<div class="case-item" v-for="item in historyLayerList" :key="index" >
|
|
<img src="/statistical/prove-icon.png" alt="" />
|
|
<a-checkbox v-model:checked="item.checked" @change="layerChange(item,'historyLayer')" >
|
|
<span style="color:#fff;">{{item.tifName}}</span>
|
|
</a-checkbox>
|
|
</div>
|
|
<a-empty size="small" :description="'暂无历史影像数据'" v-if="historyLayerList.length <= 0" />
|
|
</div>
|
|
|
|
<p class="cate-name">数据图层</p>
|
|
<div class="case-list">
|
|
<div class="case-item" v-for="item in dataLayerList" :key="index" >
|
|
<img src="/statistical/prove-icon.png" alt="" />
|
|
<a-checkbox v-model:checked="item.checked" @change="layerChange(item,'dataLayer')" >
|
|
<span style="color:#fff;">{{item.name}}</span>
|
|
</a-checkbox>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="cate-name" v-if="false" >专题图层</p>
|
|
|
|
<div class="case-list" v-if="false" >
|
|
<div class="case-item" v-for="item in speciaLayerList" :key="index" >
|
|
<img src="/statistical/prove-icon.png" alt="" />
|
|
<a-checkbox v-model:checked="item.checked" @change="layerChange(item,'speciaLayer')" >
|
|
<span style="color:#fff;">{{item.name}}</span>
|
|
</a-checkbox>
|
|
</div>
|
|
<a-empty size="small" :description="'暂无专题图层数据'" v-if="speciaLayerList.length <= 0" />
|
|
</div>
|
|
|
|
<p class="cate-name">工作底图</p>
|
|
<div class="case-list">
|
|
<a-radio-group v-model:value="baseLayer" style="width:100%;">
|
|
<div class="case-item" v-for="item in baseLayerList" :key="index" >
|
|
<img src="/statistical/prove-icon.png" alt="" />
|
|
<a-radio :value="item.value" @change="layerChange(item,'baseLayer')">
|
|
<span style="color:#fff;">{{item.name}}</span>
|
|
</a-radio>
|
|
</div>
|
|
</a-radio-group>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import {
|
|
defineEmits,
|
|
ref,
|
|
defineExpose,
|
|
defineProps,
|
|
watch
|
|
} from 'vue'
|
|
|
|
import { getAppEnvConfig } from '@/utils/env';
|
|
const {VITE_GLOB_LAN_API_URL,VITE_GLOB_YAOGANYINGXIANG_SERVER} = getAppEnvConfig();
|
|
import axios from 'axios'
|
|
import {getIntersectTif } from '@/api/tiankongdi';
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
const { createConfirm, createMessage } = useMessage();
|
|
import Icon from '@/components/Icon/Icon.vue';
|
|
|
|
const props = defineProps(["layerInfo"])
|
|
const openLayer = ref(true)
|
|
|
|
|
|
const generateUUID = ()=>{
|
|
|
|
var d = new Date().getTime(); //Timestamp
|
|
var d2 = (performance && performance.now && (performance.now()*1000)) || 0;
|
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
|
var r = Math.random() * 16;
|
|
if(d > 0) {
|
|
r = (d + r)%16 | 0;
|
|
d = Math.floor(d/16);
|
|
} else {
|
|
r = (d2 + r)%16 | 0;
|
|
d2 = Math.floor(d2/16);
|
|
}
|
|
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
|
|
});
|
|
}
|
|
|
|
const dataLayerList = ref([
|
|
{
|
|
id:"Data",
|
|
name:"图斑数据",
|
|
checked:false,
|
|
}
|
|
// ,
|
|
// {
|
|
// id:"Monitor",
|
|
// name:"视频监控",
|
|
// checked:false,
|
|
// }
|
|
])
|
|
|
|
const historyLayerList = ref([
|
|
// {
|
|
// id:generateUUID(),
|
|
// name:"费县高清影像",
|
|
// url:"http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
|
|
// checked:false,
|
|
// }
|
|
])
|
|
const speciaLayerList = ref([
|
|
// {
|
|
// id:generateUUID(),
|
|
// name:"地类图层",
|
|
// url:"http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
|
|
// checked:false,
|
|
// },
|
|
])
|
|
|
|
|
|
speciaLayerList.value = props.layerInfo;
|
|
speciaLayerList.value?.forEach((item,index)=>{
|
|
speciaLayerList.value[index].id = generateUUID();
|
|
speciaLayerList.value[index].checked = false;
|
|
})
|
|
|
|
const baseLayer = ref("2")
|
|
|
|
const baseLayerList = ref([
|
|
{
|
|
id:2,
|
|
name:"影像地图",
|
|
checked:false,
|
|
value:"2"
|
|
},{
|
|
id:1,
|
|
name:"导航地图",
|
|
checked:false,
|
|
value:"1"
|
|
},{
|
|
id:3,
|
|
name:"白板地图",
|
|
checked:false,
|
|
value:"3",
|
|
},
|
|
])
|
|
|
|
|
|
const emits = defineEmits(['changeTifLayer',"drawPolygon","cancleDrawPolygon"])
|
|
|
|
const handlerQueryIntersectTif = (wkt:string)=>{
|
|
|
|
let query = {
|
|
TargetShape:wkt,
|
|
page:1,
|
|
limit:10,
|
|
key:null
|
|
}
|
|
|
|
axios.get(VITE_GLOB_LAN_API_URL+'/api/GeoTiffManager/GetIntersects', {
|
|
params: query
|
|
}).then(response=>{
|
|
let res = response.data.result;
|
|
if(res.items.length>0){
|
|
res.items?.forEach((item,index)=>{
|
|
res.items[index].checked = false;
|
|
res.items[index].id = generateUUID();
|
|
res.items[index].url = res.items[index].accessUrl;
|
|
})
|
|
historyLayerList.value = res.items;
|
|
}else{
|
|
createMessage.error("当前范围内暂无查询数据！");
|
|
}
|
|
})
|
|
|
|
// getIntersectTif(query).then(res=>{
|
|
// if(res.items.length>0){
|
|
// res.items?.forEach((item,index)=>{
|
|
// res.items[index].checked = false;
|
|
// res.items[index].id = generateUUID();
|
|
// res.items[index].url = res.items[index].accessUrl;
|
|
// })
|
|
// historyLayerList.value = res.items;
|
|
// }else{
|
|
// createMessage.error("当前范围内暂无查询数据！");
|
|
// }
|
|
// })
|
|
}
|
|
|
|
|
|
const layerChange = (item,type)=>{
|
|
item.type = type;
|
|
emits("changeTifLayer",item);
|
|
}
|
|
|
|
const drawState = ref(false);
|
|
|
|
const cancleDrawPolygon = ()=>{
|
|
drawState.value = false;
|
|
emits("cancleDrawPolygon")
|
|
}
|
|
const drawPolygon = (state)=>{
|
|
drawState.value = true;
|
|
emits("drawPolygon",state)
|
|
historyLayerList.value = [];
|
|
}
|
|
|
|
// 抛出函数
|
|
defineExpose({
|
|
handlerQueryIntersectTif
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
<style type="less" scoped>
|
|
.layer-list-container-close{
|
|
height: 41px !important;
|
|
}
|
|
.layer-list-container {
|
|
width: 285px;
|
|
height: 600px;
|
|
background: #041b36;
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
transition: 0.5s;
|
|
&::before {
|
|
content: '';
|
|
height: 26px;
|
|
width: 26px;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
background: url('/map/layer-center-left.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
&::after {
|
|
content: '';
|
|
height: 26px;
|
|
width: 26px;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
background: url('/map/layer-center-right.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.layers-container{
|
|
width:100%;
|
|
height: calc( 100% - 60px);
|
|
overflow-y:auto;
|
|
}
|
|
.title {
|
|
width: 100%;
|
|
height: 40px;
|
|
background-image: url('/videosupervision/title.png');
|
|
background-size: 100% 100%;
|
|
line-height: 40px;
|
|
text-indent: 18px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
position: relative;
|
|
}
|
|
.hidden-button{
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
z-index: 2;
|
|
}
|
|
.switch-button {
|
|
float: right;
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
.case-list {
|
|
padding: 10px 24px;
|
|
overflow: auto;
|
|
.case-item {
|
|
cursor:pointer;
|
|
border-bottom: 1px dashed #1d60b4;
|
|
color:#fff;
|
|
padding: 5px 0;
|
|
height:40px;
|
|
overflow:hidden;
|
|
img {
|
|
width: 15px;
|
|
margin-right:12px;
|
|
}
|
|
span {
|
|
color: #7ebbff;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .ant-empty-image{
|
|
height:50px;
|
|
position:relative;
|
|
}
|
|
::v-deep .ant-empty-description{
|
|
color:#fff;
|
|
}
|
|
|
|
.cate-name{
|
|
color:#fff;
|
|
padding:12px;
|
|
font-size:14px;
|
|
margin-bottom:0px;
|
|
background:rgba(0, 0, 0, 0.2)
|
|
}
|
|
|
|
::v-deeep .ant-empty-image img{
|
|
width:50px;
|
|
height:50px;
|
|
}
|
|
|
|
::v-deep .ant-checkbox-wrapper{
|
|
width: calc( 100% - 40px);
|
|
height: 20px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|
|
|