月球大数据地理空间分析展示平台-【前端】-月球2期前端
Surpriseplus
2023-06-06 b035823c711d43902a06838065598f4f805ab408
src/components/bottomBtn.vue
@@ -1,6 +1,17 @@
<template>
  <div class="bottom_btn">
    <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>
@@ -13,31 +24,35 @@
  defineProps,
  defineEmits,
} from "vue";
const lng = ref(null);
const lat = ref(null);
const alt = ref(null);
const setMouseEvents = (res) => {};
onMounted(() => {
  window.addMouseEvents = setMouseEvents;
});
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(() => {});
</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;
    }
  bottom: 68px;
  right: 70px;
  .ChangeMap {
    width: 30px;
    height: 30px;
    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>