显示label

wujingjing

2025-02-19 382631e067c6c402d86e163cbd8e7d50a4c17933

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/index.vue

@@ -4,24 +4,45 @@
                <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 class="flex flex-col mt-20">
         <div class="flex gap-2 flex-col">
            <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
            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 class="mt-auto mb-32 flex gap-2 flex-col">
            <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 class="size-8 rounded flex-center cursor-pointer bg-[#fcfcfc] font-thin" title="定位您的位置" @click="locationCurrent">
               <span v-if="locationLoading" class="ywifont ywicon !text-[26px] ywicon-loading1 animate-spin"></span>
               <span v-else class="ywifont ywicon !text-[26px] ywicon-dangqianweizhi"></span>
            </div>
            <div
               class="size-8 rounded flex-center cursor-pointer bg-[#fcfcfc] font-thin"
               title="适应窗口"
               @click="olMap.zoomToLayers"
            >
               <span class="ywifont ywicon !text-[22px] ywicon-zishiying"></span>
            </div>

         </div>
      </div>
      <div class="shadow h-full">
@@ -34,9 +55,20 @@
            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>
         <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 class="flex flex-col gap-2 translate-y-60"></div>
   </div>
</template>

@@ -49,9 +81,9 @@
import ThemeControl from './ThemeControl.vue';

import LayerControl from './LayerControl.vue';
const props = defineProps(['propertyMap', 'propertyConfigMap', 'olMap','isFullscreen']);
import { getCurrentPosition } from '/@/utils/brower';
const props = defineProps(['propertyMap', 'propertyConfigMap', 'olMap', 'isFullscreen']);
const activeMapToolPanel = ref<MapPanelTool>();


const fullScreenTitle = computed(() => (props.isFullscreen ? '退出全屏（Esc）' : '全屏展开'));
const fullScreenIcon = computed(() => (props.isFullscreen ? 'tuichuquanping' : 'fullscreen'));
@@ -86,9 +118,16 @@
   activeMapToolPanel.value = type;
};

const locationLoading = ref(false);
const locationCurrent = async () => {
   locationLoading.value = true;
   await props.olMap.locationCurrent().finally(() => {
      locationLoading.value = false;
   });
};
defineExpose({
   featureClick,
   setActivePanel
   setActivePanel,
});
</script>
<style scoped lang="scss"></style>