refactor(3d-situational-awareness): 将 MapControls 的 activeTool 属性设为 prop 可控。
将 `activeTool` 从内部引用 (`ref`) 更改为基于 `activeToolKey` 的计算属性,从而允许父组件控制活跃工具的状态,以提高复用性。
This commit is contained in:
parent
994b237ea4
commit
4da6b6c20b
@ -41,14 +41,23 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, computed } from "vue";
|
||||
import { MAP_TOOLS, DEVICE_WATCH } from "../../constants";
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
// 当前激活的工具
|
||||
activeToolKey: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
// 卫星设备观看状态
|
||||
const isWatchingDevice = ref(false);
|
||||
|
||||
// 当前激活的测量工具(默认激活模型对比)
|
||||
const activeTool = ref('modelCompare');
|
||||
// 当前激活的测量工具 - 使用computed从props获取
|
||||
const activeTool = computed(() => props.activeToolKey)
|
||||
|
||||
// 定义对外事件
|
||||
const emit = defineEmits(["device-watch", "tool-change"]);
|
||||
@ -105,15 +114,13 @@ const handleDeviceWatch = () => {
|
||||
*/
|
||||
const handleToolClick = (toolKey) => {
|
||||
// 点击同一个工具则取消激活
|
||||
if (activeTool.value === toolKey) {
|
||||
activeTool.value = null;
|
||||
} else {
|
||||
activeTool.value = toolKey;
|
||||
}
|
||||
console.log("切换地图工具:", toolKey);
|
||||
const newActiveState = activeTool.value === toolKey ? null : toolKey
|
||||
const isActive = newActiveState === toolKey
|
||||
|
||||
console.log("切换地图工具:", toolKey, "激活状态:", isActive);
|
||||
emit("tool-change", {
|
||||
tool: toolKey,
|
||||
active: activeTool.value === toolKey,
|
||||
active: isActive,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
<!-- 延迟渲染确保目标元素已存在 -->
|
||||
<Teleport to="#sa-controls" v-if="isMounted">
|
||||
<MapControls
|
||||
:active-tool-key="activeToolKey"
|
||||
@tool-change="handleToolChange"
|
||||
@device-watch="handleDeviceWatch"
|
||||
/>
|
||||
@ -19,6 +20,15 @@ import { ref, onMounted } from 'vue'
|
||||
import { MapViewport } from '@/map'
|
||||
import MapControls from './MapControls.vue'
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
// 当前激活的工具键
|
||||
activeToolKey: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 向外抛出的事件
|
||||
* @event tool-change - 地图工具变化事件,包含 { tool: string, active: boolean }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user