Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

src/views/LandConsolidation/index.vue

@@ -298,7 +298,8 @@ export default {
     // width: 45vw;
     width: 52vw;
     height: 330px;
-    top: calc(100% - 360px);
+    // top: calc(100% - 360px);
+    top: calc(100% - 372px);
     // left: 600px;
     // left: 31.2vw;
     left: 24vw;
@@ -353,6 +354,7 @@ export default {
 }
 .newContainer {
   top: 40px !important;
+  height: calc(100% - 82px) !important;
 }
 </style>
 <style lang="scss">
@@ -375,7 +377,6 @@ export default {
   .headerCheck {
     width: 520px;
     height: 50px;
-    // background: rgba(255, 192, 203, 0.379);
     position: absolute;
     left: 35vw;
     top: 3vh;

src/views/farmlandProtection/components/hcxx.vue

@@ -34,8 +34,9 @@
     </div>
     <div class="imgCon">
       <div class="echartTitle">
-        <div class="block-title">监测类型情况</div>
-        <div class="selectTab"></div>
+        <div class="block-title">
+          监测类型情况 <span @click="ceshi">测试</span>
+        </div>
       </div>
       <div class="imgList">
         <div
@@ -43,6 +44,8 @@
           v-for="(item, i) in monitorList"
           :key="i"
           @click="clickImg(i)"
+          @mouseenter="handleMouseEnter(item, i)"
+          @mouseleave="handleMouseLeave(item, i)"
         >
           <span>{{ i + 1 }}</span>
           <img :src="item.imgUrl" />
@@ -65,6 +68,7 @@ export default {
     return {
       monitorList: [
         {
+          id: "s1",
           imgUrl:
             "https://b0.bdstatic.com/ugc/Gr0RkpztmAdvrxnS4n54Iw49d04e3484c9bb1a11f03b38a819d893.jpg@h_1280",
           info: "2024-09-27 15:04",
@@ -74,6 +78,7 @@ export default {
           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",
@@ -83,6 +88,7 @@ export default {
           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",
@@ -92,6 +98,7 @@ export default {
           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",
@@ -101,6 +108,7 @@ export default {
           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",
@@ -110,11 +118,30 @@ export default {
           psfw: "45°",
         },
       ],
+      primitive: null,
+      selectId: null,
+      primitivesArray: [],
     };
   },
   computed: {},
-  mounted() {},
+  mounted() {
+    this.$nextTick(() => {
+      // this.aaa();
+      // this.colorChange();
+      // this.ccc();
+      // this.onClickButton();
+      this.ddd();
+    });
+  },
   methods: {
+    handleMouseEnter(a, b) {
+      console.log("鼠标移入", a, b);
+      this.ceshi('111')
+    },
+    handleMouseLeave(a, b) {
+      console.log("鼠标移出");
+      this.ceshi()
+    },
     changeData(name, updata) {
       this[name] = updata;
     },
@@ -122,10 +149,340 @@ export default {
       this.$emit("updateParent", "emitImgList", this.monitorList);
       this.$emit("updateParent", "emitImgIndex", val);
     },
+    aaa() {
+      var redLine = viewer.entities.add({
+        // 贴在地面上 两点之间的直线距离
+        name: "line",
+        // polyline: {
+        // positions: Cesium.Cartesian3.fromDegreesArray([
+        //   // o.inx,
+        //   // o.iny,
+        //   // o.outx,
+        //   // o.outy,
+        //   109.5077, 18.309, 109.5111, 18.3093,
+        // ]),
+        //   width: 20,
+        //   // 不带箭头的线
+        //   // material: Cesium.Color.RED,
+        //   // 是否紧贴地面
+        //   clampToGround: true,
+        //   // 带箭头的线
+        //   material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED),
+        // },
+
+        polygon: {
+          hierarchy: Cesium.Cartesian3.fromDegreesArray([
+            // o.inx,
+            // o.iny,
+            // o.outx,
+            // o.outy,
+            109.5077, 18.309, 109.5111, 18.3093,
+          ]),
+          material: new Cesium.ColorMaterialProperty(
+            Cesium.Color.fromCssColorString("rgba(255, 255, 255, 1)")
+          ),
+          width: 15,
+        },
+      });
+    },
+    ccc() {
+      // // var viewer = new Cesium.Viewer("cesiumContainer");
+      // // var scene = viewer.scene;
+      // // 创建BillboardCollection来存储图片或图标
+      // var billboards = viewer.scene.primitives.add(
+      //   new Cesium.BillboardCollection()
+      // );
+      // // 添加一个带偏移量和旋转的图标
+      // var billboard = billboards.add({
+      //   image:
+      //     "https://img2.baidu.com/it/u=2726480512,4270878021&fm=253&fmt=auto&app=120&f=JPEG?w=193&h=193", // 替换为图片的路径
+      //   position: Cesium.Cartesian3.fromDegrees(109.5077, 18.309), // 设置图片的位置，采用经纬度
+      //   width: 64, // 设置图片的宽度
+      //   height: 64, // 设置图片的高度
+      //   rotation: Cesium.Math.toRadians(45), // 设置初始旋转角度（单位弧度）
+      //   // clampToGround: true,
+      //   pixelOffset: new Cesium.Cartesian2(30, -40), // 设置偏移量，X轴偏移30像素，Y轴偏移-40像素
+      //   heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+      //   horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平锚点
+      //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直锚点
+      // });
+
+      // 创建一个Cesium视图
+      // var viewer = new Cesium.Viewer("cesiumContainer");
+
+      // 获取场景对象
+      var scene = viewer.scene;
+
+      // 创建一个BillboardCollection，用于存放所有Billboard对象
+      var billboards = scene.primitives.add(new Cesium.BillboardCollection());
+
+      // 定义图片的URL
+      var imageUrl = "https://example.com/your-image.png";
+
+      // 设置图片的初始位置（经纬度）
+      var longitude = -75.0;
+      var latitude = 40.0;
+      var height = 1000; // 距离地面1000米
+
+      // 创建Billboard对象
+      var billboard = billboards.add({
+        image: imageUrl, // 设置图片
+        position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height), // 设置位置
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 贴地
+        scale: 1.0, // 图片的缩放比例
+        rotation: Cesium.Math.toRadians(45), // 旋转角度，单位是弧度
+        pixelOffset: new Cesium.Cartesian2(50, 0), // 图片的偏移量，单位是像素（x, y）
+        alignedAxis: Cesium.Cartesian3.ZERO, // 不需要对齐轴
+      });
+    },
+    //点击事件
+    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() {
+      // 将经纬度转换为 Cartesian3 坐标,起始点
+      var startPosition = Cesium.Cartesian3.fromDegrees(109.5077, 18.309);
+      console.log(this.getLonAndLat(109.5077, 18.309, 78, 20), "======");
+      //结束点
+      var targetPosition = Cesium.Cartesian3.fromDegrees(109.5111, 18.3093);
+
+      // 创建一个实体来表示点
+      var pointEntity = viewer.entities.add({
+        id: "dw" + 1,
+        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" + 1,
+        position: startPosition, // 设置箭头位置
+        billboard: {
+          // image: "http://192.168.176.1:8001/长箭头.png", // 设置箭头图标
+          image: "/static/images/路径@3x-2.png", // 设置箭头图标
+          width: 37, // 设置图标宽度
+          height: 69, // 设置图标高度
+          scale: 0.7, // 设置图标缩放
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 设置贴地
+        },
+      });
+
+      // 计算箭头的方向并更新
+      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)
+          );
+
+          // 固定方向，使用 rotation 设置固定旋转
+          arrowEntity.billboard.rotation = Cesium.Math.toRadians(heading); // 固定旋转角度，不随地图旋转
+        }
+      }
+
+      // 每次视图更新时，重新计算箭头方向
+      viewer.scene.preRender.addEventListener(function () {
+        updateArrowOrientation();
+      });
+
+      // 聚焦视角到箭头位置
+      viewer.zoomTo(arrowEntity);
+    },
+    ceshi(item) {
+      // console.log(item,"?????");
+      let aaa = viewer.entities.getById("jt1");
+
+      if (item) {
+        aaa.billboard.image = "/static/images/路径@3x.png";
+      } else {
+        aaa.billboard.image = "/static/images/路径@3x-2.png";
+      }
+    },
+
+    /**
+     * 根据一个经纬度及距离角度，算出另外一个经纬度
+     * @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
+      );
+      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(item) {
+      // if (this.arrww.length != 0) {
+      // this.arrww.forEach((item) => {
+      viewer.entities.removeById(item);
+      // });
+      // this.arrww = [];
+      // }
+    },
   },
   watch: {},
   watch: {},
-  beforeDestroy() {},
+  beforeDestroy() {
+    this.delatePoi("jt1");
+    this.delatePoi("dw1");
+  },
 };
 </script>
 

src/views/farmlandProtection/components/tbDetails.vue

@@ -11,7 +11,7 @@
             <Jbxx :detailObj="detailObj" @updateParent="changeData"></Jbxx>
           </el-tab-pane>
           <el-tab-pane label="核查信息" name="hcxx">
-            <Hcxx @updateParent="changeData"></Hcxx>
+            <Hcxx @updateParent="changeData" v-if="activeTabs == 'hcxx'"></Hcxx>
           </el-tab-pane>
         </el-tabs>
       </div>

src/views/farmlandProtection/indexNew.vue

@@ -212,10 +212,9 @@ export default {
   .headerCheck {
     width: 520px;
     height: 50px;
-    // background: rgba(255, 192, 203, 0.379);
     position: absolute;
-    left: 38%;
-    top: 10px;
+    left:35vw;
+    top: 3vh;
     z-index: 99;
     pointer-events: none;
     ul {

src/views/farmlandProtection/jctb/index.vue

@@ -17,7 +17,7 @@
             <Jclxqk></Jclxqk>
           </el-tab-pane>
           <el-tab-pane label="图斑清单" name="tbqd">
-            <Tbqd @updateParent="changeData"></Tbqd>
+            <Tbqd @updateParent="changeData" ref="tbqd"></Tbqd>
           </el-tab-pane>
         </el-tabs>
       </div>
@@ -58,6 +58,14 @@
         </el-carousel>
       </div>
     </div>
+    <!-- <div class="tiffBox" id="fullscreen-div">
+      <div class="sm-panel-header">
+        <span>前后影像对比</span>
+        <i class="el-icon-full-screen" @click="fullScreen"></i>
+        <i class="el-icon-aim" @click="aimScreen"></i>
+      </div>
+      <img src="../components//u385.jpg"/>
+    </div> -->
   </div>
 </template>
 
@@ -98,12 +106,98 @@ export default {
     },
     tabClick(evt) {
       this.activeTabs = evt.name;
-      this.isShowTb = false
-      this.imgIndex= -1
+      this.isShowTb = false;
+      this.imgIndex = -1;
+      console.log();
+      if (this.activeTabs == 'tbqd') {
+        this.$refs.tbqd.init()
+        // console.log("哈哈哈",this.$refs.tbqd);
+      }else{
+        // console.log(33333,viewer);
+      }
     },
     closeBox() {
       this.imgIndex = -1;
     },
+    fullScreen() {
+      // // 全屏按钮点击
+      // // DOM对象的一个属性，可以用来判断当前是不是全屏模式【全屏:true,不是全屏：false】
+      // let full = document.fullscreenElement;
+      // if (!full) {
+      //   // 文档根节点的方法requestFullscreen（）实现全屏模式
+      //   document.documentElement.requestFullscreen();
+      // } else {
+      //   // 文档根节点的方法exitFullscreen（）退出全屏
+      //   document.exitFullscreen();
+      // }
+
+      document
+          var div = document.getElementById("fullscreen-div");
+
+          if (div.requestFullscreen) {
+            div.requestFullscreen();
+          } else if (div.mozRequestFullScreen) {
+            /* Firefox */
+            div.mozRequestFullScreen();
+          } else if (div.webkitRequestFullscreen) {
+            /* Chrome, Safari & Opera */
+            div.webkitRequestFullscreen();
+          } else if (div.msRequestFullscreen) {
+            /* IE/Edge */
+            div.msRequestFullscreen();
+          }
+        
+
+      // // 监听全屏状态的改变
+      // document.addEventListener(
+      //   "fullscreenchange",
+      //   function () {
+      //     if (!document.fullscreenElement) {
+      //       console.log("已退出全屏");
+      //     } else {
+      //       console.log("已进入全屏");
+      //     }
+      //   },
+      //   false
+      // );
+
+      // document.addEventListener(
+      //   "mozfullscreenchange",
+      //   function () {
+      //     if (!document.mozFullScreenElement) {
+      //       console.log("已退出全屏");
+      //     } else {
+      //       console.log("已进入全屏");
+      //     }
+      //   },
+      //   false
+      // );
+
+      // document.addEventListener(
+      //   "webkitfullscreenchange",
+      //   function () {
+      //     if (!document.webkitFullscreenElement) {
+      //       console.log("已退出全屏");
+      //     } else {
+      //       console.log("已进入全屏");
+      //     }
+      //   },
+      //   false
+      // );
+
+      // document.addEventListener(
+      //   "msfullscreenchange",
+      //   function () {
+      //     if (!document.msFullscreenElement) {
+      //       console.log("已退出全屏");
+      //     } else {
+      //       console.log("已进入全屏");
+      //     }
+      //   },
+      //   false
+      // );
+    },
+    aimScreen() {},
   },
   watch: {
     imgIndex(val) {
@@ -188,4 +282,16 @@ export default {
     }
   }
 }
+.tiffBox {
+  width: 504px;
+  height: 368px;
+  // background: #33ccff;
+  background-color: rgba(38, 38, 38, 0.6);;
+  // background: url(/static/images/ghzc/内容框.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  z-index: 99;
+  left: 41%;
+  top: 30%;
+}
 </style>