无人机

src/views/farmlandProtection/gdzl/wrjxx.vue

@@ -0,0 +1,547 @@
+<template>
+  <div>
+    <div class="detailList">
+      <el-descriptions :column="1" border>
+        <el-descriptions-item
+          label="图斑编号"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >{{ "6401812024070108270002" }}</el-descriptions-item
+        >
+        <el-descriptions-item
+          label="外业核实情况"
+          content-class-name="my-content"
+          :span="3"
+          >{{ "已核实" }}</el-descriptions-item
+        >
+        <el-descriptions-item label="实际地类代码">{{
+          "4601"
+        }}</el-descriptions-item>
+        <el-descriptions-item label="调查人员">{{
+          "刘子规"
+        }}</el-descriptions-item>
+        <el-descriptions-item label="调查时间">{{
+          "20240116"
+        }}</el-descriptions-item>
+        <el-descriptions-item label="扩展信息1">{{ "1" }}</el-descriptions-item>
+        <el-descriptions-item label="扩展信息2">{{
+          "无"
+        }}</el-descriptions-item>
+        <el-descriptions-item label="扩展信息3">{{
+          "无"
+        }}</el-descriptions-item>
+      </el-descriptions>
+    </div>
+    <div class="imgCon">
+      <div class="echartTitle">
+        <div class="block-title">
+          监测类型情况 <span @click="ceshi">测试</span>
+        </div>
+      </div>
+      <div class="imgList">
+        <div
+          class="imgDiv"
+          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" />
+          <p>{{ item.info }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    detailObj: {
+      type: Object,
+    },
+  },
+  components: {},
+  data() {
+    return {
+      monitorList: [
+        {
+          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: [],
+    };
+  },
+  computed: {},
+  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;
+    },
+    clickImg(val) {
+      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() {
+    this.delatePoi("jt1");
+    this.delatePoi("dw1");
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .el-descriptions-item__label.is-bordered-label {
+  color: #fff;
+  background-color: transparent;
+}
+/deep/ .el-descriptions__body {
+  color: #fff;
+  background-color: transparent;
+}
+.imgCon {
+  .imgList {
+    width: 100%;
+    // height: 300px;
+    max-height: 400px;
+    display: flex;
+    flex-wrap: wrap;
+    // background-color: rgba(255, 192, 203, 0.372);
+    .imgDiv {
+      width: 126px;
+      height: 83px;
+      margin-right: 10px;
+      // background-color: rgba(0, 255, 255, 0.413);
+      position: relative;
+      margin: 4px 4px;
+      img {
+        width: 126px;
+        height: 83px;
+      }
+      span {
+        width: 26px;
+        height: 26px;
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: #dbad70;
+        text-align: center;
+        line-height: 26px;
+      }
+      p {
+        position: absolute;
+        bottom: 0;
+        font-size: 10px;
+        color: #33ccff;
+        text-align: center;
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+      }
+    }
+  }
+}
+.detailList {
+  margin-top: 10px;
+}
+/deep/ .el-descriptions .is-bordered .el-descriptions-item__cell {
+  padding: 3px;
+}
+</style>