4.0/src/renderer/components/dialog/flyToLocation.vue

<template>
  <div class="flyToLocation" id="flyToLocationPopup">
    <div class="title" id="titles">
      <span class="content">
        坐标定位
        <span class="closeBox">
          <span @click="cancel">✕</span>
        </span>
      </span>
    </div>
    <div v-if="is84 == 'EPSG:4326'">
      <div class="name" style="height: 0;">
        <el-divider></el-divider>
      </div>
      <div class="name">
        <span>经度：</span>
        <el-input type="number" size="small" class="public" @input="(val) => lngNum(val)" v-model="lng" :max="180"
          :min="-180" />
      </div>
      <div class="name">
        <span>纬度：</span>
        <el-input type="number" size="small" class="public" @input="(val) => latNum(val)" v-model="lat" :max="90"
          :min="-90" />
      </div>
      <div class="name">
        <span>定位：</span>
        <el-button size="small" @click="submit">
          <i class="el-icon-location-outline el-icon--left"></i>
          跳转</el-button>
      </div>
      <div class="name" style="height: 0;">
        <el-divider></el-divider>
      </div>
      <!--      <div class="name">
        <span>高度：</span>
        <input class="public" @input="a" v-model="alt" />
      </div>-->
    </div>
    <div v-else>
      <div class="name" style="height: 0;">
        <el-divider></el-divider>
      </div>
      <div class="name">
        <span>x：</span>
        <input type="number" class="public" v-model="x" />
      </div>
      <div class="name">
        <span>y：</span>
        <input type="number" class="public" v-model="y" />
      </div>
      <div class="name">
        <span>定位：</span>
        <el-button size="small" @click="submit">
          <i class="el-icon-location-outline el-icon--left"></i>
          跳转</el-button>
      </div>
      <div class="name" style="height: 0;">
        <el-divider></el-divider>
      </div>
      <!--      <div class="name">
        <span>高度：</span>
        <input class="public" @input="a" v-model="alt" />
      </div>-->
    </div>
    <div class="btn">
      <el-button size="small" type="danger" @click="cancel">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { setMove } from "../myHeaderAll/systemPopup/js/moveDiv";

export default {
  name: "flyToLocation",
  data() {
    return {
      lng: 0,
      lat: 0,
      alt: null,
      x: 0,
      y: 0,
      is84: "",
    };
  },
  mounted() {
    setMove("titles", "flyToLocationPopup");
  },

  methods: {
    lngNum(val) {
      // 最大只能输入数字180
      if (val > 180) {
        this.lng = 180;
        return;
      }
      // 最小只能输入数字-180
      if (val < -180) {
        this.lng = -180;
        return;
      }
    },
    latNum(val) {
      // 最大只能输入数字90
      if (val > 90) {
        this.lat = 90;
        return;
      }
      // 最小只能输入数字-90
      if (val < -90) {
        this.lat = -90;
        return;
      }
    },

    cancel() {
      console.log();
      this.$changeComponentShow(".flyToLocationBox", false);
      this.lng = 0;
      this.lat = 0;
      if (window.earthPlaceMap) {
        window.earthPlaceMap.forEach((item) => {
          item.remove();
        });
        window.earthPlaceMap.clear();
      }
    },
    init(data) {
      console.log("init", data);
      this.is84 = data;
    },
    submit() {
      let positions;

      if (window.earthPlaceMap === undefined) {
        window.earthPlaceMap = new Map();
      }
      if (window.earthPlaceMap.size) {
        window.earthPlaceMap.forEach((item) => {
          item.remove();
        });
        window.earthPlaceMap.clear();
      }
      if (this.is84 == "EPSG:4326") {
        console.log(this.lng, this.lat);
        if (this.lng === '' || this.lat === '') {
          this.$message.warning("经度纬度不能为空");
          return;
        }
        if (Number(this.lng) !== NaN && Number(this.lat) !== NaN) {
          // let id = new YJ.Tools().randomString();
          positions = { lng: this.lng, lat: this.lat, alt: this.alt };
        }
      } else {
        if (Number(this.x) !== NaN && Number(this.y) !== NaN) {
          let tool = new YJ.Tools();
          let result = tool.convert(
            [{ x: this.x, y: this.y }],
            this.$store.state.systemSetting.system.coordinate,
            "EPSG:4326"
          );
          let point = result.points[0];
          positions = { lng: point.x, lat: point.y, alt: point.z };
        }
      }
      let id = "12333fsfsajkhdjwu8877";
      let params = {
        id,
        positions,
        billboard: {
          show: true,
          image:
            "http://localhost:" +
            window.staticPort +
            "/" +
            "GEMarker1/A-location.png",
        },
        show: true,
        label: {
          show: true,
          text: "目标点",
          // fontSize: 6,
          color: "#FFF200FF",
        },
        heightMode: 2
      };
      let entity = new YJ.Obj.BillboardObject(window.Earth1, params);
      entity.entity.billboard.heightReference = 1;
      entity.entity.label.heightReference = 1;
      window.earthPlaceMap.set(id, entity);
      entity.flyTo({
        orientation: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-89.0),
          roll: Cesium.Math.toRadians(0.0),
        },
      })
    },
  },
};
</script>

<style lang="scss">
.flyToLocation {
  width: 15vw;
  top: 12vh;
  left: 14vh;
  border: 1.5px solid;
  backdrop-filter: blur(2px);
  background: linear-gradient(0deg, #00ffff33 0%, #00ffff00 100%),
    rgba(0, 0, 0, 0.6);
  position: absolute;
  color: #fff;
  border-image: linear-gradient(to bottom,
      rgb(0, 255, 255) 6.25%,
      rgb(0, 200, 255) 100%) 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .el-input__inner{
    padding: 0;
    padding-left: 20px;
  }
  .el-divider--horizontal {
    margin: 0;
  }

  .el-divider {
    background-color: rgba(204, 204, 204, 0.2);
  }

  .closeBox {
    right: 0;
    top: -1px;
    position: absolute;
    display: inline-block;
    width: 28px;
    height: 26px;
    border-radius: 0 0 0 90%;
    background: #00ffff8f;

    &>span {
      font-size: 18px;
      position: absolute;
      right: 5px;
      cursor: pointer;
    }
  }

  .title {
    width: 100%;
    height: 30px;
    text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
    font-family: 'alimamashuheiti';

    &:hover {
      cursor: move;
    }

    .content {
      width: 93%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;

      img {
        width: 24px;
        cursor: pointer;
      }
    }
  }

  .name {
    height: 30px;
    margin: 10px 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    color: rgba(230, 247, 255, 1);

    .el-button {
      color: #fff;
      background: rgba(0, 255, 255, 0.2);
      border-color: rgba(0, 255, 255, .5);
    }
  }

  .public {
    width: 10vw;
    height: 100%;
    outline: 0;
    // background: rgba(0, 0, 0, 0.4);
    // padding-left: 6px;
    // box-sizing: border-box;
    // color: white;
    // border-radius: 5px;
    // margin-left: 5px;
    // border: 1px solid rgba(0, 255, 255, 0.5);

    .el-input__inner {
      background-color: rgba(0, 0, 0, 0.4);
      border-color: rgba(0, 255, 255, .5);
      color: white;
    }
  }

  .btn {
    margin: 10px 0;
    margin-top: 25px;
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    text-align: right;
    padding-right: 20px;

    .el-button {
      color: #fff;
      background: rgba(0, 255, 255, 0.2);
      border-color: rgba(0, 255, 255, .5);
    }

    .space {
      margin: 0 25px;
    }
  }
}

.flyToLocation::after {
  display: block;
  position: absolute;
  content: "";
  left: -1.5px;
  top: -6px;
  width: 70.5px;
  height: 6px;
  opacity: 1;
  background: aqua;
  clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 6px, 0 6px);
}
</style>