增加图例

components/Map.vue

@@ -28,6 +28,9 @@ export default {
         this.initMap()
       }
     })
+    this.$evBus.$on('setVisibility', (layerType, show) => {
+      this.setVisibility(layerType, show)
+    })
   },
   methods: {
     //创建三维地球场景
@@ -40,8 +43,8 @@ export default {
 
         this.addDataByLayerType('cems', [
           {
-            longitude: 116.335987,
+            longitude: 114.116195,
-            latitude: 30.526361
+            latitude: 36.555232
           }
         ])
         window.test = this

config/mapFilters.js

@@ -0,0 +1,66 @@
+export default [
+  {
+    label: '监控点',
+    icon: '',
+    selectedIcon: '',
+    count: 0,
+    selected: true,
+    id: 'jkd'
+  },
+  {
+    label: '微站',
+    icon: '',
+    selectedIcon: '',
+    count: 0,
+    selected: true,
+    id: 'wz'
+  },
+  {
+    label: '深度检测仪',
+    icon: '',
+    selectedIcon: '',
+    count: 0,
+    selected: true,
+    id: 'sdjcy'
+  },
+  {
+    label: '质控站',
+    icon: '',
+    selectedIcon: '',
+    count: 0,
+    selected: true,
+    id: 'zkz'
+  },
+  {
+    label: '国标站',
+    icon: '',
+    selectedIcon: '',
+    count: 0,
+    selected: true,
+    id: 'gbz'
+  },
+  {
+    label: '洒水车',
+    icon: '',
+    selectedIcon: '',
+    count: 0,
+    selected: true,
+    id: 'ssc'
+  },
+  {
+    label: '湿扫车',
+    icon: '',
+    selectedIcon: '',
+    count: 0,
+    selected: true,
+    id: 'shisc'
+  },
+  {
+    label: 'CEMS',
+    icon: '',
+    selectedIcon: '',
+    count: 0,
+    selected: true,
+    id: 'cems'
+  }
+]

nuxt.config.js

@@ -45,6 +45,7 @@ export default {
     '@/plugins/antd-ui',
     '@/plugins/echarts',
     '@/plugins/axios',
+    '@/plugins/setup',
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components

pages/visual/PeakCoalView.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="peak-coal-content">
     <div class="container">
-      <div class="header-content point">
+      <div class="header-content">
-
+        <p>峰煤焦化超低排放"管控治"</p>
+        <p class="suntitle">一体化平台</p>
       </div>
 
-      <div class="body-content point">
+      <div class="body-content">
         <!--      左侧内容-->
-        <div class="left-content point">
+        <div class="left-content">
           <div class="left-data-panel">
             <a-row :gutter="24">
               <a-col :span="12">
@@ -32,7 +33,7 @@
           <img class="center-bg" :src="centerBg" />
         </div>
         <!--      右侧内容-->
-        <div class="right-content point">
+        <div class="right-content">
           <div class="right-data-panel">
             <a-row :gutter="24">
               <a-col :span="12">
@@ -55,13 +56,25 @@
         </div>
       </div>
 
-      <div class="footer-content point">
+      <div class="footer-content">
-
+        <div class="video-btn footer-btn">重点监控</div>
+        <div class="map-filter footer-btn" @click="showFilter = !showFilter">
+          图例
+        </div>
+        <div class="filters" v-show="showFilter">
+          <div class="search"></div>
+          <div class="filter-box">
+            <div @click="selectItem(item)" class="filter-item" v-for="item in mapFilters" :key="item.id" :class="{ selected: item.selected }">
+              <span>{{ item.label }}</span>
+              <span>{{ item.count }}</span>
+            </div>
+          </div>
+        </div>
       </div>
 
-      <div class="left-icon point"></div>
+      <div class="left-icon" />
 
-      <div class="right-icon point"></div>
+      <div class="right-icon" />
     </div>
 
 <!--    <Map />-->
@@ -70,6 +83,7 @@
 </template>
 
 <script>
+import mapFilters from "@/config/mapFilters";
 const centerBg = require('@/assets/peakCoalImages/center/center-content-bg.png')
 export default {
   name: "PeakCoalView",
@@ -77,7 +91,9 @@ export default {
   data() {
     return {
       autoStyle: {},
-      centerBg
+      centerBg,
+      showFilter: false,
+      mapFilters
     }
   },
   mounted() {
@@ -120,6 +136,10 @@ export default {
       }
       return {scale, origin}
     },
+    selectItem (item) {
+      item.selected = !item.selected
+      this.$evBus.$emit('setVisibility',  item.id, item.selected)
+    }
   }
 }
 </script>
@@ -164,8 +184,6 @@ body, html, #__nuxt, #__layout {
     bottom: 0;
     right: 0;
     z-index: 2;
-    pointer-events: none;
-
   }
 
   .header-content {
@@ -174,9 +192,25 @@ body, html, #__nuxt, #__layout {
     height: 507px;
     width: 100%;
     .bg("~/assets/peakCoalImages/header/first-title-bg.png");
-
+    z-index: 2;
+    font-family: AlimamaShuHeiTi-Bold;
+    font-size: 116.67px;
+    color: #D8F0FF;
+    letter-spacing: 7.68px;
+    text-align: center;
+    text-shadow: 0 0 11px #000000;
+    font-weight: 700;
+    line-height: 148px;
+    padding-top: 110px;
+    > p {
+      margin: 0;
+    }
+    .suntitle {
+      font-size: 80px;
+      line-height: 100px;
     }
 
+  }
   .body-content {
     position: absolute;
     height: 100%;
@@ -190,7 +224,7 @@ body, html, #__nuxt, #__layout {
       height: 2721px;
       .bg("~/assets/peakCoalImages/left/left-content-bg.png", center, 60px);
       padding: 300px 476px 100px 412px;
-      perspective: 500px;
+      perspective: 1000px;
       .left-data-panel {
         height: 100%;
         width: 100%;
@@ -207,7 +241,7 @@ body, html, #__nuxt, #__layout {
       height: 2721px;
       .bg("~/assets/peakCoalImages/right/right-content-bg.png", center, 60px);
       padding: 300px 476px 100px 480px;
-      perspective: 500px;
+      perspective: 1000px;
 
       .right-data-panel {
         height: 100%;
@@ -240,10 +274,71 @@ body, html, #__nuxt, #__layout {
 
   .footer-content {
     position: absolute;
-    bottom: 0px;
+    bottom: -44px;
     width: 100%;
     height: 220px;
     .bg("~/assets/peakCoalImages/footer/footer-bg.png", center, center);
+    z-index: 2;
+    .footer-btn {
+      cursor: pointer;
+      position: absolute;
+      top: 84px;
+      font-family: AlimamaShuHeiTi-Bold;
+      font-size: 50px;
+      color: #D8F0FF;
+      letter-spacing: 3.29px;
+      text-shadow: 0 0 25px rgba(0,145,255,0.50);
+      font-weight: 700;
+      padding-left: 120px;
+      &.map-filter {
+        right: 3062px;
+        background: url('~/assets/images/map/filter/导航-点位.png') left center no-repeat;
+        background-size: 106px 111px;
+      }
+
+      &.video-btn {
+        left: 3014px;
+        background: url('~/assets/images/map/filter/导航-监控.png') left center no-repeat;
+        background-size: 106px 111px;
+      }
+    }
+
+    .filters {
+      position: absolute;
+      bottom: 240px;
+      right: 1470px * 2;
+      width: 528px;
+      .search {
+        height: 142px;
+        background: rgba(20, 64, 114, 0.7);
+        border: 1px solid rgba(31, 97, 173, 0.84);
+      }
+
+      .filter-box {
+        margin-top: 20px;
+        background: rgba(20, 64, 114, 0.7);
+        border: 1px solid rgba(31, 97, 173, 0.84);
+        padding: 0 40px 40px;
+        box-sizing: border-box;
+        .filter-item {
+          font-family: MicrosoftYaHei;
+          font-size: 38.89px;
+          color: rgba(255, 255, 255, 0.55);
+          letter-spacing: 2.56px;
+          font-weight: 400;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          height: 52px;
+          line-height: 52px;
+          margin-top: 40px;
+          cursor: pointer;
+          &.selected {
+            color: #fff;
+          }
+        }
+      }
+    }
   }
 
 

plugins/setup.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+Vue.prototype.$evBus = new Vue()