增加危险范围的数据

danger-manage-web/src/components/bigWindow/Danger2.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2022-06-21 09:24:11
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2022-10-11 18:06:41
+ * @FilePath: /danger-manage-web/src/components/bigWindow/Danger.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="danger-wrapper">
+    <div class="close" @click="close">
+      <img src="@/assets/images/closeBtn.png" alt="" />
+    </div>
+   <div class="text">
+    {{deviceData.name}}
+   </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {};
+  },
+  mounted() {
+    console.log(this.deviceData);
+  },
+  methods: {
+    close() {
+      //this.handleClose();
+      this.mapClass.clearInfoWindow();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.danger-wrapper {
+  background-color: rgba(9, 18, 32, 0.6);
+  position: absolute;
+  padding: 30px;
+  padding-bottom: 0;
+  box-sizing: border-box;
+  // width: 100px;
+  // height: 510px;
+  .text{
+    color:#fff;
+    padding-bottom:30px;
+  }
+  .up {
+    border-bottom: 1px solid #cccccc;
+    margin-bottom: 15px;
+    &.noBroder{
+    border-bottom: 0px solid #cccccc;
+    margin-bottom: 10px;
+
+
+    }
+  }
+  .tit {
+    line-height: 14px;
+    color: #ffffff;
+    font-weight: 600;
+    position: relative;
+    margin-left: 12px;
+    &:before {
+      content: "";
+      position: absolute;
+      width: 5px;
+      height: 15px;
+      left: -12px;
+      top: 0;
+      background: #fff;
+    }
+  }
+  .close {
+    position: absolute;
+    right: 15px;
+    top: 10px;
+    cursor: pointer;
+  }
+  .one {
+    width: 100%;
+    flex-wrap: wrap;
+    .flex-item {
+      width: 50%;
+      margin-bottom: 5px;
+      .left {
+        color: #cccccc;
+      }
+      .right {
+        color: #fff;
+        margin-left: 5px;
+      }
+    }
+  }
+  .item {
+    margin-bottom: 5px;
+    .left {
+      color: #cccccc;
+    }
+    .right {
+      color: #fff;
+      margin-left: 5px;
+    }
+    .img {
+      width: 300px;
+      height: 120px;
+      display: inline-block;
+      vertical-align: top;
+      margin-left: 5px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

danger-manage-web/src/utils/cesium/cesiumClass.js

 /*
  * @Author: your name
  * @Date: 2021-12-07 14:19:18
- * @LastEditTime: 2022-10-10 17:09:52
+ * @LastEditTime: 2022-10-11 11:46:52
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /cesium-vue/src/utils/seieumClass.js
  */
+window.danger = { name: "", colorNum: null, path: [], data: {} };
+window.dangerArr = JSON.parse(localStorage.getItem('J') ).length>0? JSON.parse(localStorage.getItem('J') ): [];
+window.repeat = () => {
+  window.danger = { name: "", path: [], data: {} };
+};
+window.save = () => {
+  window.dangerArr.push(window.danger);
+  const json = JSON.stringify(window.dangerArr);
+  localStorage.setItem("J", json);
+  console.log(json)
+  window.repeat()
+};
 
 var viewModel = {
   silhouetteColor: "Yellow",
@@ -87,8 +99,8 @@ const dangerColor = {
   // 1:Cesium.Color.fromCssColorString("red")
   1: Cesium.Color.RED.withAlpha(0.5),
   2: Cesium.Color.ORANGE.withAlpha(0.5),
-  3: Cesium.Color.BLUE.withAlpha(0.5),
-  4: Cesium.Color.YELLOW.withAlpha(0.5),
+  3: Cesium.Color.YELLOW.withAlpha(0.5),
+  4: Cesium.Color.BLUE.withAlpha(0.5),
 };
 
 // const picUrlList = {
@@ -316,7 +328,7 @@ export default class CreateCesium {
         let offset = Cesium.Cartesian3.fromRadians(
           Cesium.Math.toRadians(gps[0]),
           Cesium.Math.toRadians(gps[1]),
-          -160
+          -161.1
         );
         // let offset = Cesium.Cartesian3.fromRadians(
         //   Cesium.Math.toRadians(gaodeLnglat.lng),
@@ -383,7 +395,7 @@ export default class CreateCesium {
         this.createDevice(movement);
       }
       var picked = this.scene.pick(movement.position);
-      console.log("picked", picked);
+      // console.log("picked", picked);
       if (Cesium.defined(picked)) {
         if (picked.id && picked.id instanceof Cesium.Entity) {
           // console.log(picked.id)
@@ -443,9 +455,12 @@ export default class CreateCesium {
       const pitch = Cesium.Math.toDegrees(this.viewer.camera.pitch).toFixed(2);
       //围绕X轴旋转
       const roll = Cesium.Math.toDegrees(this.viewer.camera.roll).toFixed(2);
-      console.log(height, heading, pitch, roll);
+      // console.log(height, heading, pitch, roll);
       const ln = this.getLnglat(movement);
-      console.log(ln);
+      // console.log(ln);
+
+      window.danger.path.push(ln);
+      console.log(window.danger.path);
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     handler.setInputAction((movement) => {
       // 新建
@@ -454,7 +469,7 @@ export default class CreateCesium {
     handler.setInputAction((movement) => {
       // 如果是鼠标按下的状态，则监听地图移动
       if (this.mouseDownFlag) {
-        console.log("地图移动");
+        // console.log("地图移动");
         // this.clearInfoWindow();
         // 改变位置
         // this.changePosition();
@@ -479,7 +494,7 @@ export default class CreateCesium {
       // this.clearInfoWindow();
 
       var picked = this.scene.pick(movement.position);
-      console.log(movement.position);
+      // console.log(movement.position);
       if (Cesium.defined(picked)) {
         if (picked.id && picked.id instanceof Cesium.Entity) {
           // console.log(picked.id)
@@ -532,7 +547,7 @@ export default class CreateCesium {
       // 鼠标抬起
       this.mouseDownFlag = false;
 
-      console.log("up");
+      // console.log("up");
 
       // this.viewer.scene.screenSpaceCameraController.enableRotate = true;
       // handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
@@ -565,7 +580,7 @@ export default class CreateCesium {
       // 打印中心点坐标、高度
       // 当鼠地图移动的时候与相机事件隔离
       if (!this.mouseDownFlag) {
-        console.log("相机发生变化");
+        // console.log("相机发生变化");
         // this.clearInfoWindow();
       }
     });

danger-manage-web/src/views/index.vue

@@ -2,14 +2,15 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2022-09-03 10:51:24
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2022-10-10 17:10:12
+ * @LastEditTime: 2022-10-11 17:40:35
  * @FilePath: /danger-manage-web/src/views/index.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
   <div class="index-wrapper">
     <Top />
-    <Left v-if="charsShow"
+    <Left
+      v-if="charsShow"
       ref="left"
       @clickShow="clickShow"
       @dangerDeviceChange="dangerDeviceChange"
@@ -31,6 +32,7 @@ import Video from "@/components/bigWindow/video";
 import tcq from "@/components/bigWindow/tcq";
 import Null from "@/components/bigWindow/Null";
 import Danger from "@/components/bigWindow/Danger";
+import Danger2 from "@/components/bigWindow/Danger2";
 import weixiandian from "@/components/bigWindow/weixiandian";
 import ydqt from "@/components/bigWindow/ydqt";
 import danger from "@/assets/images/danger.png";
@@ -41,13 +43,15 @@ import Right from "@/views/indexComponents/Right";
 import Bottom from "@/views/indexComponents/Bottom";
 
 import { deviceInfoLists } from "@/api/map/deviceInfo";
+
+import { dangerArr } from "@/utils/cesium/dangerArr.js";
 export default {
   name: "shouye",
-  props:{
-   charsShow:{
-    type:Boolean,
-    default:true,
-   }
+  props: {
+    charsShow: {
+      type: Boolean,
+      default: true,
+    },
   },
   components: {
     Top,
@@ -382,10 +386,35 @@ export default {
           this.Cesium.addDevice(item, "pic", ydqt);
         }
       });
-      this.danger.forEach((item) => {
-        this.Cesium.addDanger(item, Danger);
+      // 如果有缓存
+      // const J =  localStorage.getItem("J");
+      // if (J) {
+      //   const data = JSON.parse(J);
+      //   data
+      //     .map((item) => {
+      //       return {
+      //         lnglatArr: item.path,
+      //         ...item,
+      //       };
+      //     })
+      //     .forEach((item) => {
+      //       this.Cesium.addDanger(item, Null);
+      //     });
+      // } else {
+      //   this.danger.forEach((item) => {
+      //     this.Cesium.addDanger(item, Danger);
+      //   });
+      // }
+      dangerArr
+        .map((item) => {
+          return {
+            lnglatArr: item.path,
+            ...item,
+          };
+        })
+        .forEach((item) => {
+          this.Cesium.addDanger(item, Danger2);
         });
-
       this.data11.forEach((item) => {
         item.config = { scale: 1, textHeight: -32 };
         this.Cesium.addDevice(item, "pic", Video);
@@ -409,15 +438,15 @@ export default {
               obj = {
                 latitude: item.latitude,
                 longitude: item.longitude,
-                deviceId:item.mapDeviceId,
+                deviceId: item.mapDeviceId,
                 shortNum: 10,
                 deviceType: item.mapDeviceType,
                 title: item.mapDeviceName,
-               config : { scale: 1, textHeight: -32 },
+                config: { scale: 1, textHeight: -32 },
               };
             } else {
               obj = {
-                deviceId:item.mapDeviceId,
+                deviceId: item.mapDeviceId,
                 latitude: item.latitude,
                 longitude: item.longitude,
                 deviceType: item.mapDeviceType,
@@ -430,7 +459,7 @@ export default {
                 sbzt: item.monitorDeviceStatus,
                 jcz: item.monitorValue + "" + item.mapDeviceUnit,
                 shortNum: 12,
-                config : { scale: 1, textHeight: -94 },
+                config: { scale: 1, textHeight: -94 },
               };
             }
             return obj;