You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.5 KiB
65 lines
1.5 KiB
<template>
|
|
<div class="layer-switch">
|
|
<div class="btn">
|
|
<img class="icon" src="@/assets/map/layer.svg" alt="" @click="layerTreeChange" />
|
|
</div>
|
|
<div class="slider-line"></div>
|
|
<div class="btn">
|
|
<el-tooltip effect="dark" :content="is3DScene ? '三维模式' : '二维模式'" placement="right">
|
|
<img class="icon" src="@/assets/map/changeScene.svg" alt="" @click="handleChangeMode" />
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import * as SyCim from "sy-cesium-sdk";
|
|
|
|
defineOptions({
|
|
name: "MapLayerSwitch",
|
|
});
|
|
let is3DScene = ref(true);
|
|
let showTreeBox = ref(false);
|
|
const emits = defineEmits(["layerTreeChange"]);
|
|
function handleChangeMode() {
|
|
is3DScene.value = !is3DScene.value;
|
|
const mapSceneType = !is3DScene.value ? 2 : 3;
|
|
viewer?.changeSceneMode(mapSceneType);
|
|
let position = new SyCim.Position(113.27, 23.13, 600000, 0, -90, 0);
|
|
viewer?.flyToPosition(
|
|
position,
|
|
() => {
|
|
console.log("移动结束 >>>>> ");
|
|
},
|
|
1,
|
|
);
|
|
}
|
|
|
|
function layerTreeChange() {
|
|
showTreeBox.value = !showTreeBox.value;
|
|
emits("showChange", showTreeBox.value);
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.layer-switch {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 37px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.btn {
|
|
padding: 8px 12px;
|
|
.icon {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
}
|
|
.slider-line {
|
|
width: 1px;
|
|
height: 50%;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
</style>
|
|
|