feat: 冰雪阻断事件大屏

packages/screen/src/views/cockpit/api/commonHttp.js

@@ -0,0 +1,12 @@
+import { request } from '@shared/utils/request'
+
+// 获取业务基础地图
+export function getBusinessBaseMapLayer() {
+    return request({
+        url: '/snow-ops-platform/dataDirectory/queryCatalog',
+        method: 'GET',
+        params: {
+            pcatalog: 'DDT'
+        }
+    })
+}

packages/screen/src/views/cockpit/components/CockpitLayout.vue

@@ -26,7 +26,7 @@
       </div>
 
       <!-- 图例工具栏 -->
-      <LegendToolbar class="legend-toolbar" @marker-toggle="handleLegendMarkerToggle" />
+      <LegendToolbar class="legend-toolbar" :legendKeys="legendKeys" @marker-toggle="handleLegendMarkerToggle" />
 
       <!-- 应急力量详情提示框 -->
       <EmergencyForceTooltip
@@ -42,11 +42,13 @@
 </template>
 
 <script setup>
-import { ref, onBeforeUnmount } from 'vue'
+import { ref, onBeforeUnmount, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import useMapStore from '@/map/stores/mapStore'
 import { fetchEmergencyForceList } from '@/views/cockpit/api/emergencyForce'
 import { useEmergencyForceInteraction } from '../composables/useEmergencyForceInteraction'
+import { useMapBase } from '../composables/useMapBase'
+import { useMapImageMark } from '../composables/useMapImageMark'
 
 import PageHeader from './PageHeader.vue'
 import WeatherWarning from './WeatherWarning.vue'
@@ -58,6 +60,11 @@ import LegendToolbar from './LegendToolbar.vue'
 import EmergencyForceTooltip from './EmergencyForceTooltip.vue'
 import emergencyForceMarkerIcon from '../assets/legendTool/应急力量icon定位.png'
 
+onMounted(()=>{
+  // 加载地图业务底图 并 聚焦中心点
+  mapBase.loadBaseData()
+})
+
 // ==================== 常量定义 ====================
 
 /**
@@ -86,6 +93,16 @@ const emergencyForceInteraction = useEmergencyForceInteraction(mapStore, {
   flyDistance: 500
 })
 
+/**
+ * 加载地图的业务底图与聚焦中心点
+ */
+const mapBase = useMapBase(mapStore)
+
+/**
+ * 标记图hook，搭配lengendToolbar使用, 作用是点击某个图例项时，在地图上显示所有该图例的图
+ */
+const mapImageMark = useMapImageMark(mapStore)
+
 /**
  * 应急力量数据加载状态
  */
@@ -111,6 +128,12 @@ const emergencyForceCache = ref({
  */
 const emergencyForceAbortController = ref(null)
 
+/**
+ * 工具图标列表通过key关联
+ * key具体有哪些，请根据LegendToolbar.vue中定义的defaultLegendItems
+ */
+const legendKeys = ref(['serviceFacility','riskRoad','blockEvent','weatherAlert','emergencyForce'])
+
 // ==================== 工具函数 ====================
 
 /**
@@ -401,6 +424,9 @@ const renderEmergencyForcePoints = async (entityService, points, markerIcon) =>
 const handleLegendMarkerToggle = async ({ key, active, markerIcon }) => {
   // 只处理应急力量图例项
   if (key !== 'emergencyForce') {
+
+    mapImageMark.toggleMark({ key, active, markerIcon })
+
     return
   }
 

packages/screen/src/views/cockpit/components/ImageMarkTooltip/ImageMarkTooltip.vue

@@ -0,0 +1,333 @@
+<template>
+  <transition name="fade">
+    <div
+      v-if="visible && position"
+      class="common-tooltip"
+      :style="{
+        left: `${position.x}px`,
+        top: `${position.y - 20}px`
+      }"
+    >
+
+      <!-- 关闭按钮 -->
+      <button
+        class="close-button"
+        type="button"
+        aria-label="关闭"
+        @click="handleClose"
+      >
+        ×
+      </button>
+
+      <!-- 内容区域 -->
+      <div class="tooltip-content">
+        <component v-if="hasData" :is="contentMap[data.mapData.layer]" />
+
+        <!-- 如果没有数据 -->
+        <div v-if="!hasData" class="no-data">
+          暂无详细信息
+        </div>
+      </div>
+
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading-overlay">
+        <div class="loading-spinner"></div>
+        <span>加载中...</span>
+      </div>
+
+      <!-- 错误状态 -->
+      <div v-if="error" class="error-message">
+        {{ error }}
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import serviceFacility from './serviceFacility.vue'
+import riskRoad from './riskRoad.vue'
+import weatherAlert from './weatherAlert.vue'
+import blockEvent from './blockEvent.vue'
+
+/**
+ * 应急力量详情提示框组件
+ * 使用 HTML Overlay 方式显示在地图标记点上方
+ */
+
+// ==================== Props ====================
+
+const props = defineProps({
+  /**
+   * 是否显示提示框
+   */
+  visible: {
+    type: Boolean,
+    default: false
+  },
+
+  /**
+   * 提示框位置（屏幕坐标）
+   * @type {{ x: number, y: number }}
+   */
+  position: {
+    type: Object,
+    default: null
+  },
+
+  /**
+   * 详情数据
+   * @type {{ qxmc?: string, yjllpz?: string, wzQtwz?: string }}
+   */
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false
+  },
+
+  /**
+   * 错误信息
+   */
+  error: {
+    type: String,
+    default: ''
+  }
+})
+
+// ==================== State ====================
+const contentMap = ref({
+  // 养护站内容
+  serviceFacility,
+  // 高海拔道路
+  riskRoad,
+  // 阻断事件
+  blockEvent,
+  // 气象预警
+  weatherAlert,
+})
+
+// ==================== Emits ====================
+
+const emit = defineEmits(['close'])
+
+// ==================== Computed ====================
+
+/**
+ * 是否有有效数据
+ */
+const hasData = computed(() => {
+  return !!props.data
+})
+
+// ==================== Methods ====================
+
+/**
+ * 处理关闭按钮点击
+ */
+const handleClose = () => {
+  emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/mixins.scss' as *;
+
+.common-tooltip {
+  // CSS 变量：控制背景图片尺寸和内边距
+  // 注意：修改图片资源时，需要同步更新这些高度值以匹配实际 PNG 尺寸
+  --tooltip-top-height: 68px;
+  --tooltip-bottom-height: 68px;
+  --tooltip-side-padding: 24px;
+  --tooltip-body-padding: 16px;
+
+  position: absolute;
+  z-index: 9999;
+  pointer-events: auto;
+
+  // 居中并置于标记点上方
+  transform: translate(-50%, calc(-100% - 20px));
+
+  min-width: 200px;
+  max-width: 300px;
+
+  // 上下 padding 需要容纳顶部和底部图片 + 内容间距
+  // 左右 padding 保持一致
+  padding: calc(var(--tooltip-top-height))
+    var(--tooltip-side-padding)
+    calc(var(--tooltip-bottom-height));
+
+  // 三段式可拉伸背景：顶部固定高度、中部可拉伸、底部固定高度
+  background-image:
+    url('@/views/cockpit/assets/emergencyForceTooltip/top.png'),
+    url('@/views/cockpit/assets/emergencyForceTooltip/bottom.png'),
+    url('@/views/cockpit/assets/emergencyForceTooltip/middle.png');
+
+  // 顶部/底部/中部都不重复，中部通过 background-size 拉伸填充
+  background-repeat: no-repeat, no-repeat, no-repeat;
+
+  // 背景定位：顶部居中对齐顶边，底部居中对齐底边
+  // 中部略向上偏移 1px，结合高度 +2px 在上下各覆盖 1px 避免子像素渲染缝隙
+  background-position:
+    center top,
+    center bottom,
+    center calc(var(--tooltip-top-height) - 1px);
+
+  // 背景尺寸：顶部/底部高度固定
+  // 中部填充剩余空间并增加 2px，在上下各多覆盖约 1px 避免间隙
+  background-size:
+    100% var(--tooltip-top-height),
+    100% var(--tooltip-bottom-height),
+    100% calc(100% - var(--tooltip-top-height) - var(--tooltip-bottom-height) + 2px);
+
+  // 移除原有的 border 和 border-radius，使用图片背景
+  border: none;
+
+  // 保留毛玻璃效果和阴影以增强视觉层次
+  // backdrop-filter: blur(12px);
+  // box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
+
+  color: #fff;
+  font-size: 14px;
+  line-height: 1.6;
+
+  // 小箭头（指向标记点）
+  // &::after {
+  //   content: '';
+  //   position: absolute;
+  //   bottom: -10px;
+  //   left: 50%;
+  //   transform: translateX(-50%);
+  //   width: 0;
+  //   height: 0;
+  //   border-left: 10px solid transparent;
+  //   border-right: 10px solid transparent;
+  //   border-top: 10px solid rgba(71, 186, 255, 0.4);
+  // }
+}
+
+// 关闭按钮 - 仅作为透明点击热区，视觉由背景图中的关闭图标承载
+.close-button {
+  position: absolute;
+  top: 18px;
+  right: 2px;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+
+  // 透明化所有视觉元素，仅保留点击功能
+  border: none;
+  background: transparent;
+  color: transparent;
+  font-size: 0;
+  line-height: 1;
+  box-shadow: none;
+  cursor: pointer;
+
+  // 为键盘用户提供可见的焦点轮廓（仅在键盘导航时显示）
+  &:focus-visible {
+    outline: 2px solid rgba(255, 255, 255, 0.8);
+    outline-offset: 2px;
+  }
+}
+
+// 内容区域
+.tooltip-content {
+  padding-right: 1.5rem; // 为关闭按钮留出空间
+}
+
+// 信息项
+.info-item {
+  margin-bottom: 0.5rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .label {
+    color: rgba(255, 255, 255, 0.7);
+    margin-right: 0.5rem;
+  }
+
+  .value {
+    color: #fff;
+    font-weight: 500;
+  }
+}
+
+// 无数据提示
+.no-data {
+  color: rgba(255, 255, 255, 0.5);
+  text-align: center;
+  padding: 0.5rem 0;
+}
+
+// 加载状态
+.loading-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+
+  // 使用半透明背景，让背景图片纹理仍然可见
+  background: rgba(0, 0, 0, 1);
+  backdrop-filter: blur(12px);
+
+  span {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 14px;
+  }
+}
+
+// 加载动画
+.loading-spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid rgba(71, 186, 255, 0.2);
+  border-top-color: rgba(71, 186, 255, 1);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// 错误信息
+.error-message {
+  color: #ff6b6b;
+  font-size: 13px;
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  background: rgba(255, 107, 107, 0.1);
+  border: 1px solid rgba(255, 107, 107, 0.3);
+  border-radius: 0.25rem;
+}
+
+// 淡入淡出动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.fade-enter-from {
+  opacity: 0;
+  transform: translate(-50%, calc(-100% - 10px));
+}
+
+.fade-leave-to {
+  opacity: 0;
+  transform: translate(-50%, calc(-100% - 30px));
+}
+</style>

packages/screen/src/views/cockpit/components/ImageMarkTooltip/blockEvent.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="">
+        test
+    </div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+</script>
+<style scoped lang="scss">
+@use '@/styles/mixins.scss' as *;
+</style>

packages/screen/src/views/cockpit/components/ImageMarkTooltip/index.js

@@ -0,0 +1,78 @@
+import { createVNode, render } from 'vue'
+import ImageMarkTooltip from './ImageMarkTooltip.vue'
+
+class ImageMarkTooltipUI {
+  constructor() {
+    this.instance = null
+    this.container = null
+    this.entity = null
+    this.root = null
+  }
+
+  // 显示 tooltip
+  show(options = {}) {
+    // 销毁之前的实例
+    this.close()
+
+    // 创建容器
+    this.container = document.createElement('div')
+    this.container.className = 'tooltip-service-container'
+    this.root = document.querySelector('.cockpit-main')
+    this.root.appendChild(this.container)
+
+    this.entity = options.entity
+
+    // 创建 VNode
+    const vnode = createVNode(ImageMarkTooltip, {
+      visible: true,
+      position: options.position || { x: 0, y: 0 },
+      data: options.data || {},
+      loading: options.loading || false,
+      error: options.error || '',
+      onClose: () => {
+        this.close()
+      }
+    })
+
+    // 渲染到容器
+    render(vnode, this.container)
+    this.instance = vnode.component
+    return this.instance
+  }
+
+  updatePosition(position) {
+    if (this.instance) {
+      this.instance.props.position = position
+      this.instance.update()
+    }
+  }
+
+  // 更新 tooltip 内容
+  update(options) {
+    if (this.instance) {
+      this.instance.props = {
+        ...this.instance.props,
+        ...options
+      }
+    }
+  }
+
+  // 关闭 tooltip
+  close() {
+    if (this.container) {
+      render(null, this.container)
+      this.root.removeChild(this.container)
+      this.container = null
+      this.instance = null
+    }
+  }
+}
+
+// 创建单例实例
+const instance = new ImageMarkTooltipUI()
+
+export const CommonTooltip = instance
+
+export const newImageMarkTooltip = () => {
+  return new ImageMarkTooltipUI()
+}

packages/screen/src/views/cockpit/components/ImageMarkTooltip/riskRoad.vue

@@ -0,0 +1,10 @@
+<template>
+    <div class="tool-tip-content">
+    </div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+</script>
+<style scoped lang="scss">
+@use '@/styles/mixins.scss' as *;
+</style>

packages/screen/src/views/cockpit/components/ImageMarkTooltip/serviceFacility.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="content">
+        <div v-if="data.qxmc" class="info-item">
+            <span class="label">区县:</span>
+            <span class="value">{{ data.qxmc }}</span>
+        </div>
+
+        <div v-if="data.yjllpz" class="info-item">
+            <span class="label">应急力量配置:</span>
+            <span class="value">{{ data.yjllpz }}</span>
+        </div>
+
+        <div v-if="data.wzQtwz" class="info-item">
+            <span class="label">物资:</span>
+            <span class="value">{{ data.wzQtwz }}</span>
+        </div>
+    </div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+</script>
+<style scoped lang="scss">
+@use '@/styles/mixins.scss' as *;
+</style>

packages/screen/src/views/cockpit/components/ImageMarkTooltip/weatherAlert.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="">
+        test
+    </div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+</script>
+<style scoped lang="scss">
+@use '@/styles/mixins.scss' as *;
+</style>

packages/screen/src/views/cockpit/components/LegendToolbar.vue

@@ -76,6 +76,7 @@ import blockEventMarkerIcon from '../assets/legendTool/阻断事件icon定位.pn
 import emergencyForceIcon from '../assets/legendTool/应急力量icon.png'
 import emergencyForceMarkerIcon from '../assets/legendTool/应急力量icon定位.png'
 import weatherAlertIcon from '../assets/legendTool/气象预警icon.png'
+import weatherAlertMarkerIcon from '../assets/legendTool/气象预警icon定位.png'
 
 // 默认图例项配置（包含普通图标和地图定位图标）
 const defaultLegendItems = [
@@ -84,12 +85,12 @@ const defaultLegendItems = [
   { key: 'trafficMonitor', label: '交调', icon: trafficMonitorIcon, markerIcon: trafficMonitorMarkerIcon },
   { key: 'bridge', label: '桥梁', icon: bridgeIcon, markerIcon: bridgeMarkerIcon },
   { key: 'tunnel', label: '隧洞', icon: tunnelIcon, markerIcon: tunnelMarkerIcon },
-  { key: 'serviceFacility', label: '服务设施', icon: serviceFacilityIcon, markerIcon: serviceFacilityMarkerIcon },
+  { key: 'serviceFacility', label: '养护站', icon: serviceFacilityIcon, markerIcon: serviceFacilityMarkerIcon },
-  { key: 'riskRoad', label: '风险路段', icon: riskRoadIcon, markerIcon: riskRoadMarkerIcon },
+  { key: 'riskRoad', label: '高海拔路段', icon: riskRoadIcon, markerIcon: riskRoadMarkerIcon },
   { key: 'hazardPoint', label: '涉灾隐患点', icon: hazardPointIcon, markerIcon: hazardPointMarkerIcon },
   { key: 'blockEvent', label: '阻断事件', icon: blockEventIcon, markerIcon: blockEventMarkerIcon },
   { key: 'emergencyForce', label: '应急力量', icon: emergencyForceIcon, markerIcon: emergencyForceMarkerIcon },
-  { key: 'weatherAlert', label: '气象预警', icon: weatherAlertIcon, markerIcon: weatherAlertIcon }
+  { key: 'weatherAlert', label: '气象预警', icon: weatherAlertIcon, markerIcon: weatherAlertMarkerIcon }
 ]
 
 // 定义 props
@@ -103,6 +104,14 @@ const props = defineProps({
     default: null
   },
 
+  /**
+   * 根据key显示对应图例
+   */
+  legendKeys: {
+    type: Array,
+    default: null
+  },
+
   /**
    * Marker 数据配置（可选）
    * 如果提供，将在事件中传递完整的 marker 数据
@@ -135,10 +144,10 @@ const props = defineProps({
    * 兼容旧版：标记点切换回调函数
    * @deprecated 推荐使用 @marker-toggle 事件
    */
-  onMarkerToggle: {
+  // onMarkerToggle: {
-    type: Function,
+  //   type: Function,
-    default: null
+  //   default: null
-  }
+  // }
 })
 
 // 定义 emits
@@ -146,6 +155,13 @@ const emit = defineEmits(['marker-toggle', 'clear', 'update:modelValue', 'collap
 
 // 计算图例项配置（支持自定义）
 const computedLegendItems = computed(() => {
+  if(props.legendKeys && props.legendKeys.length > 0) {
+    return props.legendKeys.map(key => {
+      const item = defaultLegendItems.find(item => item.key === key)
+      return item
+    })
+  }
+
   return props.legendItems && props.legendItems.length > 0
     ? props.legendItems
     : defaultLegendItems
@@ -260,7 +276,6 @@ const handleItemClick = (key) => {
   // 构建并发送事件
   const payload = buildPayload(key, newIsActive)
   emit('marker-toggle', payload)
-
   // 兼容旧版 props 回调
   if (props.onMarkerToggle) {
     props.onMarkerToggle(

packages/screen/src/views/cockpit/composables/ImageMarkData.js

@@ -0,0 +1,99 @@
+import { newImageMarkTooltip } from '../components/ImageMarkTooltip'
+
+// 专门用于绘制图片的api数据类
+export default class ImageMarkData {
+    key = null
+    markerIcon = null
+    api = null
+    // 提示框实例，当鼠标移入或者点击图例时，需要获取到该实例
+    tooltip = null
+    onResponse = null
+    cacheData = null
+    expiresAt = null
+    abortController = null
+    /**
+     * 60秒内重复点击使用缓存数据，减少服务器压力
+     */
+    cacheTime = 60 * 1000
+
+    constructor({ api, tooltip, onResponse }) {
+        this.api = api
+        this.response = onResponse
+        // 初始化提示框
+        this.tooltip = tooltip || newImageMarkTooltip()
+    }
+
+    getCache = () => {
+        // 检查缓存是否有效
+        if (
+            this.cacheData?.length &&
+            this.expiresAt > Date.now()
+        ) {
+            return this.cacheData
+        }
+    }
+
+    request = async (params) => {
+        // 首先查看缓存是否可用
+        const cacheData = this.getCache()
+        if (cacheData) return cacheData
+
+        const controller = this.createAbortController()
+        const config = {}
+        if (controller) config.signal = controller.signal
+        let res = null
+        try {
+            res = await this.api(params, config)
+        } catch (error) {
+            console.error('请求失败: ', error)
+        } finally {
+            let data = null
+            if (this.response) data = this.response(res)
+            else data = this.commonOnResponse(res)
+
+            this.cacheData = data
+            this.expiresAt = Date.now() + this.cacheTime
+
+            return data
+        }
+    }
+
+    createAbortController = () => {
+        if (typeof AbortController === 'undefined') {
+            console.warn('当前环境不支持 AbortController')
+            return null
+        }
+        return new AbortController()
+    }
+
+    cancelRequest = () => {
+        if (this.abortController) {
+            try {
+                this.abortController.abort()
+            } catch (error) {
+                this.console.warn('取消请求失败', error)
+            } finally {
+                this.abortController = null
+            }
+        }
+    }
+
+    // 通用的响应处理
+    commonOnResponse = (res) => {
+        if (res?.success) {
+            res.data = res.data.slice(0, 2)
+            const dataList = res.data.map((item) => {
+                item.mapData = {
+                    id: this.key + '-' + item.rid,
+                    layerId: this.key,
+                    position: [item.jd, item.wd, 0],
+                    image: this.markerIcon
+                }
+                return item
+            })
+            this.data = dataList
+            return dataList
+        }
+        return []
+    }
+}

packages/screen/src/views/cockpit/composables/useMapBase.js

@@ -0,0 +1,37 @@
+import { getBusinessBaseMapLayer } from '@/views/cockpit/api/commonHttp.js'
+
+// 当前页面的最基础地图服务
+// 主要是加载地图底图
+export const useMapBase = (mapStore) => {
+
+    const loadBusinessBaseMapLayer = async () => {
+        const layerService = mapStore.services().layer
+        const res = await getBusinessBaseMapLayer()
+        const data = [...res]
+        mapStore.baseMapGroups = data
+        for (const item of data) {
+            const layers = mapStore.getBaseMapLayersForGroup(item.Attribute?.rid || item.Rid)
+            for (const layerConfig of layers) {
+                const layer = {
+                    id: layerConfig.id,
+                    type: layerConfig.type,
+                    url: layerConfig.url,
+                    meta: layerConfig.meta,
+                }
+                await layerService.addLayer(layer)
+            }
+        }
+
+
+    }
+
+    const loadBaseData = () => {
+        setTimeout(() => {
+            loadBusinessBaseMapLayer()
+        }, 0)
+    }
+
+    return {
+        loadBaseData
+    }
+}

packages/screen/src/views/cockpit/composables/useMapImageMark.js

@@ -0,0 +1,177 @@
+import { fetchEmergencyForceList } from '@/views/cockpit/api/emergencyForce'
+
+import ImageMarkData from './ImageMarkData'
+import * as Cesium from 'cesium'
+
+/**
+ *  当前业务下的地图服务
+ *  主要是涉及需要调用后端服务获得地图数据
+ * */
+
+export const useMapImageMark = (mapStore) => {
+
+    // mapStore准备就绪进行初始化
+    mapStore.onReady(() => init())
+
+    // 接口服务映射
+    const imageMarkMap = {
+        serviceFacility: new ImageMarkData({
+            api: fetchEmergencyForceList,
+        }),
+        riskRoad: new ImageMarkData({
+            api: fetchEmergencyForceList,
+        }),
+        blockEvent: new ImageMarkData({
+            api: fetchEmergencyForceList,
+        }),
+        weatherAlert: new ImageMarkData({
+            api: fetchEmergencyForceList,
+        })
+    }
+
+    let entityService
+    let viewer
+    let handler
+
+    const init = () => {
+        entityService = mapStore.services().entity
+        viewer = mapStore.getViewer()
+
+        // 事件注册
+        handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
+
+        // 点击事件
+        handler.setInputAction(function (event) {
+            const pickedFeature = viewer.scene.pick(event.position);
+            if (pickedFeature?.id) {
+                const entity = pickedFeature.id
+                const data = entity.properties.originalData.getValue()
+                const imageMarkData = imageMarkMap[data.mapData.layerId]
+                imageMarkData.tooltip.show({
+                    data,
+                    entity,
+                    position: getScreenPosition(entity)
+                })
+            }
+
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+        // 帧渲染函数，也就是显示器的每一帧都会执行
+        // 地图拖动与放大的监控，需要更新各个tooltips的位置, 通过消息来通知
+        viewer.scene.postRender.addEventListener(() => {
+            for(const key in imageMarkMap) {
+                const imageMarkData = imageMarkMap[key]
+                const entity = imageMarkData.tooltip.entity
+                if(!entity) continue
+                imageMarkData.tooltip.updatePosition(getScreenPosition(entity))
+            }
+        })
+    }
+
+
+
+    /**
+     * 绘制各个地图标，例如点击LengendItem的某一项，就会显示对应的图标列表
+     */
+    const drawImageEntities = async (dataList) => {
+        for (const item of dataList) {
+            const mapData = item.mapData
+            entityService.addBillboard({
+                id: mapData.id,
+                layerId: mapData.layerId,
+                position: mapData.position,
+                image: mapData.image,
+                width: mapData.width || 44,
+                height: mapData.height || 44,
+                clampToGround: true,
+                properties: { originalData: item }
+            })
+        }
+    }
+
+    /*
+    * 清除某个图层里的实体
+    */
+    const clearLayerEntity = (layerId) => {
+        entityService.clearLayerEntities(layerId)
+        const imageMarkData = imageMarkMap[layerId]
+        if (!imageMarkData) return
+        imageMarkData.tooltip.close()
+    }
+
+    /**
+     * 根据图标名称请求后台服务，动态加载图标列表
+     */
+    const loadDynamicMark = async ({ key, markerIcon, params }) => {
+        const imageMarkData = imageMarkMap[key]
+        if (!imageMarkData) return
+        imageMarkData.markerIcon = markerIcon
+        imageMarkData.key = key
+        const dataList = await imageMarkData.request(params)
+
+        drawImageEntities(dataList)
+    }
+
+    /**
+     * 显示/隐藏地图标
+     */
+    const toggleMark = async ({ key, active, markerIcon, params }) => {
+        const imageMarkData = imageMarkMap[key]
+
+        if (!active) {
+            clearLayerEntity(key)
+            if (imageMarkData) imageMarkData.cancelRequest()
+            return
+        }
+
+        loadDynamicMark({ key, markerIcon, params })
+    }
+
+    /**
+     * 获得该实体位于屏幕的位置，用于html元素进行定位使用
+     */
+    const getScreenPosition = (entity) => {
+
+        try {
+            const position = entity.position?.getValue(Cesium.JulianDate.now())
+            if (!position) return
+
+            // 处理 clampToGround 实体
+            // 对于使用 CLAMP_TO_GROUND 的 billboard，需要获取实际的地形高度
+            let clampedPosition = position
+
+            // 转换为地理坐标
+            const cartographic = Cesium.Cartographic.fromCartesian(position)
+
+            // 尝试获取地形高度
+            if (viewer.scene.globe) {
+                const height = viewer.scene.globe.getHeight(cartographic)
+
+                // 如果成功获取地形高度，使用地形高度重建位置
+                if (Cesium.defined(height)) {
+                    cartographic.height = height
+                    clampedPosition = Cesium.Cartographic.toCartesian(cartographic)
+                } else {
+                    // 备用方案：尝试使用 clampToHeight
+                    const clampedCartesian = viewer.scene.clampToHeight(position)
+                    if (clampedCartesian) {
+                        clampedPosition = clampedCartesian
+                    }
+                }
+            }
+
+            // 使用修正后的位置进行屏幕坐标转换
+            const screenPosition = viewer.scene.cartesianToCanvasCoordinates(clampedPosition)
+            if (screenPosition) {
+                return screenPosition
+            }
+        } catch (error) {
+            console.error('更新 Tooltip 位置失败:', error)
+        }
+    }
+
+    return {
+        toggleMark
+    }
+
+}