图层切换

src/views/datacenter.vue

@@ -52,7 +52,7 @@
 
 				</div>
 			</div>
-			<vBottomMenu></vBottomMenu>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
 			<el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
 				<div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img
 						src="@/assets/images/mascot.png" />
@@ -84,7 +84,11 @@
       eventLocation
 		},
 		created() {
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
       window.showDialog=this.showDialog
+      window.closeChild=this.closeChild
+      window.choseLayerSwitching=this.choseLayerSwitching
+      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
 		},
 		mounted() {
 			this.getResource()
@@ -115,18 +119,32 @@
 		},
 
 		methods: {
-      //弹出事件定位页面
-      showDialog(click){
-        if(click=="eventLocation"){
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+      showDialog(click) {
+        if (click == "eventLocation") {
           this.$refs.eventLocation.showEventLocation()
-        }else if(click=="editableLayers"){
-          if(!this.$refs.supermap.isEditableLayers){
-            this.$refs.supermap.isEditableLayers=true
-          }else{
-            this.$refs.supermap.isEditableLayers=false
+          this.$refs.bottomMenu.showChild = false
+        } else if (click == "editableLayers") {
+          if (!this.$refs.supermap.isEditableLayers) {
+            this.$refs.supermap.isEditableLayers = true,
+              this.$refs.bottomMenu.showChild = false
+          } else {
+            this.$refs.supermap.isEditableLayers = false,
+              this.$refs.bottomMenu.showChild = false
           }
+        } else if (click == "layerSwitching") {
+          this.$refs.bottomMenu.showChild = true
         }
       },
+      //点击关闭选择图层
+      closeChild() {
+        this.$refs.bottomMenu.showChild = false
+      },
+      //选择图层
+      choseLayerSwitching(url) {
+        this.$refs.supermap.layerSwitching(url, true);
+      },
+      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
 			//数据分布chart
 			dataChat() {
 				// 基于准备好的dom，初始化echarts实例

src/views/event.vue

@@ -84,7 +84,7 @@
           </div>
         </div>
       </div>
-      <vBottomMenu></vBottomMenu>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
       <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
         <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img
           src="@/assets/images/mascot.png"/></div>
@@ -426,7 +426,11 @@
       this.ws = DHWsInstance;
       console.log(this.ws);
       /** ----------------------------------摄像头预览结束------------------------------------- */
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
       window.showDialog=this.showDialog
+      window.closeChild=this.closeChild
+      window.choseLayerSwitching=this.choseLayerSwitching
+      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
     },
     mounted() {
       this.getTodayEvent()
@@ -567,18 +571,32 @@
     },
 
     methods: {
-      //弹出事件定位页面
-      showDialog(click){
-        if(click=="eventLocation"){
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+      showDialog(click) {
+        if (click == "eventLocation") {
           this.$refs.eventLocation.showEventLocation()
-        }else if(click=="editableLayers"){
-          if(!this.$refs.supermap.isEditableLayers){
-            this.$refs.supermap.isEditableLayers=true
-          }else{
-            this.$refs.supermap.isEditableLayers=false
+          this.$refs.bottomMenu.showChild = false
+        } else if (click == "editableLayers") {
+          if (!this.$refs.supermap.isEditableLayers) {
+            this.$refs.supermap.isEditableLayers = true,
+              this.$refs.bottomMenu.showChild = false
+          } else {
+            this.$refs.supermap.isEditableLayers = false,
+              this.$refs.bottomMenu.showChild = false
           }
+        } else if (click == "layerSwitching") {
+          this.$refs.bottomMenu.showChild = true
         }
       },
+      //点击关闭选择图层
+      closeChild() {
+        this.$refs.bottomMenu.showChild = false
+      },
+      //选择图层
+      choseLayerSwitching(url) {
+        this.$refs.supermap.layerSwitching(url, true);
+      },
+      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
       //事件chart
       eventChart() {
         // 基于准备好的dom，初始化echarts实例

src/views/monitor.vue

@@ -85,7 +85,7 @@
           </div>
         </div>
       </div>
-      <vBottomMenu></vBottomMenu>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
       <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
         <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img
           src="@/assets/images/mascot.png"/></div>
@@ -125,7 +125,12 @@
       this.ws = DHWsInstance;
       console.log(this.ws);
       /** ----------------------------------摄像头预览结束------------------------------------- */
+
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
       window.showDialog=this.showDialog
+      window.closeChild=this.closeChild
+      window.choseLayerSwitching=this.choseLayerSwitching
+      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
     },
     mounted() {
       this.selectDeviceType()
@@ -156,18 +161,32 @@
       }
     },
     methods: {
-      //弹出事件定位页面
-      showDialog(click){
-        if(click=="eventLocation"){
+      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+      showDialog(click) {
+        if (click == "eventLocation") {
           this.$refs.eventLocation.showEventLocation()
-        }else if(click=="editableLayers"){
-          if(!this.$refs.supermap.isEditableLayers){
-            this.$refs.supermap.isEditableLayers=true
-          }else{
-            this.$refs.supermap.isEditableLayers=false
+          this.$refs.bottomMenu.showChild = false
+        } else if (click == "editableLayers") {
+          if (!this.$refs.supermap.isEditableLayers) {
+            this.$refs.supermap.isEditableLayers = true,
+              this.$refs.bottomMenu.showChild = false
+          } else {
+            this.$refs.supermap.isEditableLayers = false,
+              this.$refs.bottomMenu.showChild = false
           }
+        } else if (click == "layerSwitching") {
+          this.$refs.bottomMenu.showChild = true
         }
       },
+      //点击关闭选择图层
+      closeChild() {
+        this.$refs.bottomMenu.showChild = false
+      },
+      //选择图层
+      choseLayerSwitching(url) {
+        this.$refs.supermap.layerSwitching(url, true);
+      },
+      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
       cameraChat(){
         // 基于准备好的dom，初始化echarts实例
         let myChart = echarts.init(document.getElementById('camera-chart'))