代码更新

surprise

2024-03-01 12075d0fa73d963ff5d6dbc4727fb95fb6084961

 src/components/bottomBtn.vue

@@ -1,14 +1,15 @@
<template>
  <div class="bottom_btn">
    <div class="btn_box">
      <span> 经度:{{lng }}</span>
    </div>
    <div class="btn_box">
      <span>纬度:{{lat }}</span>
    </div>
    <div class="btn_box">
      <span>高度:{{alt }}米</span>
    </div>
    <div
      v-show="mapFlag == '2D'"
      class="ChangeMap twoImg"
      @click="setMapImg('2D')"
    ></div>
    <div
      v-show="mapFlag != '2D'"
      class="ChangeMap threeImg"
      @click="setMapImg('3D')"
    ></div>
  </div>
</template>

@@ -21,37 +22,41 @@
  defineProps,
  defineEmits,
} from "vue";
const lng = ref(null);
const lat = ref(null);
const alt = ref(null);
const setMouseEvents = (res) => {
  if (res.type == "MOUSE_MOVE") {
    lng.value = res.longitude;
    lat.value = res.latitude;
    alt.value = res.altitude;
const mapFlag = ref("2D");

const setMapImg = (res) => {
  if (res == "2D") {
    mapFlag.value = "3D";
    earthCtrl.coreMap.scene.mode = SmartEarth.Cesium.SceneMode.SCENE2D;
  } else if (res == "3D") {
    mapFlag.value = "2D";
    earthCtrl.coreMap.scene.mode = SmartEarth.Cesium.SceneMode.SCENE3D;
  }
};
onMounted(() => {
  window.addMouseEvents = setMouseEvents;
});
onMounted(() => {});
</script>
<style lang="less" scoped>
.bottom_btn {
  position: absolute;
  bottom: 15px;
  left: 75px;
  display: flex;
  .btn_box {
    margin-right: 10px;
    background-size: 100% 100%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      color: #fff;
    }
  z-index: 39;
  /*  prettier-ignore */
  bottom: 68PX;
  /*  prettier-ignore */
  right: 70PX;

  .ChangeMap {
    /*  prettier-ignore */
    width: 30PX;
    /*  prettier-ignore */
    height: 30PX;
    /*  prettier-ignore */
    border: 1PX solid rgba(255, 255, 255, 0.1);
  }
  .twoImg {
    background: url("../assets/img/2D.png") no-repeat;
  }
  .threeImg {
    background: url("../assets/img/3D.png") no-repeat;
  }
}
</style>