<template>
  <div class="widget-coordinate">
    <div style="display: inline-block;margin-left:10px;">
      <div style="display: flex">
        <div><span>比例尺:</span></div>
        <div style="margin-left: 10px; width: 100px">
          <div id="scaleLabel">{{ scaleText }}</div>
          <div id="scaleBar" class="scaleBar"></div>
        </div>
      </div>
    </div>
    <div style="margin-left: 30px;display: inline-block;">
      <span class="Geodetic">{{ coorText }}</span>
      <span class="height">{{ coorheight }}</span>
      <span class="cameraHeight">{{ cameraHeight }}</span>
    </div>
  </div>
</template>
<script>
/**
 * 鼠标坐标信息、比例尺
 */
export default {
  name: "Coordinate",
  data() {
    return {
      coorText: "",
      coorheight: "",
      cameraHeight: "",
      scaleText: "km",
    };
  },
  props: {
    isInit: false,//三维场景是否初始化
  },
  computed:{
      AppX(){
          return this.$store.getters.AppX
      }
  },
  watch: {
    isInit() {
      this.viewer=window.viewer;
      this.initCoordinate();
    }
  },
  methods: {
    /**
     * 初始化坐标显示
     */
    initCoordinate() {
      const viewer = this.viewer;
      viewer.scene.globe.depthTestAgainstTerrain = true;
      const height_ = "";
      if (viewer) {
        const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
        handler.setInputAction((e) => {
          //更新操作时间
          //this.AppX.appConfig.lastSessionTime = new Date().getTime();

          const camera = viewer.scene.camera;
          const cameraHeight = Cesium.Cartographic.fromCartesian(
            camera.position
          ).height;
          if (Cesium.defined(cameraHeight)) {
            this.cameraHeight = "相机高度：" + Math.round(cameraHeight) + "米";
          }
          //检测鼠标是否按键，pickPosition与场景视图变化冲突。
          if (
            handler._buttonDown[0] ||
            handler._buttonDown[1] ||
            handler._buttonDown[2]
          ) {
            return;
          }
          const pos = this.viewer.scene.pickPosition(
            e.endPosition
          );
          if (Cesium.defined(pos)) {
            const geodetic = Cesium.Cartographic.fromCartesian(pos);
            const lon = Cesium.Math.toDegrees(geodetic.longitude);
            const lat = Cesium.Math.toDegrees(geodetic.latitude);
            const height = geodetic.height;
            this.coorText =
              "经度：" + lon.toFixed(6) + "°  纬度：" + lat.toFixed(6) + "°";
            this.coorheight = "高程：" + height.toFixed(2) + "米  ";
          }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        handler.setInputAction((e) => {
          const camera = this.viewer.scene.camera;
          const cameraHeight = Cesium.Cartographic.fromCartesian(
            camera.position
          ).height;
          if (Cesium.defined(cameraHeight)) {
            this.cameraHeight = "相机高度：" + Math.round(cameraHeight) + "米";
          }
          this.calculateScale();
        }, Cesium.ScreenSpaceEventType.WHEEL);
      }
    },
    calculateScale() {
      var geodesic = new Cesium.EllipsoidGeodesic();
      //计算DPI
      // var arrDPI = [];
      // var tmpNode = document.createElement("DIV");
      // tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
      // document.body.appendChild(tmpNode);
      // arrDPI[0] = parseInt(tmpNode.offsetWidth);
      // arrDPI[1] = parseInt(tmpNode.offsetHeight);

      let scene = this.viewer.scene;
      let width = scene.canvas.clientWidth;
      let height = scene.canvas.clientHeight;
      let left = scene.camera.getPickRay(
        new Cesium.Cartesian2((width / 2) | 0, height - 1)
      );
      let right = scene.camera.getPickRay(
        new Cesium.Cartesian2((1 + width / 2) | 0, height - 1)
      );
      let globe = scene.globe;
      let leftPosition = globe.pick(left, scene);
      let rightPosition = globe.pick(right, scene);
      let barWidth;
      let distanceLabel;
      if (!Cesium.defined(leftPosition) || !Cesium.defined(rightPosition)) {
        barWidth = undefined;
        distanceLabel = undefined;
        return;
      }
      let leftCartographic =
        globe.ellipsoid.cartesianToCartographic(leftPosition);
      let rightCartographic =
        globe.ellipsoid.cartesianToCartographic(rightPosition);
      geodesic.setEndPoints(leftCartographic, rightCartographic);
      let pixelDistance = geodesic.surfaceDistance;
      // Find the first distance that makes the scale bar less than 100 pixels.
      let BarWidth = 100;
      let distance = pixelDistance * BarWidth;

      if (Cesium.defined(distance)) {
        var label =
          distance >= 1000
            ? (distance / 1000).toFixed(2).toString() + " km"
            : distance.toFixed(0).toString() + " m";
        distanceLabel = label;
      } else {
        distanceLabel = "超出范围";
      }
      this.scaleText = distanceLabel;
    },
  },
};
</script>
<style lang="scss" scoped>
.widget-coordinate {
    
  $height: 46px;
  font-size: 1.125rem;
  position: absolute;
  font-family: Source Han Sans CN;
  bottom: 0;
  font-weight: 500;
  left: 0;
  color: #000;
  //background-color: rgba(0,0,0,0.6);
  z-index: 70;
  height: $height;
  width: 100%;
  .Geodetic {
    font-family: Source Han Sans CN;
    user-select: text !important;
    -moz-user-select: text !important;
    -webkit-user-select: text !important;
    -ms-user-select: text !important;
    line-height: $height;
  }
  .cameraHeight {
    font-family: Source Han Sans CN;
    line-height: $height;
  }
  .height {
    font-family: Source Han Sans CN;
    line-height: $height;
  }
  #scaleLabel {
    font-size: 0.875rem;
    font-family: Source Han Sans CN;
    text-align: center;
  }
  .scaleBar {
    font-family: Source Han Sans CN;
    position: relative;
    width: 100px;
    padding-top: 2px;
  }
  .scaleBar::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    border: 2px solid #000;
    height: 10px;
    width: 100%;
    border-top: none;
  }
}
</style>