地图汇聚、地图大屏
parent
4d75e1ce78
commit
19b73a554f
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Exception />
|
||||
<Converge />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Exception from '@/views/sys/exception/Exception.vue';
|
||||
import Converge from '@/views/sys/exception/Converge.vue';
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div class="statistical" id="bg-pan">
|
||||
|
||||
<Map @onload="handlerOnMapLoad" @handlerGetDetails="handlerGetDetails" style="position: absolute; top: 0px; left: 0px;height: calc( 100vh - 80px);width:100%;z-index:0;" ref="MapboxComponent"></Map>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item" v-for="(item,index) in legends" :key="index">
|
||||
<div class="legend-dot" :style="{background:item.color}"></div>
|
||||
<div class="legend-label">{{item.label}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-modal
|
||||
style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
|
||||
wrap-class-name="full-modal"
|
||||
v-model:open="showInfoOpen"
|
||||
title="详情"
|
||||
:footer="null"
|
||||
:maskClosable="true"
|
||||
:destroyOnClose="true"
|
||||
@cancel="showInfoOpen = false"
|
||||
>
|
||||
<div class="modal-content">
|
||||
<ShowInfoModal v-if="showInfoOpen" :showInfoData="showInfoData" />
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||||
import Map from './Converge/index.vue';
|
||||
import layerButton from './mapComponent/left_layerButton.vue';
|
||||
import statisticalType from './mapComponent/left_statisticalType.vue';
|
||||
import county from './mapComponent/left_county.vue';
|
||||
import DataScreen from './dataScreen/index.vue'
|
||||
import Header from './mapComponent/top_title.vue'
|
||||
import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
|
||||
import { getLoadDroneCaseInfoDetail, getCaseInfoById } from '@/api/tiankongdi/index';
|
||||
// details
|
||||
const showInfoOpen = ref<Boolean>(false);
|
||||
const showInfoData = ref();
|
||||
|
||||
const getInfoList = (id) => {
|
||||
getCaseInfoById({id:id}).then(res => {
|
||||
if(res){
|
||||
showInfoData.value = res
|
||||
showInfoOpen.value = true;
|
||||
}else{
|
||||
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
const MapboxComponent = ref();
|
||||
const countyId = ref();
|
||||
|
||||
const legends = ref([
|
||||
{
|
||||
label:"违法",
|
||||
color:"rgb(253, 161, 161)",
|
||||
},{
|
||||
label:"合法",
|
||||
color:"rgb(255, 236, 185)",
|
||||
},{
|
||||
label:"其他",
|
||||
color:"rgb(199, 255, 188)",
|
||||
},{
|
||||
label:"补办手续",
|
||||
color:"rgb(171, 252, 255)",
|
||||
},{
|
||||
label:"拆除复耕",
|
||||
color:"rgb(194, 179, 251)",
|
||||
},
|
||||
])
|
||||
|
||||
function handlerOnMapLoad(){
|
||||
|
||||
}
|
||||
|
||||
function handlerGetDetails(e){
|
||||
getInfoList(e.Id);
|
||||
}
|
||||
|
||||
// 选择区县
|
||||
const currentCounty = ref({ name: '', code: '' });
|
||||
function countyClick(data) {
|
||||
countyId.value = data.id;
|
||||
currentCounty.value = { name: data['name'], code: data['id'] };
|
||||
MapboxComponent.value.handlerChangeCounty(currentCounty.value);
|
||||
}
|
||||
|
||||
// 图例点击
|
||||
function handlerChangePolygonType(data) {
|
||||
MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], data);
|
||||
}
|
||||
|
||||
|
||||
// 切换图斑类型
|
||||
function changeLandType(type):void{
|
||||
MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], "",type);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.statistical {
|
||||
// position: relative;
|
||||
// 页面不能被选中
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#bg-pan{
|
||||
|
||||
}
|
||||
#alertOverlay::before,#alertOverlay::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#alertOverlay div::before,#alertOverlay div::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#alertOverlay::before {
|
||||
background: linear-gradient(to right, rgba(0, 0, 0,0.8), transparent);
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
#alertOverlay::after {
|
||||
background: linear-gradient(to left, rgba(0, 0, 0,0.8), transparent);
|
||||
top: 0%;
|
||||
left: 100%;
|
||||
transform: rotate(0deg) translate(calc(-1 * 50px), 0px);
|
||||
}
|
||||
|
||||
#alertOverlay div::before {
|
||||
background: linear-gradient(to top, rgba(0, 0, 0,0.8), transparent);
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
#alertOverlay div::after {
|
||||
background: linear-gradient(to top, rgba(0, 0, 0,0.8), transparent);
|
||||
top: 100%;
|
||||
left: 0;
|
||||
transform: rotate(0deg) translate(0px, calc(-1 * 50px));
|
||||
}
|
||||
|
||||
#alertOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.alert-active{
|
||||
animation: blink 0s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.legend{
|
||||
width:120px;
|
||||
padding:10px;
|
||||
position:absolute;
|
||||
bottom:20px;
|
||||
right:20px;
|
||||
background:#fff;
|
||||
border-radius: 8px;
|
||||
.legend-item{
|
||||
padding:5px 0px;
|
||||
font-size:14px;
|
||||
color:#666666;
|
||||
display:flex;
|
||||
.legend-dot{
|
||||
width:14px;
|
||||
height:14px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.legend-label{
|
||||
margin-left:12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@ -0,0 +1,63 @@
|
||||
export const MAPBOX_TOKEN = "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
|
||||
|
||||
export const TINADITU_TOKEN = "b6585bc41ee16251dbe6b1af64f375d9";
|
||||
|
||||
export const MAP_VIEWER = {
|
||||
"兰山区":{
|
||||
center:{lng: 118.35182370979693, lat: 35.183090621691385},
|
||||
zoom:10.048587811931847
|
||||
},
|
||||
"河东区":{
|
||||
center:{lng: 118.59697279346507, lat: 35.18490235060048},
|
||||
zoom:10,
|
||||
},
|
||||
"罗庄区":{
|
||||
center:{lng: 118.32214269732968, lat: 34.88793861991461},
|
||||
zoom:10.348587811931848,
|
||||
},
|
||||
"高新区":{
|
||||
center:{lng: 118.22321338283429, lat: 35.02848900013085},
|
||||
zoom:11.197175623863698,
|
||||
},
|
||||
"沂河新区":{
|
||||
center:{lng: 118.56406202558459, lat: 35.02402208121399},
|
||||
zoom:9.848587811931848,
|
||||
},
|
||||
"费县":{
|
||||
center:{lng: 118.07423584053117, lat: 35.25200708547465},
|
||||
zoom:9.700000000000005,
|
||||
},
|
||||
"平邑县":{
|
||||
center:{lng: 117.7943998613617, lat: 35.397797381650626},
|
||||
zoom:9.5,
|
||||
},
|
||||
"蒙阴县":{
|
||||
center:{lng: 118.16071230795704, lat: 35.706258658571166},
|
||||
zoom:9.500000000000002,
|
||||
},
|
||||
"沂水县":{
|
||||
center:{lng: 118.7262955596875, lat: 35.875369642007094},
|
||||
zoom:9.500000000000002,
|
||||
},
|
||||
"沂南县":{
|
||||
center:{lng: 118.45908849919756, lat: 35.49273684421736},
|
||||
zoom:9.748587811931854,
|
||||
},
|
||||
"兰陵县":{
|
||||
center:{lng: 118.10841982910361, lat: 34.81986176408728},
|
||||
zoom:9.597175623863698,
|
||||
},
|
||||
"郯城县":{
|
||||
center:{lng: 118.32120708234048, lat: 34.635986538650336},
|
||||
zoom:9.7,
|
||||
},
|
||||
"临沭县":{
|
||||
center:{lng: 118.74187031029359, lat: 34.850952753798644},
|
||||
zoom:9.848587811931848,
|
||||
},
|
||||
"莒南县":{
|
||||
center:{lng: 118.96807389575793, lat: 35.186365164136504},
|
||||
zoom:9.848587811931848,
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue