1.添加森防绘制，添加修改图标的属性；2.修改图标默认是修改当前图标，但也可以选择作用于所有此类要素，此时已经绘制的要素图标都修改，并修改对应要素类型的配置；

src/views/systemTemplate/forestFire/DialogPropertyGrid/PropertyGrid.vue

@@ -41,6 +41,7 @@
                       v-model="editingValue"
                       placeholder="请选择"
                       size="small"
+                      style="width: 180px;"
                       @change="handleEditorChange(row, editingValue)"
                       @blur="handleSave(row, editingValue)"
                       ref="editorRef"
@@ -81,6 +82,7 @@
                       type="date"
                       placeholder="选择日期"
                       size="small"
+                      style="width: 180px;"
                       @change="handleEditorChange(row, editingValue)"
                       @blur="handleSave(row, editingValue)"
                       ref="editorRef"
@@ -94,12 +96,14 @@
                       type="datetime"
                       placeholder="选择日期时间"
                       size="small"
+                      style="width: 180px;"
                       @change="handleEditorChange(row, editingValue)"
                       @blur="handleSave(row, editingValue)"
                       ref="editorRef"
                       value-format="YYYY-MM-DD HH:mm:ss"
                     />
                   </template>
+                  <!-- Icon 类型不在这里编辑，通过弹窗编辑 -->
                   <template v-else>
                     <!-- 默认使用 el-input -->
                     <el-input
@@ -115,7 +119,19 @@
 
                 <!-- 显示模式 -->
                 <div v-else class="display-container">
+                  <!-- Icon 类型显示图标 -->
+                  <template v-if="row.type === 'icon'">
+                    <el-image
+                      v-if="row.value"
+                      :src="row.value"
+                      fit="contain"
+                      style="width: 24px; height: 24px; vertical-align: middle;"
+                    />
+                    <span v-else style="color: #909399;">未选择图标</span>
+                  </template>
+                  <template v-else>
                     {{ getDisplayValue(row) }}
+                  </template>
                 </div>
               </div>
             </template>
@@ -128,27 +144,21 @@
         <el-button type="success" size="small" @click="handleSaveButtonClick">保 存</el-button>
       </div>
     </div>
+    <!-- 图片选择弹窗 -->
+    <icon-dialog
+      v-model="showIconDialog"
+      :current="currentIconProperty ? currentIconProperty.value : ''"
+      @update:current="handleIconSelected"
+    />
   </div>
 </template>
 
 <script setup>
 import { ref, watch, nextTick, onMounted } from 'vue';
-import {
-  ElTable,
-  ElTableColumn,
-  ElInput,
-  ElInputNumber,
-  ElSelect,
-  ElOption,
-  ElColorPicker,
-  ElMessage,
-  ElIcon,
-  ElButton,
-  ElDatePicker,
-} from 'element-plus';
 import { Close } from '@element-plus/icons-vue';
 import { useDraggable, useElementBounding, useWindowSize } from '@vueuse/core';
 import { parseTime } from '@/utils/ruoyi';
+import IconDialog from './iconDialog.vue';
 
 const props = defineProps({
   /**
@@ -158,7 +168,7 @@ const props = defineProps({
    *   key: string | number, // 唯一标识
    *   name: string, // 属性名称
    *   value: any, // 属性值
-   *   type: 'text' | 'number' | 'select' | 'color' | 'date' | 'datetime', // 编辑器类型
+   *   type: 'text' | 'number' | 'select' | 'color' | 'date' | 'datetime' | 'icon', // 编辑器类型
    *   options?: Array<{ label: string, value: any }>, // type为select时需要
    *   checkMethod?: (newValue: any, property: object) => boolean | Promise<boolean>, // 检查方法
    *   disabled?: boolean, // 是否禁用该属性，禁用后不可编辑，默认为 false
@@ -195,6 +205,10 @@ const editingValue = ref(null);
 // 编辑器组件的引用，用于focus
 const editorRef = ref(null);
 
+// 显示图标选择弹窗相关
+const showIconDialog = ref(false);
+const currentIconProperty = ref(null);
+
 // 拖拽相关的 refs and state
 const targetRef = ref(null); // 要拖拽的元素 (.dialog-property-grid-container)
 const handleRef = ref(null); // 拖拽手柄 (.property-header)
@@ -275,6 +289,21 @@ const handleCellClick = (row, column, cell, event) => {
 
   // 只处理属性值列的点击
   if (column.className.includes('property-value-column')) {
+    // icon属性是特殊情况，
+    if (row.type === 'icon') {
+      // // 如果当前有正在编辑的属性且不是当前点击的属性，先保存当前编辑的属性
+      // if (editingKey.value !== null && editingKey.value !== row.key) {
+      //   const previousRow = internalData.value.find(item => item.key === editingKey.value);
+      //   if (previousRow && !previousRow.disabled) {
+      //     handleSave(previousRow, editingValue.value);
+      //   }
+      // }
+      // 显示弹窗
+      currentIconProperty.value = row;
+      showIconDialog.value = true;
+      return;
+    }
+
     // 如果当前有正在编辑的属性且不是当前点击的属性，先保存当前编辑的属性
     if (editingKey.value !== null && editingKey.value !== row.key) {
       const previousRow = internalData.value.find(item => item.key === editingKey.value);
@@ -306,6 +335,11 @@ const startEditing = (row) => {
       return;
   }
   
+  // 如果是 icon 类型，不在这里开始编辑，而是通过弹窗
+  if (row.type === 'icon') {
+      return;
+  }
+
   // 如果已经是当前属性，则不重复开始编辑
   if (editingKey.value === row.key) {
       return;
@@ -446,10 +480,36 @@ const handleClose = () => {
         editingKey.value = null;
         editingValue.value = null;
     }
+    // 如果正在显示图标选择器，先关闭
+    if (showIconDialog.value) {
+      showIconDialog.value = false;
+      currentIconProperty.value = null;
+    }
     // 触发 close 事件, 通知外部关闭弹窗
     emit('close');
 };
 
+/**
+ * 处理 IconDialog 选择图标后的回调
+ * @param {string} newIconValue - 选择的新图标路径或dataURL
+ */
+const handleIconSelected = (newIconValue) => {
+  if (currentIconProperty.value) {
+    const property = internalData.value.find(item => item.key === currentIconProperty.value.key);
+    if (property) {
+      // 选择图标变更，则更新属性值
+      if (property.value !== newIconValue) {
+        property.value = newIconValue;
+        // Emit 事件
+        emit('property-change', property.key, newIconValue, property);
+      }
+    }
+  }
+  // Reset icon dialog state
+  currentIconProperty.value = null;
+  showIconDialog.value = false;
+};
+
 
 /**
  * 获取属性在显示模式下的展示值
@@ -481,6 +541,8 @@ const getDisplayValue = (row) => {
       console.error("Error formatting datetime for display:", e);
     }
     return row.value; // 格式化失败时返回原始值
+  } else if (row.type === 'icon') {
+    return ''; // icon 类型返回空字符串，因为直接显示图像
   }
   // 对于其他类型，直接显示值，null或undefined显示空字符串
   return row.value !== null && row.value !== undefined ? row.value : '';
@@ -641,4 +703,21 @@ defineExpose({
 .property-table_wrapper .el-table th.el-table__cell.is-leaf {
     background-color: transparent;
 }
+/* icon 显示的样式 */
+.property-value-cell {
+  display: flex;
+  align-items: center;
+  min-height: 32px; /* 确保图像有足够的高度 */
+}
+
+.property-value-cell .display-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.property-value-cell .display-container .el-image {
+  margin-right: 8px; /* 图标和潜在文本之间的空间 */
+}
 </style>

src/views/systemTemplate/forestFire/DialogPropertyGrid/iconDialog.vue

@@ -0,0 +1,170 @@
+<template>
+  <el-dialog v-model="show" title="选择图标" width="600px" append-to-body>
+    <!-- <el-button type="primary">上传本地图片</el-button> -->
+    <div v-loading="loading">
+      <el-upload action="#" :auto-upload="false" :show-file-list="false" :on-change="handleFileChange"
+        accept="image/*">
+        <el-button type="primary">上传本地图片</el-button>
+      </el-upload>
+      <div class="icon-container">
+        <div :class="{active: icon === selectedItem}" class="icon-item" v-for="(icon, index) in icons" :key="index" @click="selectIcon(icon)">
+          <el-image style="width: 48px; height: 48px" :src="icon" fit="contain" />
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleConfirm" :disabled="!selectedItem">
+          确定
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import analysisAroundIcon from '@/assets/icons/example/analysis_around.png'
+import analysisCoordinationLocationIcon from '@/assets/icons/example/analysis_coordination_location.png'
+import analysisMapLocationIcon from '@/assets/icons/example/analysis_map_location.png'
+import analysisSandboxIcon from '@/assets/icons/example/analysis_sandbox.png'
+import analysisSpreadIcon from '@/assets/icons/example/analysis_spread.png'
+import checkPointIcon from '@/assets/icons/example/check_point.png'
+import sandboxExplosiveIcon from '@/assets/icons/example/sandbox_explosive.png'
+import sandboxFireIcon from '@/assets/icons/example/sandbox_fire.png'
+import sandboxFirefighterIcon from '@/assets/icons/example/sandbox_firefighter.png'
+import sandboxFirepointIcon from '@/assets/icons/example/sandbox_firepoint.png'
+import sandboxFlameIcon from '@/assets/icons/example/sandbox_flame.png'
+import sandboxTrappedIcon from '@/assets/icons/example/sandbox_trapped.png'
+import sandboxWaterIcon from '@/assets/icons/example/sandbox_water.png'
+
+const show = defineModel()
+const props = defineProps({
+  current: {
+    type: String,
+    default: ''
+  }
+})
+const emits = defineEmits(['update:current'])
+
+// const icons = ref([
+//   { url: analysisAroundIcon },
+//   { url: analysisCoordinationLocationIcon },
+//   { url: analysisMapLocationIcon },
+//   { url: analysisSandboxIcon },
+//   { url: analysisSpreadIcon },
+//   { url: checkPointIcon },
+//   { url: sandboxExplosiveIcon },
+//   { url: sandboxFireIcon },
+//   { url: sandboxFirefighterIcon },
+//   { url: sandboxFirepointIcon },
+//   { url: sandboxFlameIcon },
+//   { url: sandboxTrappedIcon },
+//   { url: sandboxWaterIcon }
+// ])
+const icons = ref([
+  analysisAroundIcon,
+  analysisCoordinationLocationIcon,
+  analysisMapLocationIcon,
+  analysisSandboxIcon,
+  analysisSpreadIcon,
+  checkPointIcon,
+  sandboxExplosiveIcon,
+  sandboxFireIcon,
+  sandboxFirefighterIcon,
+  sandboxFirepointIcon,
+  sandboxFlameIcon,
+  sandboxTrappedIcon,
+  sandboxWaterIcon
+])
+const loading = ref(false)
+const selectedItem = ref(props.current)
+
+/* 上传图片 */
+const handleFileChange = (uploadFile) => {
+  loading.value = true;
+  const file = uploadFile.raw;
+  if (!file) return;
+
+  // 检查文件类型
+  if (!file.type.startsWith('image/')) {
+    ElMessage.error('只能上传图片文件!');
+    return;
+  }
+
+  // 检查文件大小 (可选)
+  // const isLt2M = file.size / 1024 / 1024 < 2;
+  // if (!isLt2M) {
+  //   ElMessage.error('图片文件大小不能超过 2MB!');
+  //   return;
+  // }
+
+  const reader = new FileReader();
+  reader.onloadend = () => {
+    const base64String = reader.result;
+    if(icons.value.includes(base64String)) {
+      ElMessage.error('该图片已存在，请选择其他图片!');
+      loading.value = false;
+      return;
+    }
+    icons.value.push(base64String);
+    loading.value = false;
+  };
+  reader.onerror = () => {
+    ElMessage.error('读取图片时出错！');
+    loading.value = false;
+  };
+  reader.readAsDataURL(file);
+}
+
+/* 图片点击 */
+const selectIcon = (icon) => {
+  selectedItem.value = icon
+}
+
+/* 确认 */
+const handleConfirm = () => {
+  emits('update:current', selectedItem.value)
+  show.value = false
+}
+
+/* 取消 */
+const handleCancel = () => {
+  selectedItem.value = props.current
+  show.value = false
+}
+
+</script>
+
+<style lang="scss" scoped>
+.icon-container {
+  margin-top: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  border-left: 1px solid var(--el-border-color);
+
+  .icon-item {
+    width: 60px;
+    height: 60px;
+    // background-color: #f0f0f0;
+    border-right: 1px solid var(--el-border-color);
+    border-bottom: 1px solid var(--el-border-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    &:nth-child(-n+10) {
+      border-top: 1px solid var(--el-border-color);
+    }
+    &:hover {
+      // background-color: #e0e0e0;
+      background-color: var(--el-border-color-extra-light);
+      color: var(--brand-color-light);
+    }
+    &.active {
+      background-color: var(--el-color-primary-light-6);
+    }
+  }
+}
+</style>

src/views/systemTemplate/forestFire/DialogPropertyGrid/index.js

@@ -1,6 +1,9 @@
 // src/utils/DialogPropertyGrid.js
 import { createApp, h, ref, watch } from 'vue';
 import * as Cesium from 'cesium';
+import ElementPlus from 'element-plus'
+import locale from 'element-plus/es/locale/lang/zh-cn'
+import Cookies from 'js-cookie'
 
 // 导入修改后的 PropertyGrid 组件 (现在作为 DialogPropertyGrid 的内容)
 import PropertyGridContent from './PropertyGrid.vue'; // 假设文件名为 PropertyGrid.vue
@@ -117,6 +120,13 @@ const show = (entity = null, onSave = null) => {
   // 4. 创建 Vue 应用实例并挂载
   currentApp = createApp(wrapperComponent);
 
+  // 添加 ElementPlus 组件库
+  currentApp.use(ElementPlus, {
+    locale: locale,
+    // 支持 large、default、small
+    size: Cookies.get('size') || 'default'
+  })
+
   // 5. 将应用挂载到临时容器
   // 挂载后，获取根组件实例，以便后续更新数据
   currentWrapperInstance = currentApp.mount(currentContainer);

src/views/systemTemplate/forestFire/DialogPropertyGrid/property.js

@@ -75,10 +75,28 @@ export const warning = [
   {
     key: "discoveryTime",
     name: "发现时间",
-    type: "text",
+    type: "datetime",
     value: "",
     disabled: false,
   },
+  {
+    key: "icon",
+    name: "图标",
+    type: "icon",
+    value: "",
+    disabled: false,
+  },
+  {
+    key: "changeAll",
+    name: "作用于该类型要素",
+    type: "select",
+    value: "false",
+    options: [
+      { label: "是", value: "true" },
+      { label: "否", value: "false" },
+    ],
+    disabled: false,
+  },
 ];
 
 // 定义巡护路线的属性
@@ -143,6 +161,24 @@ export const ranger = [
     value: "",
     disabled: false,
   },
+  {
+    key: "icon",
+    name: "图标",
+    type: "icon",
+    value: "",
+    disabled: false,
+  },
+  {
+    key: "changeAll",
+    name: "作用于该类型要素",
+    type: "select",
+    value: "false",
+    options: [
+      { label: "是", value: "true" },
+      { label: "否", value: "false" },
+    ],
+    disabled: false,
+  },
 ];
 
 // 定义云台的属性
@@ -189,6 +225,24 @@ export const ptz = [
     value: "",
     disabled: false,
   },
+  {
+    key: "icon",
+    name: "图标",
+    type: "icon",
+    value: "",
+    disabled: false,
+  },
+  {
+    key: "changeAll",
+    name: "作用于该类型要素",
+    type: "select",
+    value: "false",
+    options: [
+      { label: "是", value: "true" },
+      { label: "否", value: "false" },
+    ],
+    disabled: false,
+  },
 ]
 
 // 定义卡口的属性
@@ -235,6 +289,24 @@ export const bayonet = [
     value: "",
     disabled: false,
   },
+  {
+    key: "icon",
+    name: "图标",
+    type: "icon",
+    value: "",
+    disabled: false,
+  },
+  {
+    key: "changeAll",
+    name: "作用于该类型要素",
+    type: "select",
+    value: "false",
+    options: [
+      { label: "是", value: "true" },
+      { label: "否", value: "false" },
+    ],
+    disabled: false,
+  },
 ]
 
 // 定义无人机机场的属性
@@ -281,6 +353,24 @@ export const airport = [
     value: "",
     disabled: false,
   },
+  {
+    key: "icon",
+    name: "图标",
+    type: "icon",
+    value: "",
+    disabled: false,
+  },
+  {
+    key: "changeAll",
+    name: "作用于该类型要素",
+    type: "select",
+    value: "false",
+    options: [
+      { label: "是", value: "true" },
+      { label: "否", value: "false" },
+    ],
+    disabled: false,
+  },
 ]
 
 // 定义热点的属性
