核查信息图片与箭头联动联调数据,箭头旋转方向确认

src/api/ghss/jctb.js

@@ -27,3 +27,24 @@ export function JctbList(params) {
         params
     })
 }
+export function getJctbInfo(id) {
+    return request({
+        url: '/apply/gdbh/jctb/'+`${id}`,
+        method: 'get',
+        id:id
+    })
+}
+export function getJctbhcInfo(jcbh) {
+    return request({
+        url: '/apply/gdbh/jctbhc/jcbh/' +`${jcbh}`,
+        method: 'get',
+        jcbh:jcbh
+    })
+}
+export function getFilePath(filePath) {
+    return request({
+        url: '/analyse/fzss/DownloadReport?filePath=' +`${filePath}`,
+        method: 'get',
+        filePath:filePath
+    })
+}

src/views/farmlandProtection/components/hcxx.vue

@@ -48,7 +48,8 @@
           @mouseleave="handleMouseLeave(item, i)"
         >
           <span>{{ i + 1 }}</span>
-          <img :src="imgUrl" />
+          <!-- <img :src="imgUrl" /> -->
+          <img :src="item.imagerPath" />
           <!-- <img :src="imgUrl + item.imagerPath" /> -->
           <p>{{ item.imagerSj }}</p>
         </div>
@@ -72,72 +73,43 @@ export default {
   data() {
     return {
       imgUrl: "",
-      monitorList: [
+      monitorList:[],
+      monitorImg: [
         {
-          id: "s1",
           imgUrl:
             "https://b0.bdstatic.com/ugc/Gr0RkpztmAdvrxnS4n54Iw49d04e3484c9bb1a11f03b38a819d893.jpg@h_1280",
-          info: "2024-09-27 15:04",
-          name: "钱复式",
-          lat: "168.18",
-          lon: "46.33",
-          psfw: "45°",
         },
         {
-          id: "s2",
           imgUrl:
             "https://img2.baidu.com/it/u=3692233586,2896402884&fm=253&fmt=auto&app=120&f=JPEG?w=759&h=427",
-          info: "2024-09-27 15:04",
-          name: "梅执礼",
-          lat: "168.18",
-          lon: "46.33",
-          psfw: "45°",
         },
         {
-          id: "s3",
           imgUrl:
             "https://img2.baidu.com/it/u=882190421,2711411099&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",
-          info: "2024-09-27 15:04",
-          name: "陈贵志",
-          lat: "168.18",
-          lon: "46.33",
-          psfw: "45°",
         },
         {
-          id: "s4",
           imgUrl:
             "http://img2.baidu.com/it/u=516755055,1384417278&fm=253&app=138&f=JPEG?w=800&h=1067",
-          info: "2024-09-27 15:04",
-          name: "权超英",
-          lat: "168.18",
-          lon: "46.33",
-          psfw: "45°",
         },
         {
-          id: "s5",
           imgUrl:
             "http://img0.baidu.com/it/u=1366170349,307387023&fm=253&app=138&f=JPEG?w=800&h=1067",
-          info: "2024-09-27 15:04",
-          name: "王XX",
-          lat: "168.18",
-          lon: "46.33",
-          psfw: "45°",
         },
       ],
       primitive: null,
       selectId: null,
       primitivesArray: [],
       hcObj: null,
+      // jtArr:[],//箭头id数组
+      // dwArr:[],//
+      idArr:[],//id数组
     };
   },
   computed: {},
   mounted() {
     this.$nextTick(() => {
       // this.aaa();
-      // this.colorChange();
-      // this.ccc();
-      // this.onClickButton();
-      this.ddd();
+      // this.ddd();
       // this.imgUrl =
       //   "https://b0.bdstatic.com/ugc/Gr0RkpztmAdvrxnS4n54Iw49d04e3484c9bb1a11f03b38a819d893.jpg@h_1280";
     });
@@ -145,12 +117,10 @@ export default {
   },
   methods: {
     handleMouseEnter(a, b) {
-      console.log("鼠标移入", a, b);
-      this.ceshi("111");
+      this.ceshi(a.id,'yr');
     },
     handleMouseLeave(a, b) {
-      console.log("鼠标移出");
-      this.ceshi();
+      this.ceshi(a.id,'yc');
     },
     changeData(name, updata) {
       this[name] = updata;
@@ -181,92 +151,26 @@ export default {
     //     },
     //   });
     // },
-    //点击事件
-    onClickButton(e, val) {
-      // 每次进来清空，然后再重新加载图片
-      this.primitivesArray.forEach((primitive) => {
-        viewer.scene.primitives.remove(primitive);
-      });
-      this.primitivesArray = []; // 清空数组，
-
-      //传的图片
-      let image =
-        "https://img2.baidu.com/it/u=2726480512,4270878021&fm=253&fmt=auto&app=120&f=JPEG?w=193&h=193";
-      //传的图片 、经纬度、范围
-      this.PosButtonClick(image, 109.5077, 18.309, 24);
-    },
 
     //加载图片
-    PosButtonClick(imageurl, lon, lat, round) {
-      var point = {
-        longitude: lon,
-        latitude: lat,
-        height: -0.7728200032702337,
-      };
-      var rvalue = round; //范围半径
-
-      // 计算边界
-      var west =
-        point.longitude -
-        Cesium.Math.toDegrees(rvalue / Cesium.Ellipsoid.WGS84.maximumRadius);
-      var south =
-        point.latitude -
-        Cesium.Math.toDegrees(rvalue / Cesium.Ellipsoid.WGS84.maximumRadius);
-      var east =
-        point.longitude +
-        Cesium.Math.toDegrees(rvalue / Cesium.Ellipsoid.WGS84.maximumRadius);
-      var north =
-        point.latitude +
-        Cesium.Math.toDegrees(rvalue / Cesium.Ellipsoid.WGS84.maximumRadius);
-
-      var bounds = Cesium.Rectangle.fromDegrees(west, south, east, north);
-
-      var bound = new Cesium.Rectangle(west, south, east, north);
-
-      var heatPrimitive = viewer.scene.primitives.add(
-        new Cesium.GroundPrimitive({
-          geometryInstances: new Cesium.GeometryInstance({
-            geometry: new Cesium.RectangleGeometry({
-              rectangle: Cesium.Rectangle.fromDegrees(
-                bound.west,
-                bound.south,
-                bound.east,
-                bound.north
-              ),
-              vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
-              width: 24, // 设置图片的宽度
-              height: 24, // 设置图片的高度
-              rotation: Cesium.Math.toRadians(45), // 设置初始旋转角度（单位弧度）
-              // clampToGround: true,
-              pixelOffset: new Cesium.Cartesian2(30, -400), // 设置偏移量，X轴偏移30像素，Y轴偏移-40像素
-            }),
-          }),
-          appearance: new Cesium.EllipsoidSurfaceAppearance({
-            aboveGround: true,
-            material: new Cesium.Material({
-              fabric: {
-                type: "Image",
-                uniforms: {
-                  image: imageurl,
-                },
-              },
-            }),
-          }),
-        })
-      );
-      // 将新创建的GroundPrimitive添加到数组中
-      this.primitivesArray.push(heatPrimitive);
-    },
-    ddd() {
+    ddd(obj) {
       // 将经纬度转换为 Cartesian3 坐标,起始点
-      var startPosition = Cesium.Cartesian3.fromDegrees(109.5077, 18.309);
-      console.log(this.getLonAndLat(109.5077, 18.309, 78, 20), "======");
+      //起始点
+      var startPosition = Cesium.Cartesian3.fromDegrees(
+        Number(obj.imagerLzb),
+        Number(obj.imagerBzb)
+      );
+      let poi = this.getLonAndLat(
+        Number(obj.imagerLzb),
+        Number(obj.imagerBzb),
+        Number(obj.imagerAngle),
+        20
+      );
       //结束点
-      var targetPosition = Cesium.Cartesian3.fromDegrees(109.5111, 18.3093);
-
+      var targetPosition = Cesium.Cartesian3.fromDegrees(poi.lng, poi.lat);
       // 创建一个实体来表示点
       var pointEntity = viewer.entities.add({
-        id: "dw" + 1,
+        id: "dw" + obj.id,
         position: startPosition, // 点的位置
         point: {
           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 设置为贴地
@@ -276,10 +180,9 @@ export default {
           outlineWidth: 2, // 点的轮廓宽度
         },
       });
-
       // 创建一个实体来放置箭头
       var arrowEntity = viewer.entities.add({
-        id: "jt" + 1,
+        id: "jt" + obj.id,
         position: startPosition, // 设置箭头位置
         billboard: {
           // image: "http://192.168.176.1:8001/长箭头.png", // 设置箭头图标
@@ -287,43 +190,44 @@ export default {
           width: 37, // 设置图标宽度
           height: 69, // 设置图标高度
           scale: 0.7, // 设置图标缩放
+          rotation: Cesium.Math.toRadians(360 - Number(obj.imagerAngle)), // 可选，默认为0
+          // rotation: Number(obj.imagerAngle), // 可选，默认为0
           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 设置贴地
         },
       });
 
-      // 计算箭头的方向并更新
-      function updateArrowOrientation() {
-        // 计算起点到目标点的方向向量
-        var direction = Cesium.Cartesian3.subtract(
-          targetPosition,
-          startPosition,
-          new Cesium.Cartesian3()
-        );
+      // // 计算箭头的方向并更新
+      // function updateArrowOrientation() {
+      //   // 计算起点到目标点的方向向量
+      //   var direction = Cesium.Cartesian3.subtract(
+      //     targetPosition,
+      //     startPosition,
+      //     new Cesium.Cartesian3()
+      //   );
 
-        // 确保方向向量有效
-        if (Cesium.Cartesian3.magnitude(direction) > 0) {
-          // 计算箭头朝向目标的方向角（使用 JavaScript 原生 Math.atan2）
-          var heading = Cesium.Math.toDegrees(
-            Math.atan2(direction.y, direction.x)
-          );
+      //   // 确保方向向量有效
+      //   if (Cesium.Cartesian3.magnitude(direction) > 0) {
+      //     // 计算箭头朝向目标的方向角（使用 JavaScript 原生 Math.atan2）
+      //     var heading = Cesium.Math.toDegrees(
+      //       Math.atan2(direction.y, direction.x)
+      //     );
 
-          // 固定方向，使用 rotation 设置固定旋转
-          arrowEntity.billboard.rotation = Cesium.Math.toRadians(heading); // 固定旋转角度，不随地图旋转
-        }
-      }
+      //     // 固定方向，使用 rotation 设置固定旋转
+      //     arrowEntity.billboard.rotation = Cesium.Math.toRadians(heading); // 固定旋转角度，不随地图旋转
+      //   }
+      // }
 
-      // 每次视图更新时，重新计算箭头方向
-      viewer.scene.preRender.addEventListener(function () {
-        updateArrowOrientation();
-      });
+      // // 每次视图更新时，重新计算箭头方向
+      // viewer.scene.preRender.addEventListener(function () {
+      //   updateArrowOrientation();
+      // });
 
       // 聚焦视角到箭头位置
       viewer.zoomTo(arrowEntity);
     },
-    ceshi(item) {
-      let aaa = viewer.entities.getById("jt1");
-
-      if (item) {
+    ceshi(id,evtName) {
+      let aaa = viewer.entities.getById("jt" + id);
+      if (evtName == 'yr') {
         aaa.billboard.image = "/static/images/路径@3x.png";
       } else {
         aaa.billboard.image = "/static/images/路径@3x-2.png";
@@ -413,27 +317,30 @@ export default {
       return lngLatObj;
     },
 
-    delatePoi(item) {
-      // if (this.arrww.length != 0) {
-      // this.arrww.forEach((item) => {
-      viewer.entities.removeById(item);
-      // });
-      // this.arrww = [];
-      // }
+    delatePoi(type) {
+      if (this.idArr.length != 0) {
+        this.idArr.forEach((item) => {
+      viewer.entities.removeById(type + item);
+      });
+      // this.idArr = [];
+      }
     },
   },
   watch: {
     jcbh: {
       handler(newVal, oldVal) {
         getJctbhcInfo(newVal).then((res) => {
+          this.idArr= []
           if (res.code == 200) {
             this.monitorList = res.data.images;
             this.hcObj = res.data;
-            this.monitorList.forEach((item) => {
+            this.monitorList.forEach((item, i) => {
               item.name = res.data.dcry;
+              item.imagerPath = this.monitorImg[i].imgUrl
+              this.ddd(item);
+              this.idArr.push(item.id)
             });
           }
-          console.log(res.data.images, "?????????????????????????");
         });
       },
       deep: true,
@@ -441,8 +348,8 @@ export default {
     },
   },
   beforeDestroy() {
-    this.delatePoi("jt1");
-    this.delatePoi("dw1");
+    this.delatePoi("jt");
+    this.delatePoi("dw");
   },
 };
 </script>

src/views/farmlandProtection/components/tbDetails.vue

@@ -68,8 +68,12 @@ export default {
       this[name] = updata;
     },
     closeBox() {
-      this.onClick(false);
+      if (this.splitScreen) {
+        this.splitScreen = false
+        this.onClick(false);
+      }
       this.$emit("updateParent", "isShowTb", false);
+
       this.$emit("updateParent", "emitImgIndex", -1);
     },
     onClick(show) {

src/views/farmlandProtection/jctb/index.vue

@@ -72,6 +72,7 @@
               @updateParent="changeData"
               ref="tbqd"
               :updateObj="updateObj"
+              v-if="activeTabs == 'tbqd'"
             ></Tbqd>
           </el-tab-pane>
         </el-tabs>
@@ -98,7 +99,7 @@
           ref="carousel"
         >
           <el-carousel-item v-for="(item, i) in imgList" :key="i">
-            <img :src="item.imgUrl" />
+            <img :src="item.imagerPath" />
             {{ item }}
             <div class="imgInfo">
               <p>
@@ -233,8 +234,6 @@ export default {
     },
     //年份季度改变
     yearsChange(val) {
-      // if (val) {
-      console.log(val, "valval");
       val = JSON.parse(JSON.stringify(val));
       this.updateObj.val0 = val.startTime;
       this.updateObj.val1 = val.endTime;