feat:图斑绘制

张含笑

2025-08-26 b2f7b2c66b5d5e1355de45231e4728d3a6e8127b

 src/views/resource/components/spotDetails.vue

@@ -1,5 +1,5 @@
<template>
  <el-dialog title="图斑详情" append-to-body v-model="uploadPatchDialog" width="70%" align-center>
  <el-dialog :title="props.title" append-to-body v-model="uploadPatchDialog" width="80%" align-center>
    <div class="container">
      <!-- 信息展示区 -->
      <div class="infoBox">
@@ -18,8 +18,8 @@
        <!-- 图斑列表 -->
        <div class="table-overlay">
          <div class="table-content">
            <div>图斑列表</div>
            <el-table    ref="polygonTableEle" :data="tableData" border style="width: 100%" @row-click="handleLocationPolygon">
            <div class="tabname">图斑列表</div>
            <el-table ref="polygonTableEle" highlight-current-row :data="tableData" border style="width: 100%" @row-click="handleLocationPolygon">
              <el-table-column type="index" label="序号" width="80">
                <template #default="{ $index }">
                  {{ ($index + 1).toString().padStart(2, '0') }}
@@ -30,7 +30,7 @@
              <el-table-column label="操作" width="100" align="center">
                <template #default="scope">
                    <el-button type="text">删除</el-button>
                <el-button type="text" @click="handleSelectionChange(scope.row)">编辑</el-button>
                <el-button type="text" @click.stop="handleSelectionChange(scope.row)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
@@ -38,13 +38,15 @@
              <el-pagination
                background
                layout="prev, pager, next"
                :total="50"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
          <!--绘制按钮-->
          <FunButton ref="funButtonEle" v-model:isBoxSelect="isBoxSelect" v-model:isDrawPolygon="isDrawPolygon" ></FunButton>
        <!-- 地图 -->
        <div id="spotMap" class="ztzf-cesium" v-show="uploadPatchDialog"></div>
      </div>
@@ -65,17 +67,28 @@
import * as Cesium from 'cesium';
import { PublicCesium } from '@/utils/cesium/publicCesium';
import { ref, watch, onBeforeUnmount } from 'vue';
import FunButton from '@/views/resource/components/FunButton.vue';
const uploadPatchDialog = defineModel('show');
const props=defineProps(['title'])
const polygonTableEle = ref(null)
let publicCesiumInstance = null;
let viewer = null;
const viewInstance = shallowRef(null);
const homeViewer = shallowRef(null);
let tbJwdList = [];
let total = ref(0)
// 当前选中的图斑面数据
let nowSelectObj = ref({})
// 记录上一次点击高亮
let lastHighlightRow = null
// 功能按钮区域相关：编辑图斑等
const funButtonEle = ref(null)
const isBoxSelect = ref(false)
const isDrawPolygon = ref(false)
// 选中了哪些图斑
const selectionIds = ref(null)
// 当前在编辑状态的异常图斑
let curCustomPolygon = null
const infoList = ref([
  { name: '文件名称', value: '55', field: 'job_info_num' },
  { name: '图斑类型', value: 'ee', field: 'name' },
@@ -116,6 +129,7 @@
    ...item,
    dkfw: item.sdfw && item.is_exception == 1 ? item.sdfw : item.dkfw,
  }));
  total.value = res.data.data.pagination.total
  // 先清空地图现有图斑
  tbJwdList = [];
  viewer.entities.removeAll(); // 清除所有实体
@@ -178,10 +192,7 @@
   viewInstance.value.addLeftClickEvent(null, spotHighlighting, 'spotHighlighting')
  });
};
// 编辑,选中当前图斑
const handleSelectionChange =(row)=>{
    heightlightSpot(row)
}

// 高亮当前选中图斑，并定位
const handleLocationPolygon = (data, Deselect) => {
   heightlightSpot(data)
@@ -228,6 +239,7 @@
   if (Nowentity && Nowentity.polygon) {
      Nowentity.polygon.material = Cesium.Color.RED.withAlpha(0.3)
      Nowentity.polygon.outlineColor = Cesium.Color.RED
    
   }

   homeViewer.value.scene.camera.setView({
@@ -235,6 +247,33 @@
   })
   lastHighlightRow = data
}
// 清空选中的数据
const clearSelect =()=>{
lastHighlightRow = null
selectionIds.value = null
}
// 编辑
const handleSelectionChange =(row)=>{
    console.log('编辑',row);
    let curRowIsSelect = row
    selectionIds.value = row.id
    curRowIsSelect && handleLocationPolygon(row)
      if (row.is_exception == 2 && curRowIsSelect) {
         isDrawPolygon.value = true
         funButtonEle.value.upDateDrawState(true)	
      handleLocationPolygon(row)	
      // clearSelect()
         // curCustomPolygon = row
         // ElMessage.warning('该图斑数据异常，请在地图区域重新绘制！！')
      }else{
      isDrawPolygon.value = false
    }
  
}
provide('selectionIds', selectionIds)
provide('homeViewer', homeViewer)
provide('viewInstance', viewInstance)
provide('clearSelect', clearSelect)
// 销毁
const destroyMap = () => {
  if (viewer) {
@@ -338,11 +377,10 @@
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  width: 23%;
  height: 95%;
  z-index: 999;
  //   background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    // background: rgba(31, 62, 122, 0.85);
  padding: 10px;
  display: flex;
  flex-direction: column;
@@ -351,7 +389,9 @@
.table-content {
  display: flex;
  flex-direction: column;
  height: 90%;
  height: 95%;
  .tabname {
  color: #102441;}
}

.pagination-container {
@@ -372,4 +412,5 @@
  height: 100%;
  width: 100%;
}

</style>