@@ -325,6 +415,24 @@ export const hot = [
     ],
     disabled: false,
   },
+  {
+    key: "icon",
+    name: "图标",
+    type: "icon",
+    value: "",
+    disabled: false,
+  },
+  {
+    key: "changeAll",
+    name: "作用于该类型要素",
+    type: "select",
+    value: "false",
+    options: [
+      { label: "是", value: "true" },
+      { label: "否", value: "false" },
+    ],
+    disabled: false,
+  },
 ]
 
   // 定义水源地的属性
@@ -403,6 +511,24 @@ export const warehouse = [
     value: "0",
     disabled: true,
   },
+  {
+    key: "icon",
+    name: "图标",
+    type: "icon",
+    value: "",
+    disabled: false,
+  },
+  {
+    key: "changeAll",
+    name: "作用于该类型要素",
+    type: "select",
+    value: "false",
+    options: [
+      { label: "是", value: "true" },
+      { label: "否", value: "false" },
+    ],
+    disabled: false,
+  },
 ];
 
 // 定义林区道路的属性
@@ -552,6 +678,7 @@ export const setPropertyData = (data, entity) => {
     return
   }
 
+  const oldProperties = JSON.parse(JSON.stringify(entity.properties.getValue()))
   const newProperties = entity.properties.getValue()
   data.forEach(item => {
     if (item.key && item.value !== undefined) {
@@ -561,8 +688,5 @@ export const setPropertyData = (data, entity) => {
   // 替换 properties
   entity.properties = new Cesium.PropertyBag(newProperties)
 
-  // 这里默认name字段是标签显示的内容，如果entity有label，则更新name字段值
+  return [oldProperties, newProperties]
-  if(entity.label) {
-    entity.label.text = new Cesium.ConstantProperty(newProperties.name);
-  }
 }

src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue

@@ -45,7 +45,7 @@
 import * as Cesium from 'cesium';
 
 import { useDrawTool } from '@/components/CesiumMap/mixins/useDrawTool';
-import { useEventBus } from '@/components/CesiumMap/mixins/useEventBus';
+import { useEventBus, ScreenMode } from '@/components/CesiumMap/mixins/useEventBus';
 import { useMeasureTool } from '@/components/CesiumMap/mixins/useMeasureTool';
 import { useWeatherParticle } from '@/components/CesiumMap/mixins/useWeatherParticle';
 import { 
@@ -72,7 +72,12 @@ import {
   drawWatersource,
   drawRoad,
   drawKeyarea,
+  pickFeatureProperty,
 } from './forestFireDraw'
+// 属性弹窗相关
+import DialogPropertyGrid from './../DialogPropertyGrid';
+import { setPropertyData } from './../DialogPropertyGrid/property';
+import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive';
 
 // 工具栏图标
 import baseDrawIcon from "@/assets/icons/toolbar_base_draw.png";
@@ -413,6 +418,11 @@ watch(() => props.viewer, (v) => {
     bus.on('toolbar_fog', () => weatherSwitchClick('fog'))
     // 清空
     bus.on('toolbar_clear', toolbarClear);
+    
+    // view 模式下，点击地图要素显示属性编辑弹窗
+    bus.onScreen(Cesium.ScreenSpaceEventType.LEFT_CLICK, ({ position }) => {
+      pickFeatureProperty(position, params)
+    }, ScreenMode.VIEW)
   }
 }, { immediate: true });
 

src/views/systemTemplate/forestFire/Toolbar/forestFireDraw.js

@@ -5,13 +5,130 @@ import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitiv
 import { getDistance, getArea, getBoundingCenterCoordinate, getBoundingCenter } from '@/components/CesiumMap/mixins/useMeasureTool';
 import { parseTime } from '@/utils/ruoyi';
 
-import fireWarningIcon from '@/assets/icons/fire_warning.png';
+import fireWarningDefaultIcon from '@/assets/icons/fire_warning.png';
-import fireRangerIcon from '@/assets/icons/fire_ranger.png';
+import fireRangerDefaultIcon from '@/assets/icons/fire_ranger.png';
-import firePtzIcon from '@/assets/icons/fire_ptz.png';
+import firePtzDefaultIcon from '@/assets/icons/fire_ptz.png';
-import fireBayonetIcon from '@/assets/icons/fire_bayonet.png';
+import fireBayonetDefaultIcon from '@/assets/icons/fire_bayonet.png';
-import fireAirportIcon from '@/assets/icons/fire_airport.png';
+import fireAirportDefaultIcon from '@/assets/icons/fire_airport.png';
-import fireHotIcon from '@/assets/icons/fire_hot.png';
+import fireHotDefaultIcon from '@/assets/icons/fire_hot.png';
-import fireWarehouseIcon from '@/assets/icons/fire_warehouse.png';
+import fireWarehouseDefaultIcon from '@/assets/icons/fire_warehouse.png';
+
+let fireWarningIcon = fireWarningDefaultIcon;
+let fireRangerIcon = fireRangerDefaultIcon;
+let firePtzIcon = firePtzDefaultIcon;
+let fireBayonetIcon = fireBayonetDefaultIcon;
+let fireAirportIcon = fireAirportDefaultIcon;
+let fireHotIcon = fireHotDefaultIcon;
+let fireWarehouseIcon = fireWarehouseDefaultIcon;
+
+const getImage = async (url) => {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.src = url;
+    image.onload = () => {
+      resolve(image);
+    };
+    image.onerror = (error) => {
+      reject(error);
+    };
+  });
+}
+
+const checkLabel = (entity, oldProperties, newProperties) => { 
+  if(oldProperties.name !== newProperties.name) {
+    // 这里默认name字段是标签显示的内容，如果entity有label，则更新name字段值
+    if(entity.label) {
+      entity.label.text = new Cesium.ConstantProperty(newProperties.name);
+    }
+  }
+}
+
+const checkIcon = (entity, oldProperties, newProperties, layer) => {
+  if(oldProperties.icon !== newProperties.icon) {
+    // 默认icon字段是图标路径，如果entity有billboard，则更新图标
+    if(entity.billboard) {
+      // 重新计算图标大小
+      getImage(newProperties.icon).then(image => {
+        // 如果是同类型全局修改
+        if(newProperties.changeAll === 'true') {
+          // 修改全局要素图标
+          switch(newProperties.__type) {
+            case 'warning':
+              fireWarningIcon = newProperties.icon;
+              break;
+            case 'ranger':
+              fireRangerIcon = newProperties.icon;
+              break;
+            case 'ptz':
+              firePtzIcon = newProperties.icon;
+              break;
+            case 'bayonet':
+              fireBayonetIcon = newProperties.icon;
+              break;
+            case 'airport':
+              fireAirportIcon = newProperties.icon;
+              break;
+            case 'hot':
+              fireHotIcon = newProperties.icon;
+              break;
+            case 'warehouse':
+              fireWarehouseIcon = newProperties.icon;
+          }
+          // 修改已经生成的
+          if(layer) {
+            layer.entities.values.forEach(e => {
+              if(e.properties.getValue().__type === newProperties.__type) {
+                e.billboard.image = new Cesium.ConstantProperty(newProperties.icon);
+                if(e.label) {
+                  e.label.pixelOffset = new Cesium.Cartesian2(0, - image.height - 6)
+                }
+              }
+            })
+          }
+        }
+        // 修改当前要素图标
+        entity.billboard.image = new Cesium.ConstantProperty(newProperties.icon);
+        if(entity.label) {
+          entity.label.pixelOffset = new Cesium.Cartesian2(0, - image.height - 6)
+        }
+      })
+    }
+  }
+}
+
+const pickFeatureProperty = (position, params) => { 
+  // 如果点击的是实体，则获取该实体的属性数据
+  const pickedObjectList = params.viewer.scene.drillPick(position);
+  if (pickedObjectList.length > 0) {
+    // 遍历拾取实体，获取第一个非辅助实体
+    for (let index = 0; index < pickedObjectList.length; index++) {
+      const obj = pickedObjectList[index];
+      if (obj && obj.id && obj.id instanceof Cesium.Entity) {
+        // 辅助实体的name都以'__'开头，不识别
+        if(obj.id.name?.indexOf('__') === 0) {
+          continue
+        }
+        // getPropertyData(obj.id);
+        DialogPropertyGrid.show(obj.id, (data) => {
+          // 更新实体属性
+          const [oldProperties, newProperties] = setPropertyData(data, obj.id);
+          checkLabel(obj.id, oldProperties, newProperties);
+          if(['warning', 'ranger', 'ptz', 'bayonet', 'airport', 'hot', 'warehouse'].indexOf(newProperties.__type) !== -1) {
+            checkIcon(obj.id, oldProperties, newProperties, params.toolbarLayer);
+          }
+          // 调用接口
+        })
+        return
+      } else if(obj.primitive && obj.primitive instanceof FeatureGroundPrimitive) {
+        DialogPropertyGrid.show(obj.primitive, (data) => {
+          // 更新实体属性
+          setPropertyData(data, obj.primitive);
+          // 调用接口
+        })
+      }
+    }
+  }
+}
 
 // 绘制火情点
 const drawWarning = (options) => {
@@ -29,17 +146,19 @@ const drawWarning = (options) => {
     // 获取当前时间
     const time = new Date()
     
+    // 获取icon的图片
+    getImage(fireWarningIcon).then(image => {
       const entity = toolbarLayer?.entities.add({
         position,
         billboard: {
           image: fireWarningIcon,
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
+          // pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
         },
         label: {
           text: '',
           font: '14px sans-serif',
-        pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6),
+          pixelOffset: new Cesium.Cartesian2(0, - image.height - 6),
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
           showBackground: true,
@@ -51,14 +170,19 @@ const drawWarning = (options) => {
           longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6),
           latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6),
           discoveryTime: parseTime(time),
+          icon: fireWarningIcon,
+          changeAll: fireWarningIcon === fireWarningDefaultIcon ? 'true' : 'false',
         }
       });
       // 编辑属性
       DialogPropertyGrid.show(entity, (data) => {
         // 更新实体属性
-      setPropertyData(data, entity);
+        const [oldProperties, newProperties] = setPropertyData(data, entity);
+        checkLabel(entity, oldProperties, newProperties);
+        checkIcon(entity, oldProperties, newProperties, toolbarLayer);
         // 调用接口
       });
+    })
   });
 };
 
@@ -103,7 +227,8 @@ const drawTrack = (options) => {
     // 编辑属性
     DialogPropertyGrid.show(entity, (data) => {
       // 更新实体属性
-      setPropertyData(data, entity);
+      const [oldProperties, newProperties] = setPropertyData(data, entity);
+      checkLabel(entity, oldProperties, newProperties)
       // 调用接口
     });
   });
@@ -122,18 +247,19 @@ const drawRanger = (options) => {
   drawTool.drawPoint().then((position) => {
     // 计算中心点坐标
     const center = Cesium.Cartographic.fromCartesian(position);
-    
+    // 获取icon的图片
+    getImage(fireRangerIcon).then(image => {
       const entity = toolbarLayer?.entities.add({
         position,
         billboard: {
           image: fireRangerIcon,
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
+          // pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
         },
         label: {
           text: '',
           font: '14px sans-serif',
-        pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6),
+          pixelOffset: new Cesium.Cartesian2(0, - image.height - 6),
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
           showBackground: true,
@@ -144,14 +270,19 @@ const drawRanger = (options) => {
           __type: 'ranger',
           longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6),
           latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6),
+          icon: fireRangerIcon,
+          changeAll: fireRangerIcon === fireRangerDefaultIcon ? 'true' : 'false',
         }
       });
       // 编辑属性
       DialogPropertyGrid.show(entity, (data) => {
         // 更新实体属性
-      setPropertyData(data, entity);
+        const [oldProperties, newProperties] = setPropertyData(data, entity);
+        checkLabel(entity, oldProperties, newProperties);
+        checkIcon(entity, oldProperties, newProperties, toolbarLayer);
         // 调用接口
       });
+    })
   });
 };
 
@@ -169,17 +300,19 @@ const drawPtz = (options) => {
     // 计算中心点坐标
     const center = Cesium.Cartographic.fromCartesian(position);
     
+    // 获取icon的图片
+    getImage(firePtzIcon).then(image => {
       const entity = toolbarLayer?.entities.add({
         position,
         billboard: {
           image: firePtzIcon,
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
+          // pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
         },
         label: {
           text: '',
           font: '14px sans-serif',
-        pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6),
+          pixelOffset: new Cesium.Cartesian2(0, - image.height - 6),
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
           showBackground: true,
@@ -190,14 +323,19 @@ const drawPtz = (options) => {
           __type: 'ptz',
           longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6),
           latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6),
+          icon: firePtzIcon,
+          changeAll: firePtzIcon === firePtzDefaultIcon ? 'true' : 'false',
         }
       });
       // 编辑属性
       DialogPropertyGrid.show(entity, (data) => {
         // 更新实体属性
-      setPropertyData(data, entity);
+        const [oldProperties, newProperties] = setPropertyData(data, entity);
+        checkLabel(entity, oldProperties, newProperties);
+        checkIcon(entity, oldProperties, newProperties, toolbarLayer);
         // 调用接口
       });
+    })
   });
 };
 
@@ -215,17 +353,19 @@ const drawBayonet = (options) => {
     // 计算中心点坐标
     const center = Cesium.Cartographic.fromCartesian(position);
     
+    // 获取icon的图片
+    getImage(fireBayonetIcon).then(image => {
       const entity = toolbarLayer?.entities.add({
         position,
         billboard: {
           image: fireBayonetIcon,
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
+          // pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
         },
         label: {
           text: '',
           font: '14px sans-serif',
-        pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6),
+          pixelOffset: new Cesium.Cartesian2(0, - image.height - 6),
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
           showBackground: true,
@@ -236,14 +376,19 @@ const drawBayonet = (options) => {
           __type: 'bayonet',
           longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6),
           latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6),
+          icon: fireBayonetIcon,
+          changeAll: fireBayonetIcon === fireBayonetDefaultIcon ? 'true' : 'false',
         }
       });
       // 编辑属性
       DialogPropertyGrid.show(entity, (data) => {
         // 更新实体属性
-      setPropertyData(data, entity);
+        const [oldProperties, newProperties] = setPropertyData(data, entity);
+        checkLabel(entity, oldProperties, newProperties);
+        checkIcon(entity, oldProperties, newProperties, toolbarLayer);
         // 调用接口
       });
+    })
   });
 };
 
@@ -261,17 +406,19 @@ const drawHot = (options) => {
     // 计算中心点坐标
     const center = Cesium.Cartographic.fromCartesian(position);
     
+    // 获取icon的图片
+    getImage(fireHotIcon).then(image => {
       const entity = toolbarLayer?.entities.add({
         position,
         billboard: {
           image: fireHotIcon,
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
+          // pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
         },
         label: {
           text: '',
           font: '14px sans-serif',
-        pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6),
+          pixelOffset: new Cesium.Cartesian2(0, - image.height - 6),
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
           showBackground: true,
@@ -282,14 +429,19 @@ const drawHot = (options) => {
           __type: 'hot',
           longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6),
           latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6),
+          icon: fireHotIcon,
+          changeAll: fireHotIcon === fireHotDefaultIcon ? 'true' : 'false',
         }
       });
       // 编辑属性
       DialogPropertyGrid.show(entity, (data) => {
         // 更新实体属性
-      setPropertyData(data, entity);
+        const [oldProperties, newProperties] = setPropertyData(data, entity);
+        checkLabel(entity, oldProperties, newProperties);
+        checkIcon(entity, oldProperties, newProperties, toolbarLayer);
         // 调用接口
       });
+    })
   });
 };
 
@@ -307,17 +459,19 @@ const drawAirport = (options) => {
     // 计算中心点坐标
     const center = Cesium.Cartographic.fromCartesian(position);
     
+    // 获取icon的图片
+    getImage(fireAirportIcon).then(image => {
       const entity = toolbarLayer?.entities.add({
         position,
         billboard: {
           image: fireAirportIcon,
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
+          // pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
         },
         label: {
           text: '',
           font: '14px sans-serif',
-        pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6),
+          pixelOffset: new Cesium.Cartesian2(0, - image.height - 6),
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
           showBackground: true,
@@ -328,14 +482,19 @@ const drawAirport = (options) => {
           __type: 'airport',
           longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6),
           latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6),
+          icon: fireAirportIcon,
+          changeAll: fireAirportIcon === fireAirportDefaultIcon ? 'true' : 'false',
         }
       });
       // 编辑属性
       DialogPropertyGrid.show(entity, (data) => {
         // 更新实体属性
-      setPropertyData(data, entity);
+        const [oldProperties, newProperties] = setPropertyData(data, entity);
+        checkLabel(entity, oldProperties, newProperties);
+        checkIcon(entity, oldProperties, newProperties, toolbarLayer);
         // 调用接口
       });
+    })
   });
 };
 
