merge

src/views/sys/exception/LargeScreenMap/index.vue

@@ -66,20 +66,20 @@ const initMap = () => {
                 }
             },
             layers: [
+                
                 {
-                    id: 'dianzi',
+                    id: 'dianzi-biaozhu',
                     type: 'raster',
-                    source: 'dianzi',
+                    source: 'dianzi-biaozhu',
                     minzoom: 0,
                     maxzoom: 18,
                     layout: {
                         visibility: 'visible',
                     }
-                },
-                {
-                    id: 'dianzi-biaozhu',
+                },{
+                    id: 'dianzi',
                     type: 'raster',
-                    source: 'dianzi-biaozhu',
+                    source: 'dianzi',
                     minzoom: 0,
                     maxzoom: 18,
                     layout: {

src/views/sys/exception/VideoSupervision.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="main-container">
+    <!-- mask -->
+    <div id="alertOverlay" class="alert-active" ref="alertOverlay">
+      <div></div>
+    </div>
+
     <!-- layout -->
     <div class="main-header">
       <div class="title">
@@ -225,4 +230,74 @@ onMounted(() => {
       z-index:9999999;
     }
   }
+
+  #alertOverlay::before,#alertOverlay::after {
+    position: absolute;
+    width: 100px;
+    height: 100%;
+  }
+
+  #alertOverlay div::before,#alertOverlay div::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 120px;
+  }
+
+  #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;
+    }
+  }
 </style>

src/views/sys/exception/VideoSupervision/map/map.vue

@@ -656,6 +656,7 @@
       loadMonitorLayer();
       loadFuFeiLayer();
       getHangFeiAreaData();
+      getHangFeiPlanData();
       emits('onload');
       map.on('click', (e) => {
         var center = map.getCenter(); // 获取当前视图中心点
@@ -913,6 +914,38 @@
           'line-color': '#6F7FF4', // 设置线的颜色
           'line-width': 3, // 设置线的宽度
         },
+        layout:{
+          "visibility":"none"
+        }
+      });
+  }
+
+  // 航飞规划
+  function getHangFeiPlanData(){
+    axios({
+      method: 'get',
+      url: `http://120.222.154.7:8090/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Ahangfeiquyu&maxFeatures=9990&outputFormat=application%2Fjson`,
+    }).then((res) => {
+      loadHangFeiPlanLayer(res.data);
+    });
+  }
+
+  function loadHangFeiPlanLayer(geojson){
+      map.addSource('hangfeiPlanSource', {
+        type: 'geojson',
+        data: geojson,
+      });
+      map.addLayer({
+        id: 'hangfeiplan',
+        type: 'line',
+        source: 'hangfeiPlanSource',
+        paint: {
+          'line-color': '#6F7FF4', // 设置线的颜色
+          'line-width': 3, // 设置线的宽度
+        },
+        layout:{
+          "visibility":"none"
+        }
       });
   }