地图汇聚、地图大屏
parent
4d75e1ce78
commit
19b73a554f
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<Exception />
|
<Converge />
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import Exception from '@/views/sys/exception/Exception.vue';
|
import Converge from '@/views/sys/exception/Converge.vue';
|
||||||
</script>
|
</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