<template> <!-- 海绵综合一张图 城市概况 --> <div class="cityPage"> <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']"> <PhysicalGeography></PhysicalGeography> </div> <!-- 头部 --> <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']"> <headHMAimg></headHMAimg> </div> <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']"> <!-- 城市规划 --> <cityplanning></cityplanning> <!-- 现状问题 --> <CurrentIssues></CurrentIssues> </div> </div> </template> <script setup> import cityplanning from '@/views/sponeScreen/cityGK/cityplanning.vue'; //城市规划页面 import CurrentIssues from '@/views/sponeScreen/cityGK/CurrentIssues.vue'; //现状问题 import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部 import PhysicalGeography from '@/views/sponeScreen/cityGK/PhysicalGeography.vue'; //头部 import bus from '@/bus/index'; import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js'; import { onBeforeUnmount } from 'vue'; const { proxy } = getCurrentInstance(); const showPanel = ref(true); //面板展开收起 // 面板内容展开收起控制 const props = defineProps({ showPanel: { type: Boolean, }, }); watch( () => props.showPanel, () => { console.log('val---', props.showPanel); showPanel.value = props.showPanel; }, { immediate: true } ); onMounted(() => { // newfiberMap.setView({ // lng: 114.312, // lat: 34.502, // heading: 2.281299097855777, // zoom: 16358.12942752382, // pitch: -25.2508969308367, // roll: 0.005453465256790101, // }); }); onBeforeUnmount(() => { if (!newfiberMapbox) return; newfiberMapBoxVectorLayer.removeByIds([ 'oneCenter', 'oneCenter_label', 'oneCenter1', 'oneCenter1_label', 'oneCenter2', 'oneCenter2_label', ]); bus.emit('setIniteLayer', [ { layername: 'buildingModel', show: true, }, { layername: 'topography', show: true, }, { layername: 'builtCity', show: true, }, { layername: 'centerCity', show: true, }, { layername: 'buildingModel', show: true, }, ]); let dileiLayer = newfiberMap.getMap().imageryLayers._layers.filter(layer => layer.imageryProvider.layers == 'demo:hn_kf_hm_dilei'); if (!dileiLayer.length) return; dileiLayer[0].show = false; }); </script> <style lang="scss" scoped></style>