@@ -446,17 +605,19 @@ const drawWarehouse = (options) => {
     // 计算中心点坐标
     const center = Cesium.Cartographic.fromCartesian(position);
     
+    // 获取icon的图片
+    getImage(fireWarehouseIcon).then(image => {
       const entity = toolbarLayer?.entities.add({
         position,
         billboard: {
           image: fireWarehouseIcon,
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-        pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
+          // pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
         },
         label: {
           text: '',
           font: '14px sans-serif',
-        pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6),
+          pixelOffset: new Cesium.Cartesian2(0, - image.height - 6),
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
           showBackground: true,
@@ -468,14 +629,19 @@ const drawWarehouse = (options) => {
           name: '',
           longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6),
           latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6),
+          icon: fireWarehouseIcon,
+          changeAll: fireWarehouseIcon === fireWarehouseDefaultIcon ? 'true' : 'false',
         }
       });
       // 编辑属性
       DialogPropertyGrid.show(entity, (data) => {
         // 更新实体属性
-      setPropertyData(data, entity);
+        const [oldProperties, newProperties] = setPropertyData(data, entity);
+        checkLabel(entity, oldProperties, newProperties);
+        checkIcon(entity, oldProperties, newProperties, toolbarLayer);
         // 调用接口
       });
+    })
   });
 };
 
