核查信息监测类型情况上图

src/views/remote/farmland/details.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="details">
     <!--  -->
-    <el-tabs v-model="activeName" @tab-click="handleClick(nowObj)">
+    <el-tabs v-model="activeName" @tab-change="handleClick(nowObj)">
       <el-tab-pane label="基本信息" name="jbxx">
         <el-descriptions :column="1">
           <el-descriptions-item
@@ -64,7 +64,7 @@
       <el-tab-pane label="核查信息" name="hcxx" v-if="!formde">
         共{{ hcxxList.length }}次外业核查
         <el-collapse v-model="hcxxtab" @change="handleChange">
-          <el-collapse-item v-for="(hcit, hi) in hcxxList" :key="hi" name="1">
+          <el-collapse-item v-for="(hcit, hi) in hcxxList" :key="hi" :name="hi">
             <template #title>
               核查时间：{{ hcit.createTime }} 核查人员：{{ hcit.createBy }}
             </template>
@@ -200,7 +200,7 @@ import {
   audiText,
 } from "./config";
 import { nextTick } from "vue";
-
+const emit = defineEmits(["tabClick"]);
 const { proxy } = getCurrentInstance();
 const route = useRoute();
 const router = useRouter();
@@ -232,7 +232,7 @@ const sheetdata = reactive({
 
 const { ywyptab, sheets, open, diatitle, sheetinfos } = toRefs(sheetdata);
 
-function handleClick({ id, auditflowId }) {
+function handleClick({ id, auditflowId }, isfirst) {
   if (formde.value) {
     getDetailsDk(id).then((res) => {
       infoObj.value = res.data;
@@ -244,29 +244,39 @@ function handleClick({ id, auditflowId }) {
       console.log(sheets.value);
     });
   } else {
-    if (activeName.value == "jbxx")
+    if (activeName.value == "jbxx" || isfirst)
       getDkjbxx(id).then((res) => {
         infoObj.value = res.data;
       });
-    else if (activeName.value == "ywyp")
+    else if (activeName.value == "ywyp" || isfirst)
       getDkjbywy(id).then((res) => {
-        sheets.value = JSON.parse(res.data.sheetJson);
-        ywyptab.value = sheets.value[0].sheet;
-        console.log(sheets.value);
+        if (res.data && res.data.sheetJson) {
+          sheets.value = JSON.parse(res.data.sheetJson);
+          ywyptab.value = sheets.value[0].sheet;
+          console.log(sheets.value);
+        }
       });
-    else if (activeName.value == "ywjl")
+    else if (activeName.value == "ywjl" || isfirst)
       getAuditflow({ dkjdxxId: id }).then((res) => {
         activities.value = res.data;
       });
-    else if (activeName.value == "hcxx")
+    else if (activeName.value == "hcxx" || isfirst)
       getHcInfo({ dkid: id, auditflowStep: "WYDC", auditflowId }).then(
         (res) => {
           hcxxList.value = res.data;
           nextTick(() => {
-            hcxxRef.value[0].init(hcxxList.value[0].sdfjs);
+            for (let index = 0; index < hcxxList.value.length; index++) {
+              hcxxRef.value[index].init(hcxxList.value[index].sdfjs);
+            }
           });
         }
       );
+    if (activeName.value !== "hcxx") {
+      for (let index = 0; index < hcxxList.value.length; index++) {
+        hcxxRef.value[index].delatePoi();
+      }
+    }
+    emit("tabClick", activeName.value);
   }
   getStep({ dkjdxxId: id }).then((res) => {
     steps.value = res.data;
@@ -282,7 +292,7 @@ function getDetails({ pcsjid, id, auditflowId }) {
   infoObj.value = {};
   activities.value = [];
   nowObj.value = { pcsjid, id, auditflowId };
-  handleClick({ pcsjid, id, auditflowId });
+  handleClick({ pcsjid, id, auditflowId }, true);
 }
 function moreAct(actitem) {
   if (actitem.auditflowOperateType == "001")

src/views/remote/farmland/hcxx.vue

@@ -30,7 +30,7 @@ import Feature from "ol/Feature";
 import Point from "ol/geom/Point";
 import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
-
+let vectorLayer = null;
 export default {
   props: {},
   components: {},
@@ -56,10 +56,10 @@ export default {
       Cesium.ScreenSpaceEventType.LEFT_CLICK);
     },
     handleMouseEnter(a, b) {
-      this.ceshi(a.id, "yr");
+      this.ceshi(a, "yr");
     },
     handleMouseLeave(a, b) {
-      this.ceshi(a.id, "yc");
+      this.ceshi(a, "yc");
     },
     changeData(name, updata) {
       this[name] = updata;
@@ -71,181 +71,60 @@ export default {
 
     // 加载图片
     ddd(obj) {
-      // 将经纬度转换为 Cartesian3 坐标,起始点
-      //起始点
-      // 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(poi.lng, poi.lat);
-      // // 创建一个实体来表示点
-      // var pointEntity = viewer.entities.add({
-      //   id: "dw" + obj.id,
-      //   position: startPosition, // 点的位置
-      //   point: {
-      //     heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 设置为贴地
-      //     pixelSize: 10, // 点的大小
-      //     color: Cesium.Color.RED, // 点的颜色
-      //     outlineColor: Cesium.Color.BLACK, // 点的轮廓颜色
-      //     outlineWidth: 2, // 点的轮廓宽度
-      //   },
-      // });
-      // 创建一个实体来放置箭头
-      // var arrowEntity = viewer.entities.add({
-      //   id: "jt" + obj.id,
-      //   position: startPosition, // 设置箭头位置
-      //   billboard: {
-      //     // image: "http://192.168.176.1:8001/长箭头.png", // 设置箭头图标
-      //     image: "/static/images/路径@3x-2.png", // 设置箭头图标
-      //     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, // 设置贴地
-      //   },
-      // });
-
-      // // 聚焦视角到箭头位置
-      // viewer.zoomTo(arrowEntity);
-      let vectorLayer = new VectorLayer({
+      vectorLayer = new VectorLayer({
         source: new VectorSource(),
-        // style: new Style({
-        //   image: new Icon({
-        //     anchor: [0.5, 46], // 调整锚点以正确显示箭头尖端位置
-        //     anchorXUnits: "fraction",
-        //     anchorYUnits: "pixels",
-        //     src: "/static/images/路径@3x-2.png", // 替换为你的箭头图片路径
-        //     rotation: Math.PI / 4, //360 - Number(obj.imagerAngle),
-        //   }),
-        // }), // 使用自定义样式
       });
-
       // 添加一个特征，并设置其旋转角度
       var feature = new Feature({
         geometry: new Point([obj.fjLongitude, obj.fjLatitude]), // 设置位置
+        // geometry: new Point([114.763493, 37.610727]),
       });
-      // feature.setStyle(
-      //   new Style({
-      //     // 可以单独为特征设置样式以覆盖图层样式
-      //     image: new Icon({
-      //       anchor: [0.5, 46], // 保持锚点设置不变
-      //       anchorXUnits: "fraction",
-      //       anchorYUnits: "pixels",
-      //       src: "path/to/your/arrow.png", // 替换为你的箭头图片路径
-      //       rotation: Math.PI / 4, // 设置旋转角度，例如45度角，Math.PI / 4 表示 π/4 弧度，即45度角。可以根据需要调整角度值。
-      //     }),
-      //   })
-      // );
+      feature.setId("jt" + obj.id);
+      this.updateStyle(feature, obj, "-2");
+      // 将点Feature添加到矢量图层
       vectorLayer.getSource().addFeature(feature);
       window.map.mapDiv.addLayer(vectorLayer);
+      this.flyto(obj);
+    },
+    flyto(obj) {
+      window.map["mapDiv"].getView().animate({
+        center: [obj.fjLongitude, obj.fjLatitude],
+        zoom: 16.5,
+        duration: 2000, // 动画持续时间，单位毫秒
+      });
     },
-    ceshi(id, evtName) {
-      let aaa = viewer.entities.getById("jt" + id);
+    ceshi(obj, evtName) {
+      let aaa = this.getFeatureById("jt" + obj.id);
       if (evtName == "yr") {
-        aaa.billboard.image = "/static/images/路径@3x.png";
+        this.updateStyle(aaa, obj);
       } else {
-        aaa.billboard.image = "/static/images/路径@3x-2.png";
+        this.updateStyle(aaa, obj, "-2");
       }
     },
-
-    /**
-     * 根据一个经纬度及距离角度，算出另外一个经纬度
-     * @param {*} lng 经度 113.3960698
-     * @param {*} lat 纬度 22.941386
-     * @param {*} brng 方位角 45 ---- 正北方：000°或360° 正东方：090° 正南方：180° 正西方：270°
-     * @param {*} dist 90000距离(米)
-     * 1、角度转换为弧度公式：弧度=角度×(π ÷度180 )
-     * 2、弧度转换为角度公式： 角度=弧度×（180÷π）
-     */
-    getLonAndLat(lng, lat, brng, dist) {
-      //大地坐标系资料WGS-84 长半径a=6378137 短半径b=6356752.3142 扁率f=1/298.2572236
-      var a = 6378137;
-      var b = 6356752.3142;
-      var f = 1 / 298.257223563;
-
-      var lon1 = lng * 1;
-      var lat1 = lat * 1;
-      var s = dist;
-      var alpha1 = brng * (Math.PI / 180); //mapNumberUtil.rad(brng);
-      var sinAlpha1 = Math.sin(alpha1);
-      var cosAlpha1 = Math.cos(alpha1);
-
-      //var tanU1 = (1 - f) * Math.tan(mapNumberUtil.rad(lat1));
-      var tanU1 = (1 - f) * Math.tan(lat1 * (Math.PI / 180));
-      var cosU1 = 1 / Math.sqrt(1 + tanU1 * tanU1),
-        sinU1 = tanU1 * cosU1;
-      var sigma1 = Math.atan2(tanU1, cosAlpha1);
-      var sinAlpha = cosU1 * sinAlpha1;
-      var cosSqAlpha = 1 - sinAlpha * sinAlpha;
-      var uSq = (cosSqAlpha * (a * a - b * b)) / (b * b);
-      var A =
-        1 + (uSq / 16384) * (4096 + uSq * (-768 + uSq * (320 - 175 * uSq)));
-      var B = (uSq / 1024) * (256 + uSq * (-128 + uSq * (74 - 47 * uSq)));
-
-      var sigma = s / (b * A),
-        sigmaP = 2 * Math.PI;
-      while (Math.abs(sigma - sigmaP) > 1e-12) {
-        var cos2SigmaM = Math.cos(2 * sigma1 + sigma);
-        var sinSigma = Math.sin(sigma);
-        var cosSigma = Math.cos(sigma);
-        var deltaSigma =
-          B *
-          sinSigma *
-          (cos2SigmaM +
-            (B / 4) *
-              (cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) -
-                (B / 6) *
-                  cos2SigmaM *
-                  (-3 + 4 * sinSigma * sinSigma) *
-                  (-3 + 4 * cos2SigmaM * cos2SigmaM)));
-        sigmaP = sigma;
-        sigma = s / (b * A) + deltaSigma;
-      }
-
-      var tmp = sinU1 * sinSigma - cosU1 * cosSigma * cosAlpha1;
-      var lat2 = Math.atan2(
-        sinU1 * cosSigma + cosU1 * sinSigma * cosAlpha1,
-        (1 - f) * Math.sqrt(sinAlpha * sinAlpha + tmp * tmp)
-      );
-      var lambda = Math.atan2(
-        sinSigma * sinAlpha1,
-        cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1
+    getFeatureById(id) {
+      var features = vectorLayer.getSource().getFeatures();
+      return features.find((fi) => fi.getId() === id);
+    },
+    updateStyle(feature, obj, evtName = "") {
+      feature.setStyle(
+        new Style({
+          image: new Icon({
+            scale: 0.7, // 设置图标缩放
+            anchor: [0.5, 46], // 保持锚点设置不变
+            anchorXUnits: "fraction",
+            anchorYUnits: "pixels",
+            src: `/static/images/路径@3x${evtName}.png`, // 替换为你的箭头图片路径
+            rotation: (Number(obj.fjDirection) / 180) * Math.PI, // 设置旋转角度，例如45度角，Math.PI / 4 表示 π/4 弧度，即45度角。可以根据需要调整角度值 Math.P 及180度
+          }),
+        })
       );
-      var C = (f / 16) * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha));
-      var L =
-        lambda -
-        (1 - C) *
-          f *
-          sinAlpha *
-          (sigma +
-            C *
-              sinSigma *
-              (cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM)));
-
-      var revAz = Math.atan2(sinAlpha, -tmp); // final bearing
-
-      var lngLatObj = {
-        lng: lon1 + L * (180 / Math.PI),
-        lat: lat2 * (180 / Math.PI),
-      };
-      return lngLatObj;
     },
-
-    delatePoi(type) {
-      if (this.idArr.length != 0) {
-        this.idArr.forEach((item) => {
-          viewer.entities.removeById(type + item);
-        });
-        // this.idArr = [];
-      }
+    delatePoi() {
+      var features = vectorLayer.getSource().getFeatures();
+      features.forEach((item) => {
+        vectorLayer.getSource().removeFeature(item);
+      });
+      window.map.mapDiv.removeLayer(vectorLayer);
     },
     init(imgList) {
       this.idArr = [];
@@ -258,8 +137,9 @@ export default {
   },
   watch: {},
   beforeDestroy() {
+    console.log("----");
     this.delatePoi("jt");
-    this.delatePoi("dw");
+    // this.delatePoi("dw");
   },
 };
 </script>

src/views/remote/farmland/index.vue

@@ -81,7 +81,7 @@
       <el-button size="mini" @click="next(false)">上一个</el-button>
       <el-button size="mini" @click="next(true)">下一个</el-button>
       <!-- <div>图斑编号:{{ nowObj.dkbh }}</div> -->
-      <Details ref="detailsRef"></Details>
+      <Details ref="detailsRef" @tabClick="tabClick"></Details>
     </div>
     <!-- <CustomDetails :model="infoObj" :config="detailInfos"></CustomDetails> -->
   </div>
@@ -186,6 +186,12 @@ export default {
   },
 
   methods: {
+    tabClick(active) {
+      this.maptype = active == "jbxx" ? "split" : "normal";
+      if (active !== "hcxx") {
+        this.flyto(this.nowObj);
+      }
+    },
     removeDomain(item) {
       var index = this.domains.indexOf(item);
       if (index !== -1) {
@@ -293,6 +299,7 @@ export default {
     },
 
     test(item) {
+      window.map["mapDiv"].removeLayer(this.itemObj);
       window.map["mapCon1"].removeLayer(this.itemObj);
       window.map["mapCon2"].removeLayer(this.itemObj2);
       if (item.geom && item.geom != "") {
@@ -337,6 +344,7 @@ export default {
           },
           zIndex: 9999,
         });
+        window.map["mapDiv"].addLayer(this.itemObj);
         window.map["mapCon1"].addLayer(this.itemObj);
         window.map["mapCon2"].addLayer(this.itemObj2);
       }