feat：更新初始化地形

chenyao

2025-11-17 233e4fc4f35bd00a36ee34a7fbf5e47b41db26db

 src/views/resource/components/spotDetails.vue

@@ -69,11 +69,9 @@
              
            >
              <el-table-column type="index" align="center" :width="pxToRemNum(30)" label="序号">
                <template #default="{ $index }">
                  {{
                    ($index + 1 + (params.page - 1) * params.pageSize).toString().padStart(2, '0')
                  }}
                </template>
               <template #default="{ $index }">
                {{ ($index + 1).toString().padStart(2, '0') }} 
              </template>
              </el-table-column>
              <el-table-column prop="dkbh" align="center"  label="图斑名称" show-overflow-tooltip />
              <el-table-column prop="is_exception" :width="pxToRemNum(50)" align="center" label="图斑状态">
@@ -135,6 +133,8 @@
import * as Cesium from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
import { ref, watch, onBeforeUnmount, onMounted } from 'vue';
// 标记地图是否初始化完成
const isMapReady = ref(false);
const uploadPatchDialog = defineModel('show');
const props = defineProps(['title', 'detailid', 'detailList', 'spotTypeOption', 'regionalData']);
const polygonTableEle = ref(null);
@@ -268,9 +268,8 @@

// 地图
const initMap = () => {
  if (!document.getElementById('spotMap')) {
    return;
  }
  if (!document.getElementById('spotMap') || isMapReady.value) return;
  
  publicCesiumInstance = new PublicCesium({
    dom: 'spotMap',
    flatMode: false,
@@ -278,12 +277,33 @@
    layerMode: 4,
    contour: false,
  });
  
  homeViewer.value = publicCesiumInstance.getViewer();
  viewer = publicCesiumInstance.getViewer();
  viewInstance.value = publicCesiumInstance;
  viewInstance.value = publicCesiumInstance; 
  viewer.scene.globe.depthTestAgainstTerrain = true;
  viewInstance.value.switchContour(true);

  // 确保 readyPromise 存在
  if (viewer.readyPromise) {
    viewer.readyPromise.then(() => {
      isMapReady.value = true; 
      getTableList();
    }).catch((error) => {
      console.error('地图加载失败：', error);
      ElMessage.error('地图加载失败，请刷新重试');
    });
  } else {

    // 如果没有 readyPromise
    setTimeout(() => {
      isMapReady.value = true;
      getTableList();
    }, 1000);
  }
};


// 仅弹框初始化时执行的定位逻辑
const initMapLocation = () => {
  if (tbJwdList.length === 0 || !homeViewer.value) return;
@@ -305,6 +325,7 @@
};
// 初始化所有图斑
const entitiesAddSpot = () => {
if (!isMapReady.value || !viewer) return;
  viewer?.entities.removeAll();
  tbJwdList = []; // 重置经纬度列表
  
@@ -460,27 +481,31 @@
  viewer?.entities.removeAll();
};
// 编辑

const handleSelectionChange = row => {
  let curRowIsSelect = row;
  curRowIsSelect && handleLocationPolygon(row);
  // 如果是同一个图斑且正在编辑，则取消编辑
  if (selectionIds.value === row.id && isEditing.value) {
    isEditing.value = false;
    handleUpDateDrawState(false);
    selectionIds.value = null;
    selectionList.value = [];
    return;
  }

  // 定位到选中的图斑
  handleLocationPolygon(row);
  
  // 仅异常图斑可编辑
  if (row.is_exception !== 2) {
    ElMessage.warning('仅异常图斑支持编辑绘制');
    return;
  }

  // 设置编辑状态
  selectionIds.value = row.id;
  selectionList.value = row;

  if (isEditing.value) {
    //当前已编辑 → 取消编辑（关闭绘制、重置状态）
    isEditing.value = false;
    handleUpDateDrawState(false); //取消绘制
  } else {
    // 当前未编辑 → 开启编辑（仅异常图斑可编辑）
    if (row.is_exception === 2 && curRowIsSelect) {
      isEditing.value = true;
      handleUpDateDrawState(true); //开启绘制
    
    } else {
      ElMessage.warning('仅异常图斑支持编辑绘制');
      isEditing.value = false;
    }
  }
  isEditing.value = true;
  handleUpDateDrawState(true);
};
const handleUpDateDrawState = show => {
  isEditing.value = show; // 同步编辑状态
@@ -592,20 +617,21 @@

watch(uploadPatchDialog, newVal => {
  if (newVal) {

    isInit.value = true; 
    isMapReady.value = false; 
    setTimeout(() => {
      initMap();      
      getTableList();  
      getspotManagementTableApi();
      getspotManagementTableApi(); 
    }, 0);
  } else {

 
    tableData.value = []; 
    isEditing.value = false;
    handleUpDateDrawState(false);
    destroyMap();
    isInit.value = false; 
    clearSelect();
    isMapReady.value = false; 
  }
  refreshonload();
});
@@ -626,6 +652,10 @@
  font-size: 16px !important;
  color: #363636 !important;
}
:global(.spotDialog .el-dialog__body) {
    padding: 2rem 2rem 0 !important;
  
  }
.container {
  display: flex;
  flex-direction: column;
@@ -716,8 +746,8 @@
  z-index: 99;
  width: 277px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.6);
  // backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0.8);

  border-radius: 8px 8px 8px 8px;
  padding: 6px 10px 0 10px;
  display: flex;