@@ -598,4 +764,5 @@ export {
   drawWatersource,
   drawRoad,
   drawKeyarea,
+  pickFeatureProperty,
 }

src/views/systemTemplate/forestFire/index.vue

@@ -10,11 +10,7 @@
 import { shallowRef } from 'vue';
 import * as Cesium from 'cesium';
 import CesiumMap from '@/components/CesiumMap/index.vue';
-import { useEventBus, ScreenMode } from '@/components/CesiumMap/mixins/useEventBus';
 import Toolbar from './Toolbar';
-import DialogPropertyGrid from './DialogPropertyGrid';
-import { setPropertyData } from './DialogPropertyGrid/property';
-import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive';
 
 const viewerRef = shallowRef(null)
 const options = ref({
@@ -36,38 +32,6 @@ const propertyData = ref([])
 const initMap = (v) => {
   viewerRef.value = v;
   console.log('地图已初始化', v);
-
-  const bus = useEventBus(viewerRef.value)
-  // view 模式下，点击地图要素显示属性编辑弹窗
-  bus.onScreen(Cesium.ScreenSpaceEventType.LEFT_CLICK, ({ position }) => {
-    // 如果点击的是实体，则获取该实体的属性数据
-    const pickedObjectList = viewerRef.value.scene.drillPick(position);
-    if (pickedObjectList.length > 0) {
-      // 遍历拾取实体，获取第一个非辅助实体
-      for (let index = 0; index < pickedObjectList.length; index++) {
-        const obj = pickedObjectList[index];
-        if (obj && obj.id && obj.id instanceof Cesium.Entity) {
-          // 辅助实体的name都以'__'开头，不识别
-          if(obj.id.name?.indexOf('__') === 0) {
-            continue
-          }
-          // getPropertyData(obj.id);
-          DialogPropertyGrid.show(obj.id, (data) => {
-            // 更新实体属性
-            setPropertyData(data, obj.id);
-            // 调用接口
-          })
-          return
-        } else if(obj.primitive && obj.primitive instanceof FeatureGroundPrimitive) {
-          DialogPropertyGrid.show(obj.primitive, (data) => {
-            // 更新实体属性
-            setPropertyData(data, obj.primitive);
-            // 调用接口
-          })
-        }
-      }
-    }
-  }, ScreenMode.VIEW)
 };
 
 </script>