tif上图逻辑完整版

src/api/ghss/jctb.js

@@ -29,22 +29,29 @@ export function JctbList(params) {
 }
 export function getJctbInfo(id) {
     return request({
-        url: '/apply/gdbh/jctb/'+`${id}`,
+        url: '/apply/gdbh/jctb/' + `${id}`,
         method: 'get',
-        id:id
+        id: id
     })
 }
 export function getJctbhcInfo(jcbh) {
     return request({
-        url: '/apply/gdbh/jctbhc/jcbh/' +`${jcbh}`,
+        url: '/apply/gdbh/jctbhc/jcbh/' + `${jcbh}`,
         method: 'get',
-        jcbh:jcbh
+        jcbh: jcbh
     })
 }
 export function getFilePath(filePath) {
     return request({
-        url: '/analyse/fzss/DownloadReport?filePath=' +`${filePath}`,
+        url: '/analyse/fzss/DownloadReport?filePath=' + `${filePath}`,
         method: 'get',
-        filePath:filePath
+        filePath: filePath
+    })
+}
+export function getTiffPath(filePath) {
+    return request({
+        url: "/file/read/tif/to/png" + `${filePath}`,
+        method: 'get',
+        filePath: filePath
     })
 }

src/views/farmlandProtection/components/hcxx.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import { getJctbhcInfo } from "@/api/ghss/jctb.js";
+import { getJctbhcInfo,getTiffPath } from "@/api/ghss/jctb.js";
 export default {
   props: {
     detailObj: {
@@ -73,16 +73,8 @@ export default {
   data() {
     return {
       imgUrl: "",
-      monitorList:[],
+      monitorList: [],
       monitorImg: [
-        {
-          imgUrl:
-            "https://b0.bdstatic.com/ugc/Gr0RkpztmAdvrxnS4n54Iw49d04e3484c9bb1a11f03b38a819d893.jpg@h_1280",
-        },
-        {
-          imgUrl:
-            "https://img2.baidu.com/it/u=3692233586,2896402884&fm=253&fmt=auto&app=120&f=JPEG?w=759&h=427",
-        },
         {
           imgUrl:
             "https://img2.baidu.com/it/u=882190421,2711411099&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",
@@ -102,7 +94,8 @@ export default {
       hcObj: null,
       // jtArr:[],//箭头id数组
       // dwArr:[],//
-      idArr:[],//id数组
+      idArr: [], //id数组
+      handler: {},
     };
   },
   computed: {},
@@ -113,14 +106,42 @@ export default {
       // this.imgUrl =
       //   "https://b0.bdstatic.com/ugc/Gr0RkpztmAdvrxnS4n54Iw49d04e3484c9bb1a11f03b38a819d893.jpg@h_1280";
     });
-    this.imgUrl = window.axiosURI + "/analyse/fzss/DownloadReport?filePath=";
+    // http://192.168.60.2:8080/file/upload/attachment
+    // this.imgUrl = window.axiosURI + "/file/upload/attachment";
+    this.inputAction();
   },
   methods: {
+    inputAction() {
+      // 为viewer添加鼠标移动的监听事件
+      // viewer.screenSpaceEventHandler.setInputAction(function (movement) {
+      //   // movement.endPosition是一个Cesium.Cartesian2对象，表示鼠标在屏幕上的位置
+
+      // }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+      this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+      // this.handler.setInputAction(function (movement) {
+      //   let pickedFeature = scene.pick(movement.position);
+      //   console.log(movement,pickedFeature,'////');
+      //   // that[queryName](movement);
+      // },  Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+      // 鼠标移动事件
+      this.handler.setInputAction(function (movement) {
+        console.log(movement,'movement');
+        // 通过pick方法获取鼠标下的实体
+        // var pickedObject = viewer.scene.pick(movement.endPosition);
+        // if (
+        //   Cesium.defined(pickedObject) &&
+        //   scene.pickPositionSupported &&
+        //   pickedObject != null
+        // ) {
+        //   console.log(pickedObject,'pickedObject'); // 打印实体的ID
+        // }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    },
     handleMouseEnter(a, b) {
-      this.ceshi(a.id,'yr');
+      this.ceshi(a.id, "yr");
     },
     handleMouseLeave(a, b) {
-      this.ceshi(a.id,'yc');
+      this.ceshi(a.id, "yc");
     },
     changeData(name, updata) {
       this[name] = updata;
@@ -225,9 +246,9 @@ export default {
       // 聚焦视角到箭头位置
       viewer.zoomTo(arrowEntity);
     },
-    ceshi(id,evtName) {
+    ceshi(id, evtName) {
       let aaa = viewer.entities.getById("jt" + id);
-      if (evtName == 'yr') {
+      if (evtName == "yr") {
         aaa.billboard.image = "/static/images/路径@3x.png";
       } else {
         aaa.billboard.image = "/static/images/路径@3x-2.png";
@@ -320,9 +341,9 @@ export default {
     delatePoi(type) {
       if (this.idArr.length != 0) {
         this.idArr.forEach((item) => {
-      viewer.entities.removeById(type + item);
-      });
-      // this.idArr = [];
+          viewer.entities.removeById(type + item);
+        });
+        // this.idArr = [];
       }
     },
   },
@@ -330,15 +351,18 @@ export default {
     jcbh: {
       handler(newVal, oldVal) {
         getJctbhcInfo(newVal).then((res) => {
-          this.idArr= []
+          this.idArr = [];
           if (res.code == 200) {
             this.monitorList = res.data.images;
             this.hcObj = res.data;
             this.monitorList.forEach((item, i) => {
               item.name = res.data.dcry;
-              item.imagerPath = this.monitorImg[i].imgUrl
+              console.log(item.imagerPath,'item.imagerPath111');
+              // item.imagerPath = this.monitorImg[i].imgUrl;
+              item.imagerPath = window.axiosURI + "/file/upload/attachment" + item.imagerPath;
+              console.log(item.imagerPath,'item.imagerPath');
               this.ddd(item);
-              this.idArr.push(item.id)
+              this.idArr.push(item.id);
             });
           }
         });

src/views/farmlandProtection/components/tbDetails.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="ghzc">
+    <div class="btn" v-if="splitScreen">
+      <span class="sx jcbh">前后影像对比:{{ detailObj.jcbh }}</span>
+      <!-- <el-button @click="drawer = true">打开抽屉</el-button> -->
+      <span class="sx qsx">前时相:{{ detailObj.qsx }}</span>
+      <span class="sx hsx">后时相:{{ detailObj.hsx }}</span>
+    </div>
     <div class="sm-panel sm-function-module-query" v-drag>
       <div class="sm-panel-header">
         <span>图斑详情</span>
@@ -8,10 +14,21 @@
       <div class="ServiceCon">
         <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
           <el-tab-pane label="基本信息" name="jbxx">
-            <Jbxx :detailObj="detailObj" @updateParent="changeData" ref="jbxx"></Jbxx>
+            <div class="dbBtn" @click="clickOpen">查看前后影像对比</div>
+
+            <Jbxx
+              :detailObj="detailObj"
+              @updateParent="changeData"
+              ref="jbxx"
+              v-if="activeTabs == 'jbxx'"
+            ></Jbxx>
           </el-tab-pane>
           <el-tab-pane label="核查信息" name="hcxx">
-            <Hcxx @updateParent="changeData" :jcbh="detailObj.jcbh" v-if="activeTabs == 'hcxx'"></Hcxx>
+            <Hcxx
+              @updateParent="changeData"
+              :jcbh="detailObj.jcbh"
+              v-if="activeTabs == 'hcxx'"
+            ></Hcxx>
           </el-tab-pane>
         </el-tabs>
       </div>
@@ -28,6 +45,7 @@ import {
   initroller,
   useRoller,
 } from "@/utils/MapHelper/map.js";
+import { getTiffPath } from "@/api/ghss/jctb.js";
 export default {
   props: {
     detailObj: {
@@ -41,41 +59,28 @@ export default {
   data() {
     return {
       activeTabs: "jbxx",
-      templateList: [
-        {
-          图斑编号: 6401812024070108270002,
-          行政名称: "海棠区",
-          前时相: "20230925",
-          后时相: "20240701",
-          前类型: "XX",
-          后类型: "XXX",
-        },
-      ],
       emitImgIndex: -1,
       emitImgList: [],
       imagelayers: [],
-      splitScreen:false
+      splitScreen: false,
+      idArr: [],
     };
   },
   computed: {},
-  mounted() {
-    this.$nextTick(() => {
-      // initroller();
-      // this.splitScreen = true;
-    });
-  },
+  mounted() {},
   methods: {
     changeData(name, updata) {
       this[name] = updata;
     },
     closeBox() {
       if (this.splitScreen) {
-        this.splitScreen = false
-        this.onClick(false);
+        this.splitScreen = false;
+        // this.onClick(false);
       }
+      viewer.entities.removeAll();
       this.$emit("updateParent", "isShowTb", false);
-
       this.$emit("updateParent", "emitImgIndex", -1);
+      this.$emit("updateParent", "allShow", true);
     },
     onClickjl(show) {
       if (show) {
@@ -104,7 +109,6 @@ export default {
       }
     },
     onClick(show) {
-      console.log("a-aa--", show);
       let mul = show ? "HORIZONTAL" : "NONE";
       scene.multiViewportMode = Cesium.MultiViewportMode[mul];
       let jl = {
@@ -117,7 +121,6 @@ export default {
       this.setImager({ url: jl.zzq, year: "qian" }, true, (layer) => {
         layer.setVisibleInViewport(0, false);
       });
-
     },
     setImager(obj, isshow = true, fun) {
       if (this.imagelayers[obj.year]) this.imagelayers[obj.year].show = isshow;
@@ -132,13 +135,79 @@ export default {
       fun && fun(this.imagelayers[obj.year]);
       // viewer.flyTo(this.imagelayers[obj.year]);
     },
+    clickOpen() {
+      getTiffPath(this.detailObj.qsxtif).then((res) => {
+        this.remove();
+        console.log(res.data,'res.data')
+        if (res.data.pngenvelope) {
+          this.getEntities(
+            this.detailObj.jcbh,
+            res.data.pngpath,
+            res.data.pngenvelope
+          );
+        }
+      });
+      // getTiffPath(this.detailObj.hsxtif).then((res) => {
+      //   this.remove();
+      //   if (res.data.pngenvelope) {
+      //     this.getEntities(
+      //       this.detailObj.jcbh,
+      //       res.data.pngpath,
+      //       res.data.pngenvelope
+      //     );
+      //   }
+      // });
+
+      this.$emit("updateParent", "allShow", false);
+      this.splitScreen = true;
+    },
+
+    getEntities(id, url, position) {
+      // let mul =  "HORIZONTAL";
+      // viewer.scene.multiViewportMode = Cesium.MultiViewportMode[mul];
+      let imageUrl = "";
+      let posArr = position;
+      imageUrl = window.axiosURI + "/file/upload/attachment" + url;
+      // 创建Cesium的ImageMaterialProperty
+      const imageMaterial = new Cesium.ImageMaterialProperty({
+        image: imageUrl,
+        repeat: new Cesium.Cartesian2(1.0, 1.0), // 控制图像重复，这里设置为不重复
+        transparent: true, // 如果图像有透明通道，设置为true
+      });
+
+      // 创建一个矩形实体并应用材质
+      const rectangleEntity = viewer.entities.add({
+        name: "Image Overlay",
+        id: id,
+        rectangle: {
+          coordinates: Cesium.Rectangle.fromDegrees(
+            posArr[0],
+            posArr[1],
+            posArr[2],
+            posArr[3]
+          ), // 设置矩形的经纬度范围
+          material: imageMaterial,
+        },
+      });
+      this.idArr.push(rectangleEntity.id);
+      // rectangleEntity.setVisibleInViewport(1, false);
+      // 调整视图以查看实体
+      viewer.zoomTo(rectangleEntity);
+    },
+    remove() {
+      if (this.idArr.length != 0) {
+        this.idArr.forEach((item) => {
+          viewer.entities.removeById(item);
+        });
+      }
+    },
   },
   watch: {
     emitImgIndex(val) {
       this.$emit("updateParent", "imgIndex", val);
       this.$emit("updateParent", "imgList", this.emitImgList);
     },
-    splitScreen(val){
+    splitScreen(val) {
       this.onClick(val);
     },
   },
@@ -188,4 +257,31 @@ export default {
   padding: 1rem 0.5rem 0px 0.5rem;
   height: 100% !important;
 }
+.btn {
+  .sx {
+    background: #64daff9c;
+    padding: 5px 10px;
+    border: 1px solid #4949492b;
+    border-radius: 5px;
+    position: absolute;
+    top: 4vh;
+    left: calc(50% - 170px);
+    z-index: 40;
+  }
+  .hsx {
+    left: 52vw;
+  }
+  .jcbh {
+    left: 3vw;
+  }
+}
+.dbBtn {
+  width: 136px;
+  height: 33px;
+  background-color: #0f7ac8;
+  line-height: 33px;
+  text-align: center;
+  margin: 10px 0;
+  cursor: pointer;
+}
 </style>