From 98c7a0dae3231574180f124a545e3d4899318ea4 Mon Sep 17 00:00:00 2001
From: ctw <1051735452@qq.com>
Date: Mon, 2 Feb 2026 15:41:21 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9C=9F=E6=98=AF=E6=9C=80=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/views/cesiumMap/ContextMenu.vue  | 728 ++++++++++++++++++++++++++
 ruoyi-ui/src/views/cesiumMap/HoverTooltip.vue |  44 ++
 2 files changed, 772 insertions(+)
 create mode 100644 ruoyi-ui/src/views/cesiumMap/ContextMenu.vue
 create mode 100644 ruoyi-ui/src/views/cesiumMap/HoverTooltip.vue

diff --git a/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue b/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue
new file mode 100644
index 0000000..e0a75aa
--- /dev/null
+++ b/ruoyi-ui/src/views/cesiumMap/ContextMenu.vue
@@ -0,0 +1,728 @@
+<template>
+  <div class="context-menu" v-if="visible" :style="positionStyle">
+    <div class="menu-section">
+      <div class="menu-item" @click="handleDelete">
+        <span class="menu-icon">🗑️</span>
+        <span>删除</span>
+        <span>删除</span>
+<!--   111     -->
+      </div>
+    </div>
+
+    <!-- 线段特有选项 -->
+    <div class="menu-section" v-if="entityData.type === 'line'">
+      <div class="menu-title">线段属性</div>
+      <div class="menu-item" @click="toggleColorPicker('color')">
+        <span class="menu-icon">🎨</span>
+        <span>颜色</span>
+        <span class="menu-preview" :style="{backgroundColor: entityData.color}"></span>
+      </div>
+      <!-- 颜色选择器 -->
+      <div class="color-picker-container" v-if="showColorPickerFor === 'color'">
+        <div class="color-grid">
+          <div
+            v-for="color in presetColors"
+            :key="color"
+            class="color-item"
+            :style="{backgroundColor: color}"
+            @click="selectColor('color', color)"
+            :class="{ active: entityData.color === color }"
+          ></div>
+        </div>
+      </div>
+      <div class="menu-item" @click="toggleWidthPicker">
+        <span class="menu-icon">📏</span>
+        <span>线宽</span>
+        <span class="menu-value">{{ entityData.width }}px</span>
+      </div>
+      <!-- 线宽选择器 -->
+      <div class="width-picker-container" v-if="showWidthPicker">
+        <div class="width-grid">
+          <div
+            v-for="width in presetWidths"
+            :key="width"
+            class="width-item"
+            @click="selectWidth(width)"
+            :class="{ active: entityData.width === width }"
+          >
+            {{ width }}px
+          </div>
+        </div>
+      </div>
+      <div class="menu-item" @click="toggleBearingTypeMenu">
+        <span class="menu-icon">🧭</span>
+        <span>方位角类型</span>
+        <span class="menu-value">{{ entityData.bearingType === 'magnetic' ? '磁方位' : '真方位' }}</span>
+      </div>
+      <!-- 方位角类型选择菜单 -->
+      <div class="sub-menu" v-if="showBearingTypeMenu">
+        <div class="sub-menu-item" @click="selectBearingType('true')" :class="{ active: entityData.bearingType === 'true' }">
+          <span>真方位</span>
+        </div>
+        <div class="sub-menu-item" @click="selectBearingType('magnetic')" :class="{ active: entityData.bearingType === 'magnetic' }">
+          <span>磁方位</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 点特有选项 -->
+    <div class="menu-section" v-if="entityData.type === 'point'">
+      <div class="menu-title">点属性</div>
+      <div class="menu-item" @click="toggleColorPicker('color')">
+        <span class="menu-icon">🎨</span>
+        <span>颜色</span>
+        <span class="menu-preview" :style="{backgroundColor: entityData.color}"></span>
+      </div>
+      <!-- 颜色选择器 -->
+      <div class="color-picker-container" v-if="showColorPickerFor === 'color'">
+        <div class="color-grid">
+          <div
+            v-for="color in presetColors"
+            :key="color"
+            class="color-item"
+            :style="{backgroundColor: color}"
+            @click="selectColor('color', color)"
+            :class="{ active: entityData.color === color }"
+          ></div>
+        </div>
+      </div>
+      <div class="menu-item" @click="toggleSizePicker">
+        <span class="menu-icon">🔵</span>
+        <span>大小</span>
+        <span class="menu-value">{{ entityData.size }}px</span>
+      </div>
+      <!-- 大小选择器 -->
+      <div class="size-picker-container" v-if="showSizePicker">
+        <div class="size-grid">
+          <div
+            v-for="size in presetSizes"
+            :key="size"
+            class="size-item"
+            @click="selectSize(size)"
+            :class="{ active: entityData.size === size }"
+          >
+            {{ size }}px
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 多边形特有选项 -->
+    <div class="menu-section" v-if="entityData.type === 'polygon' || entityData.type === 'rectangle' || entityData.type === 'circle' || entityData.type === 'sector'">
+      <div class="menu-title">填充属性</div>
+      <div class="menu-item" @click="toggleColorPicker('color')">
+        <span class="menu-icon">🎨</span>
+        <span>填充色</span>
+        <span class="menu-preview" :style="{backgroundColor: entityData.color}"></span>
+      </div>
+      <!-- 颜色选择器 -->
+      <div class="color-picker-container" v-if="showColorPickerFor === 'color'">
+        <div class="color-grid">
+          <div
+            v-for="color in presetColors"
+            :key="color"
+            class="color-item"
+            :style="{backgroundColor: color}"
+            @click="selectColor('color', color)"
+            :class="{ active: entityData.color === color }"
+          ></div>
+        </div>
+      </div>
+      <div class="menu-item" @click="toggleOpacityPicker">
+        <span class="menu-icon">🌫️</span>
+        <span>透明度</span>
+        <span class="menu-value">{{ Math.round(entityData.opacity * 100) }}%</span>
+      </div>
+      <!-- 透明度选择器 -->
+      <div class="opacity-picker-container" v-if="showOpacityPicker">
+        <div class="opacity-grid">
+          <div
+            v-for="opacity in presetOpacities"
+            :key="opacity"
+            class="opacity-item"
+            @click="selectOpacity(opacity)"
+            :class="{ active: Math.round(entityData.opacity * 100) === Math.round(opacity * 100) }"
+          >
+            {{ Math.round(opacity * 100) }}%
+          </div>
+        </div>
+      </div>
+      <div class="menu-item" @click="toggleColorPicker('borderColor')">
+        <span class="menu-icon">🖌️</span>
+        <span>边框色</span>
+        <span class="menu-preview" :style="{backgroundColor: entityData.color}"></span>
+      </div>
+      <!-- 边框颜色选择器 -->
+      <div class="color-picker-container" v-if="showColorPickerFor === 'borderColor'">
+        <div class="color-grid">
+          <div
+            v-for="color in presetColors"
+            :key="color"
+            class="color-item"
+            :style="{backgroundColor: color}"
+            @click="selectColor('borderColor', color)"
+            :class="{ active: (entityData.borderColor || entityData.color) === color }"
+          ></div>
+        </div>
+      </div>
+      <div class="menu-item" @click="toggleWidthPicker">
+        <span class="menu-icon">📏</span>
+        <span>边框宽</span>
+        <span class="menu-value">{{ entityData.width }}px</span>
+      </div>
+      <!-- 边框宽度选择器 -->
+      <div class="width-picker-container" v-if="showWidthPicker">
+        <div class="width-grid">
+          <div
+            v-for="width in presetWidths"
+            :key="width"
+            class="width-item"
+            @click="selectWidth(width)"
+            :class="{ active: entityData.width === width }"
+          >
+            {{ width }}px
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 箭头特有选项 -->
+    <div class="menu-section" v-if="entityData.type === 'arrow'">
+      <div class="menu-title">箭头属性</div>
+      <div class="menu-item" @click="toggleColorPicker('color')">
+        <span class="menu-icon">🎨</span>
+        <span>颜色</span>
+        <span class="menu-preview" :style="{backgroundColor: entityData.color}"></span>
+      </div>
+      <!-- 颜色选择器 -->
+      <div class="color-picker-container" v-if="showColorPickerFor === 'color'">
+        <div class="color-grid">
+          <div
+            v-for="color in presetColors"
+            :key="color"
+            class="color-item"
+            :style="{backgroundColor: color}"
+            @click="selectColor('color', color)"
+            :class="{ active: entityData.color === color }"
+          ></div>
+        </div>
+      </div>
+      <div class="menu-item" @click="toggleWidthPicker">
+        <span class="menu-icon">📏</span>
+        <span>线宽</span>
+        <span class="menu-value">{{ entityData.width }}px</span>
+      </div>
+      <!-- 线宽选择器 -->
+      <div class="width-picker-container" v-if="showWidthPicker">
+        <div class="width-grid">
+          <div
+            v-for="width in presetWidths"
+            :key="width"
+            class="width-item"
+            @click="selectWidth(width)"
+            :class="{ active: entityData.width === width }"
+          >
+            {{ width }}px
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 文本特有选项 -->
+    <div class="menu-section" v-if="entityData.type === 'text'">
+      <div class="menu-title">文本属性</div>
+      <div class="menu-item" @click="toggleColorPicker('color')">
+        <span class="menu-icon">🎨</span>
+        <span>文字颜色</span>
+        <span class="menu-preview" :style="{backgroundColor: entityData.color}"></span>
+      </div>
+      <!-- 颜色选择器 -->
+      <div class="color-picker-container" v-if="showColorPickerFor === 'color'">
+        <div class="color-grid">
+          <div
+            v-for="color in presetColors"
+            :key="color"
+            class="color-item"
+            :style="{backgroundColor: color}"
+            @click="selectColor('color', color)"
+            :class="{ active: entityData.color === color }"
+          ></div>
+        </div>
+      </div>
+      <div class="menu-item" @click="showFontPicker">
+        <span class="menu-icon">📝</span>
+        <span>字体</span>
+        <span class="menu-value">{{ getFontName(entityData.font) }}</span>
+      </div>
+      <div class="menu-item" @click="toggleFontSizePicker">
+        <span class="menu-icon">🔤</span>
+        <span>字号</span>
+        <span class="menu-value">{{ getFontSize(entityData.font) }}px</span>
+      </div>
+      <!-- 字号选择器 -->
+      <div class="font-size-picker-container" v-if="showFontSizePicker">
+        <div class="font-size-grid">
+          <div
+            v-for="size in presetFontSizes"
+            :key="size"
+            class="font-size-item"
+            @click="selectFontSize(size)"
+            :class="{ active: getFontSize(entityData.font) === size.toString() }"
+          >
+            {{ size }}px
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ContextMenu',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    position: {
+      type: Object,
+      default: () => ({ x: 0, y: 0 })
+    },
+    entityData: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      showColorPickerFor: null,
+      showWidthPicker: false,
+      showSizePicker: false,
+      showOpacityPicker: false,
+      showFontSizePicker: false,
+      showBearingTypeMenu: false,
+      presetColors: [
+        '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF',
+        '#FF6600', '#663399', '#999999', '#000000', '#FFFFFF', '#FF99CC',
+        '#CC99FF', '#99CCFF', '#99FF99', '#FFFF99', '#FFCC99', '#FF9999'
+      ],
+      presetWidths: [1, 2, 3, 4, 5, 6, 8, 10, 12],
+      presetSizes: [6, 8, 10, 12, 14, 16, 18, 20, 24],
+      presetOpacities: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
+      presetFontSizes: [8, 10, 12, 14, 16, 18, 20, 24, 28, 32]
+    }
+  },
+  computed: {
+    positionStyle() {
+      return {
+        left: this.position.x + 'px',
+        top: this.position.y + 'px'
+      }
+    }
+  },
+  methods: {
+    handleDelete() {
+      this.$emit('delete')
+    },
+
+    toggleColorPicker(property) {
+      if (this.showColorPickerFor === property) {
+        this.showColorPickerFor = null
+      } else {
+        // 隐藏其他选择器
+        this.showWidthPicker = false
+        this.showSizePicker = false
+        this.showOpacityPicker = false
+        this.showFontSizePicker = false
+        this.showColorPickerFor = property
+      }
+    },
+
+    selectColor(property, color) {
+      this.$emit('update-property', property, color)
+      this.showColorPickerFor = null
+    },
+
+    toggleWidthPicker() {
+      if (this.showWidthPicker) {
+        this.showWidthPicker = false
+      } else {
+        // 隐藏其他选择器
+        this.showColorPickerFor = null
+        this.showSizePicker = false
+        this.showOpacityPicker = false
+        this.showFontSizePicker = false
+        this.showWidthPicker = true
+      }
+    },
+
+    selectWidth(width) {
+      this.$emit('update-property', 'width', width)
+      this.showWidthPicker = false
+    },
+
+    toggleSizePicker() {
+      if (this.showSizePicker) {
+        this.showSizePicker = false
+      } else {
+        // 隐藏其他选择器
+        this.showColorPickerFor = null
+        this.showWidthPicker = false
+        this.showOpacityPicker = false
+        this.showFontSizePicker = false
+        this.showSizePicker = true
+      }
+    },
+
+    selectSize(size) {
+      this.$emit('update-property', 'size', size)
+      this.showSizePicker = false
+    },
+
+    toggleOpacityPicker() {
+      if (this.showOpacityPicker) {
+        this.showOpacityPicker = false
+      } else {
+        // 隐藏其他选择器
+        this.showColorPickerFor = null
+        this.showWidthPicker = false
+        this.showSizePicker = false
+        this.showFontSizePicker = false
+        this.showOpacityPicker = true
+      }
+    },
+
+    selectOpacity(opacity) {
+      this.$emit('update-property', 'opacity', opacity)
+      this.showOpacityPicker = false
+    },
+
+    toggleFontSizePicker() {
+      if (this.showFontSizePicker) {
+        this.showFontSizePicker = false
+      } else {
+        // 隐藏其他选择器
+        this.showColorPickerFor = null
+        this.showWidthPicker = false
+        this.showSizePicker = false
+        this.showOpacityPicker = false
+        this.showFontSizePicker = true
+      }
+    },
+
+    selectFontSize(size) {
+      const fontName = this.getFontName(this.entityData.font)
+      this.$emit('update-property', 'font', `${size}px ${fontName}`)
+      this.showFontSizePicker = false
+    },
+
+    showFontPicker() {
+      const fonts = ['Arial', 'Microsoft YaHei', 'SimSun', 'SimHei', 'KaiTi']
+      const fontName = prompt(`请选择字体：\n${fonts.map((f, i) => `${i+1}. ${f}`).join('\n')}\n\n输入序号：`)
+      if (fontName && !isNaN(fontName) && fonts[parseInt(fontName)-1]) {
+        const selectedFont = fonts[parseInt(fontName)-1]
+        const fontSize = this.getFontSize(this.entityData.font)
+        this.$emit('update-property', 'font', `${fontSize}px ${selectedFont}`)
+      }
+    },
+
+    getFontName(font) {
+      const match = font.match(/\d+px\s+(.+)/)
+      return match ? match[1] : 'Arial'
+    },
+
+    getFontSize(font) {
+      const match = font.match(/(\d+)px/)
+      return match ? match[1] : '14'
+    },
+
+    toggleBearingTypeMenu() {
+      // 切换方位角类型选择菜单的显示/隐藏
+      this.showBearingTypeMenu = !this.showBearingTypeMenu
+      // 隐藏其他选择器
+      if (this.showBearingTypeMenu) {
+        this.showColorPickerFor = null
+        this.showWidthPicker = false
+        this.showSizePicker = false
+        this.showOpacityPicker = false
+        this.showFontSizePicker = false
+      }
+    },
+
+    selectBearingType(bearingType) {
+      // 选择方位角类型
+      this.$emit('update-property', 'bearingType', bearingType)
+      this.showBearingTypeMenu = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.context-menu {
+  position: fixed;
+  z-index: 9999;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  padding: 8px 0;
+  min-width: 180px;
+  max-width: 220px;
+}
+
+.menu-section {
+  margin-bottom: 8px;
+}
+
+.menu-section:last-child {
+  margin-bottom: 0;
+}
+
+.menu-title {
+  padding: 4px 16px;
+  font-size: 12px;
+  color: #666;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.menu-item:hover {
+  background-color: #f5f5f5;
+}
+
+.menu-icon {
+  margin-right: 8px;
+  font-size: 14px;
+}
+
+.menu-preview {
+  margin-left: auto;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  border: 1px solid #ddd;
+}
+
+.menu-value {
+  margin-left: auto;
+  font-size: 12px;
+  color: #666;
+  min-width: 40px;
+  text-align: right;
+}
+
+.menu-item span {
+  flex: 1;
+}
+
+/* 颜色选择器样式 */
+.color-picker-container {
+  padding: 8px 16px;
+  background-color: #f9f9f9;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+}
+
+.color-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 6px;
+}
+
+.color-item {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+  border: 1px solid #ddd;
+}
+
+.color-item:hover {
+  transform: scale(1.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.color-item.active {
+  transform: scale(1.2);
+  box-shadow: 0 0 0 2px white, 0 0 0 3px #007bff;
+}
+
+/* 线宽选择器样式 */
+.width-picker-container {
+  padding: 8px 16px;
+  background-color: #f9f9f9;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+}
+
+.width-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+
+.width-item {
+  padding: 6px 8px;
+  background-color: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 12px;
+}
+
+.width-item:hover {
+  background-color: #e3f2fd;
+  border-color: #2196f3;
+}
+
+.width-item.active {
+  background-color: #2196f3;
+  color: white;
+  border-color: #1976d2;
+}
+
+/* 大小选择器样式 */
+.size-picker-container {
+  padding: 8px 16px;
+  background-color: #f9f9f9;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+}
+
+.size-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+
+.size-item {
+  padding: 6px 8px;
+  background-color: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 12px;
+}
+
+.size-item:hover {
+  background-color: #e3f2fd;
+  border-color: #2196f3;
+}
+
+.size-item.active {
+  background-color: #2196f3;
+  color: white;
+  border-color: #1976d2;
+}
+
+/* 透明度选择器样式 */
+.opacity-picker-container {
+  padding: 8px 16px;
+  background-color: #f9f9f9;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+}
+
+.opacity-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 4px;
+}
+
+.opacity-item {
+  padding: 4px 6px;
+  background-color: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 10px;
+}
+
+.opacity-item:hover {
+  background-color: #e3f2fd;
+  border-color: #2196f3;
+}
+
+.opacity-item.active {
+  background-color: #2196f3;
+  color: white;
+  border-color: #1976d2;
+}
+
+/* 字号选择器样式 */
+.font-size-picker-container {
+  padding: 8px 16px;
+  background-color: #f9f9f9;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+}
+
+.font-size-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 4px;
+}
+
+.font-size-item {
+  padding: 4px 6px;
+  background-color: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 10px;
+}
+
+.font-size-item:hover {
+  background-color: #e3f2fd;
+  border-color: #2196f3;
+}
+
+.font-size-item.active {
+  background-color: #2196f3;
+  color: white;
+  border-color: #1976d2;
+}
+
+/* 子菜单样式 */
+.sub-menu {
+  background-color: #f9f9f9;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+  padding: 4px 0;
+}
+
+.sub-menu-item {
+  padding: 6px 16px 6px 32px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  font-size: 12px;
+}
+
+.sub-menu-item:hover {
+  background-color: #e3f2fd;
+}
+
+.sub-menu-item.active {
+  background-color: #2196f3;
+  color: white;
+}
+</style>
diff --git a/ruoyi-ui/src/views/cesiumMap/HoverTooltip.vue b/ruoyi-ui/src/views/cesiumMap/HoverTooltip.vue
new file mode 100644
index 0000000..c4f11f6
--- /dev/null
+++ b/ruoyi-ui/src/views/cesiumMap/HoverTooltip.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="hover-tooltip" v-if="visible">
+    <div class="tooltip-content">
+      {{ content }}
+    </div>
+    <span>删除</span>
+  </div>
+</template>
+<!--   111     -->
+<script>
+export default {
+  name: 'HoverTooltip',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    content: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hover-tooltip {
+  position: absolute;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  pointer-events: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  white-space: nowrap;
+}
+
+.tooltip-content {
+  display: flex;
+  align-items: center;
+}
+</style>