Ver Fonte

地图添加缩放操作,并和两侧图表联动

maxiaoxiao há 1 ano atrás
pai
commit
91129cd2b3

+ 16 - 0
src/components/Viewer/smViewer.scss

@@ -14,6 +14,22 @@
     top: 9%;
 
 }
+.cesiumbig{
+    width: 100% !important;
+    height: 100% !important;
+    position: absolute !important;
+    left: 0% !important;
+    top: 9% !important;
+}
+.cesiumbtn{
+    position: absolute ;
+    right:30px;
+    top: 30px;
+    color: #51E9FF;
+    font-size: 24px;
+    z-index: 98;
+    cursor: pointer;
+}
 
 .cesium-viewer-timelineContainer {
     position: absolute;

+ 9 - 1
src/components/Viewer/smViewer.vue

@@ -1,5 +1,7 @@
 <template>
-  <div id="cesiumContainer" class="cockpitNew" ref="viewer">
+  
+  <div id="cesiumContainer" class="cockpitNew" :class="isbig?'cesiumbig':''" ref="viewer">
+    <i class="cesiumbtn" :class="isbig?'el-icon-aim':'el-icon-rank'" :title="isbig?'缩小':'放大'" @click="viewerChange"></i> 
     <!-- 工具选择组件 -->
     <!-- <tool-bar></tool-bar>
     <compass></compass>
@@ -33,6 +35,7 @@ export default {
   data() {
     return {
       sharedState: store.state,
+      isbig: false,
     };
   },
   computed: {
@@ -176,6 +179,11 @@ export default {
       });
       store.setisInitViewer(true); //初始化viewer标志
     },
+    viewerChange(){
+      this.isbig = !this.isbig
+      this.$emit("viewerChange",this.isbig)
+    }
+
   },
   mounted() {
     this.init();

+ 7 - 2
src/views/map3d.vue

@@ -70,8 +70,10 @@
         ></i>
       </div>
     </div>
-    <div class="routerContainer"><router-view></router-view></div>
-    <sm-viewer> </sm-viewer>
+    <div class="routerContainer">
+      <router-view ref="routeViewRef"></router-view>
+    </div>
+    <sm-viewer @viewerChange="viewerChange"> </sm-viewer>
   </div>
 </template>
 
@@ -100,6 +102,9 @@ export default {
     this.updateTime();
   },
   methods: {
+    viewerChange(isbig){
+      this.$refs.routeViewRef[ isbig ? 'switchPack_down':'switchPack_up']()
+    },
     handleMenuSelect(item) {
       this.$router.push({ path: item });
     },