xujingtown_irflcmp_ui/src/components/Popup.vue

<template>
  <div class="divlabel-container" id="stateShow" v-show="isShow">
    <div class="animate-maker-border">
      <div class="animate-marker__text" id="popup_content" v-html="desc"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      desc: "",
      first: true,
      gisPosition: null
    };
  },
  // props: {
  //   // entity: {
  //   //   type: Object
  //   // },
  //   // data: {
  //   //   type: Object
  //   // }
  // },
  methods: {
    openPopup(entity, data) {
      // console.log(new Date().getTime());

      let that = this;
      //经纬度转为世界坐标
      this.gisPosition = entity;
      // if (entity.position) {
      //   // gisPosition = entity.position.getValue();
      //   gisPosition = entity;
      // } else {
      //   // let point1 = d(entity.polyline.positions._value[0]);
      //   // let point2 = d(entity.polyline.positions._value[1]);
      //   // gisPosition = SkyScenery.Cartesian3.fromDegrees(
      //   //   (point1.lng + point2.lng) / 2,
      //   //   (point1.lat + point2.lat) / 2,
      //   //   0
      //   // );
      //   function d(cartesian3) {
      //     var cartographic =
      //       viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3);
      //     var lat = SkyScenery.Math.toDegrees(cartographic.latitude);
      //     var lng = SkyScenery.Math.toDegrees(cartographic.longitude);
      //     return {
      //       lng: lng,
      //       lat: lat,
      //     };
      //   }
      // }
      if (that.gisPosition == null) throw new Error("popup location is error");

      //   document.getElementById("stateShow").style.display = "block"; //弹出信息框
      // document.getElementById("popup_title").innerHTML = data.name;
      //   document.getElementById("popup_content").innerHTML = data.html || "";
      this.isShow = true;
      let html = "";
      let properties = entity.data
      for (const key in properties) {
        if (Object.prototype.hasOwnProperty.call(properties, key)) {
          html += `<div>${key}: ${properties[key]}</div>`;
        }
      }
      this.desc = html;

      if (this.first) {
        //实时更新位置
        viewer.scene.postRender.addEventListener(() => {
          if (!that.isShow) return;
          // console.log(new Date().getTime());
          //转化为屏幕坐标
          var windowPosition = SkyScenery.SceneTransforms.wgs84ToWindowCoordinates(
            viewer.scene,
            that.gisPosition
          );
          if (windowPosition == undefined) {
            document.getElementById("stateShow").style.display = "none";
            return;
          }
          document.getElementById("stateShow").style.left =
            windowPosition.x - 150 + "px";
          document.getElementById("stateShow").style.top =
            windowPosition.y - 260 + "px";
          document.getElementById("stateShow").style.display = "block";
          //解决滚动不隐藏问题
          const camerPosition = viewer.camera.position;
          let height = viewer.scene.globe.ellipsoid.cartesianToCartographic(
            camerPosition
          ).height;
          height += viewer.scene.globe.ellipsoid.maximumRadius;
          if (
            !(
              SkyScenery.Cartesian3.distance(camerPosition, that.gisPosition) >
              height
            ) &&
            viewer.camera.positionCartographic.height < 50000000
          ) {
            // document.getElementById("stateShow").style.display = "block";
            that.isShow = true;
          } else {
            // document.getElementById("stateShow").style.display = "none";
            that.isShow = false;
          }
        });
        this.first = false;
      }
    },
    closePopup() {
      this.isShow = false;
      this.desc = "";
      this.gisPosition = null;
      this.$store.state.showEntity = null;
      // document.getElementById("popup_content").innerHTML = "";
    }
  },
  computed: {
    entity() {
      return this.$store.state.showEntity;
    }
  },
  watch: {
    entity(newVal, oldVal) {
      if (newVal == null) {
        this.closePopup();
      } else {
        this.openPopup(newVal);
      }
    }
  }
};
</script>

<style lang="less" scoped>
#stateShow {
  position: absolute;
  z-index: 1;
  background: #ffffff;
  left: -1000px;
  top: -1000px;
  .animate-maker-border,
  .animate-maker-border::before,
  .animate-maker-border::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .animate-maker-border {
    width: 300px;
    height: 200px;

    margin: 0;
    color: #69ca62;
    box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
    padding: 5px;
    box-sizing: border-box;
    // background: rgba(0, 173, 181, 0.32);
    background: #343c2fb3;
  }
  .animate-maker-border::before,
  .animate-maker-border::after {
    content: "";
    z-index: 10;
    margin: -5%;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 8s linear infinite;
  }
  .animate-maker-border::before {
    animation-delay: -4s;
  }
  @keyframes clipMe {
    0%,
    100% {
      clip-path: inset(0 0 98% 0);
    }
    25% {
      clip-path: inset(0 98% 0 0);
    }
    50% {
      clip-path: inset(98% 0 0 0);
    }
    75% {
      clip-path: inset(0 0 0 98%);
    }
  }
  .animate-marker__text {
    color: #fff;
    font-size: 14px;
    // display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    font-weight: bolder;
    user-select: none;
    cursor: pointer;
    overflow: hidden;
    overflow-y: auto;
    padding: 0px 20px;
    box-sizing: border-box;
    :deep(div) {
      line-height: 30px;
    }
  }
}
</style>