<template>
|
<div class="flex">
|
<!-- <div class="size-2 border border-solid " >
|
<span class="ywifont ywicon ywicon-liebiao"></span>
|
</div> -->
|
|
<div class="flex flex-col gap-2 translate-y-20">
|
<div class="size-8 rounded flex-center cursor-pointer bg-[#fcfcfc] font-thin " :title="fullScreenTitle" @click="toggleFullScreen">
|
<span class="ywifont ywicon !text-[26px]" :class="[`ywicon-${fullScreenIcon}`]"></span>
|
</div>
|
<div
|
v-for="item in Object.keys(mapPanelToolMap)"
|
:key="item"
|
class="size-8 rounded flex-center cursor-pointer border border-solid border-[#494949] bg-[#fcfcfc]"
|
:class="{
|
'!bg-[#1676fd]': item === activeMapToolPanel,
|
'text-white': item === activeMapToolPanel,
|
'hover:text-[#1676fd]': item !== activeMapToolPanel,
|
'hover:border-[#1676fd]': item !== activeMapToolPanel,
|
}"
|
:title="mapPanelToolMap[item]"
|
@click="mapToolPanelClick(item as any)"
|
>
|
<span class="ywifont ywicon" :class="[`ywicon-${mapPanelToolMapIcon[item].name}`]"></span>
|
</div>
|
</div>
|
<div class="shadow h-full">
|
<PropertyPanel
|
ref="propertyPanelRef"
|
v-show="activeMapToolPanel === MapPanelTool.Property"
|
@close="propertyPanelClose"
|
:propertyMap="propertyMap"
|
:propertyConfigMap="propertyConfigMap"
|
class="p-3 w-[280px] h-full gap-1.5"
|
></PropertyPanel>
|
|
<LayerControl class="p-3 w-[280px] h-full gap-1.5" v-show="activeMapToolPanel === MapPanelTool.Layer" :olMap="olMap" @close="propertyPanelClose"></LayerControl>
|
<ThemeControl class="p-3 w-[280px] h-full gap-1.5" v-show="activeMapToolPanel === MapPanelTool.Theme" :olMap="olMap" @close="propertyPanelClose"></ThemeControl>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts" name="PanelTool">
|
import { computed, ref } from 'vue';
|
import { useTextOverflow } from '/@/hooks/useOverflow';
|
import PropertyPanel from './PropertyPanel.vue';
|
import { MapPanelTool, mapPanelToolMap, mapPanelToolMapIcon } from '../types';
|
import { useCompRef } from '/@/utils/types';
|
import ThemeControl from './ThemeControl.vue';
|
|
import LayerControl from './LayerControl.vue';
|
const props = defineProps(['propertyMap', 'propertyConfigMap', 'olMap','isFullscreen']);
|
const activeMapToolPanel = ref<MapPanelTool>();
|
|
|
const fullScreenTitle = computed(() => (props.isFullscreen ? '退出全屏（Esc）' : '全屏展开'));
|
const fullScreenIcon = computed(() => (props.isFullscreen ? 'tuichuquanping' : 'fullscreen'));
|
|
const emit = defineEmits(['toggleFullScreen']);
|
const mapToolPanelClick = (type: MapPanelTool) => {
|
activeMapToolPanel.value = activeMapToolPanel.value === type ? null : type;
|
switch (type) {
|
case MapPanelTool.Property:
|
break;
|
|
default:
|
break;
|
}
|
};
|
|
const toggleFullScreen = () => {
|
emit('toggleFullScreen');
|
};
|
const propertyPanelRef = useCompRef(PropertyPanel);
|
|
const propertyPanelClose = () => {
|
activeMapToolPanel.value = null;
|
};
|
|
const featureClick = (feature) => {
|
// if (activeMapToolPanel.value !== MapPanelTool.Property) return;
|
propertyPanelRef.value?.featureClick(feature);
|
};
|
|
const setActivePanel = (type: MapPanelTool) => {
|
activeMapToolPanel.value = type;
|
};
|
|
defineExpose({
|
featureClick,
|
setActivePanel
|
});
|
</script>
|
<style scoped lang="scss"></style>
|
