| | |
| | | <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> |
| | | |
| | |
| | | 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> |