rsmonitoring-manage/src/views/remote/farmland/hcxx.vue

<template>
  <div>
    <div class="imgCon">
      <div class="echartTitle">
        <div class="block-title">监测类型情况</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.imagerPath" />
          <p>{{ item.imagerSj }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getJctbhcInfo, getTiffPath } from "@/api/ghss/jctb.js";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";

export default {
  props: {
    detailObj: {
      type: Object,
    },
    jcbh: {
      type: String,
    },
  },
  components: {},
  data() {
    return {
      imgUrl: "",
      monitorList: [
        {
          name: "11swm",
          imagerLzb: "",
          imagerBzb: "",
          imagerPath:
            "/analyse/全域土地整治/jctb/0/HN4602022023022004080074/1b9a9da4a23d426cab363ed369150b4f.jpg",
        },
      ],
      primitive: null,
      selectId: null,
      primitivesArray: [],
      hcObj: null,
      // jtArr:[],//箭头id数组
      // dwArr:[],//
      idArr: [], //id数组
      handler: {},
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    inputAction() {
      this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      // 鼠标移动事件
      this.handler.setInputAction(function (movement) {},
      Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    handleMouseEnter(a, b) {
      this.ceshi(a.id, "yr");
    },
    handleMouseLeave(a, b) {
      this.ceshi(a.id, "yc");
    },
    changeData(name, updata) {
      this[name] = updata;
    },
    clickImg(val) {
      this.$emit("updateParent", "emitImgList", this.monitorList);
      this.$emit("updateParent", "emitImgIndex", val);
    },

    // 加载图片
    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);

      var vectorSource = new VectorSource();
      window.map.mapDiv.addLayer(
        new VectorLayer({
          source: 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([0, 0]), // 设置位置
      });
      // feature.setStyle(
      //   new ol.style.Style({
      //     // 可以单独为特征设置样式以覆盖图层样式
      //     image: new ol.style.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度角。可以根据需要调整角度值。
      //     }),
      //   })
      // );
      vectorSource.addFeature(feature);
    },
    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";
      }
    },

    /**
     * 根据一个经纬度及距离角度，算出另外一个经纬度
     * @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(type) {
      if (this.idArr.length != 0) {
        this.idArr.forEach((item) => {
          viewer.entities.removeById(type + item);
        });
        // this.idArr = [];
      }
    },
    init() {
      // getJctbhcInfo(newVal).then((res) => {
      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;
        // window.axiosURI +/file/upload/attachment
        item.imagerPath =
          "http://192.168.60.2:8080/file/upload/attachment" + item.imagerPath;
        this.ddd(item);
        this.idArr.push(item.id);
      });
      // }
      // });
    },
  },
  watch: {
    jcbh: {
      handler(newVal, oldVal) {},
      // deep: true,
      // immediate: true,
    },
  },
  beforeDestroy() {
    this.delatePoi("jt");
    this.delatePoi("dw");
  },
};
</script>

<style lang="scss" scoped>
.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;
      }
    }
  }
}
</style>