feat: 后台地图显示天地图

罗广辉

2025-08-25 17ef78d427b9a0b9e2f1b2702b77a897c7f4f54f

feat: 后台地图显示天地图

 src/components/map-container/mapContainer.vue

@@ -59,7 +59,7 @@

async function initMap () {
    if (viewer) return
    publicCesiumInstance = new PublicCesium({ dom: 'viewer-container' })
    publicCesiumInstance = new PublicCesium({ dom: 'viewer-container',layerMode: 4 })
    viewer = publicCesiumInstance.getViewer()

    initViewer(viewer)
@@ -105,7 +105,7 @@

    // 定位到点位
    const points = [[lng, lat]]  // 确保格式为二维数组
    flyVisual({ positionsData:points, viewer })
    flyVisual({ positionsData:points, viewer,multiple: 10 })
}

/**

 src/hooks/useRouteLine/useRouteLine.js

@@ -191,12 +191,11 @@
                height: 50,
            },
        })

        flyVisual(
            pointList.map(i => [Number(i.longitude), Number(i.latitude), Number(i.height)]),
        flyVisual({
            positionsData:pointList.map(i => [Number(i.longitude), Number(i.latitude), Number(i.height)]),
            viewer,
            20
        )
            multiple: 20
        })
    }

    function removePreviewLine () {
@@ -232,4 +231,4 @@
        removePreviewLine,
        resetCurRouteLineData
    }
}
}

 src/utils/cesium/mapUtil.js

@@ -409,6 +409,11 @@
export function flyVisual({ positionsData, viewer, multiple = 4, pitch = -90 }) {
    if (!Array.isArray(positionsData) || positionsData.length === 0) return

    // 如果是一个点，加两个点方便后续生成外包围盒
    if (positionsData.length === 1){
        const [lon,lat,height] = positionsData[0]
        positionsData = [[lon+0.001,lat+0.001,height],[lon-0.001,lat-0.001,height],[lon,lat,height]]
    }
    const positions = positionsData.map(([lon, lat, height]) =>
        Cesium.Cartesian3.fromDegrees(Number(lon), Number(lat), Number(height || 0))
    )
@@ -434,7 +439,7 @@
            range: boundingSphere.radius * multiple,
        },
        complete: () => {
            // 飞行完成后检查相机高度是否小于最高点
            // 飞行完成后检查相机高度是否小于最高点，如果小于直接飞到最高点
            const cameraHeight = Cesium.Cartographic.fromCartesian(viewer.camera.position).height
            if (cameraHeight < maxHeight) {
                viewer.camera.flyTo({

 src/views/dataCenter/components/dataCenterMap.vue

@@ -202,6 +202,7 @@
      flatMode: false,
      terrain: false,
      mapFilter: true,
      layerMode: 4
    });
    viewer = publicCesiumInstance.getViewer();
    viewerRef.value = viewer;

 src/views/dataCenter/dataCenter.vue

@@ -13,7 +13,7 @@
        @handleswitchFolders="handleswitchFolders"
        @handleBack ="handleBack"
       :viewDetails ="viewDetails"
    

      ></searchData>
      <!-- 文件夹 -->
      <div v-if="switchFolders" class="dataTable">
@@ -21,7 +21,7 @@
         class="custom-header custom-body"
          v-loading="loadings"
          element-loading-text=""
          :data="folderList"  
          :data="folderList"
            @selection-change="foldersSelectionChange"
        >
          <el-table-column type="selection" width="55" />
@@ -34,17 +34,17 @@
              }}
            </template>
          </el-table-column>
          <el-table-column property="name" label="任务名称" show-overflow-tooltip />    
          <el-table-column property="name" label="任务名称" show-overflow-tooltip />
           <el-table-column property="regionName" label="所属区域">
             <template #default="scope">
              <span>{{scope.row.city_name ? scope.row.city_name :'--'}},{{scope.row.area_name ? scope.row.area_name :'--'}}</span>
            </template>
            </el-table-column>   
            </el-table-column>
          <el-table-column property="nickname" label="所属机巢" >
             <template #default="scope">
              <span>{{scope.row.nickname ? scope.row.nickname :'--'}}</span>
            </template>
            </el-table-column>  
            </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button icon="el-icon-view" type="text" @click="foldersOpen(scope.row)"
@@ -56,7 +56,7 @@
      </div>
      <!-- 表格部分 -->
      <div class="dataTable" v-else>
        <el-table   
        <el-table
          v-loading="loadings"
          element-loading-text=""
          :data="tableData"
@@ -481,7 +481,7 @@
      console.error('获取数据失败:', error);
    })
    .finally(() => {
      loadings.value = false; 
      loadings.value = false;
    });
};

@@ -495,10 +495,10 @@
    getJobIdsBySnApi(apiParams)
        .then(res => {
    folderList.value = res.data.data.records.map(i => ({ ...i, checked: false }))
    total.value = res.data.data.total  
    total.value = res.data.data.total
        })
        .finally(() => {
          loadings.value = false; 
          loadings.value = false;
        })
}
const searchjobId = ref('')
@@ -516,7 +516,7 @@
  if (switchFolders.value) {
    getFolderList();
  } else {
    getaiImagesPage();  
    getaiImagesPage();
  }
};
// 切换文件夹
@@ -525,9 +525,9 @@
     switchFolders.value = !switchFolders.value;
     jobListParams.current = 1;
     FolderListParams.page = 1;
    

     searchBoxRef.value?.handleReset();
      fetchData();  
      fetchData();
   };
   const handleBack =()=>{
    searchjobId.value = ''
@@ -535,17 +535,17 @@
    viewDetails.value = false
    jobListParams.current = 1;
    FolderListParams.page = 1;
     fetchData();  
 
     fetchData();

   }
   const searchBoxRef = ref(null);
  

// 查询
const searchClick = params => {
  if(switchFolders.value){
    FolderListParams.page = 1;
    FolderListParams.page_size = 10;
    FolderListParams.startTime = params?.startTime?.slice(0, 10); 
    FolderListParams.startTime = params?.startTime?.slice(0, 10);
    FolderListParams.endTime = params?.endTime?.slice(0, 10);
    FolderListParams.waylineName=params?.jobName,
   FolderListParams.dockSn = params?.deviceSn
@@ -555,17 +555,17 @@
     jobListParams.current = 1;
      jobListParams.size = 10;
      jobListParams.searchParams = {
      ...jobListParams.searchParams, 
      ...params 
      ...jobListParams.searchParams,
      ...params
    };
    getaiImagesPage()
  }
};
const handleSizeChange = (val) => {
  if (switchFolders.value) {
    FolderListParams.page_size = val;  
    FolderListParams.page_size = val;
  } else {
    jobListParams.size = val; 
    jobListParams.size = val;
  }
  fetchData();
};
@@ -592,7 +592,7 @@
 folderList.value.forEach(item => {
    item.checked = val.some(foldersselected => foldersselected.id === item.id);
  });
  foldersSelectedRows.value = val; 
  foldersSelectedRows.value = val;
}
// 删除
const deleteDetail = val => {
@@ -769,6 +769,7 @@
    flatMode: false,
    terrain: false,
    mapFilter: true,
    layerMode: 4
  });
  viewer = viewInstance.value.getViewer();
  viewerRef.value = viewer;
@@ -948,7 +949,7 @@
                img {
                    width: 111px;
                    height: 111px;
			

                }

                .el-checkbox {
@@ -972,7 +973,7 @@
                    font-size: 14px;
                    color: #ffffff;
                    line-height: 23px;
				

                    display: flex;
                    align-items: center;
                    justify-content: space-between;
@@ -1153,4 +1154,4 @@
    }
  }
}
</style>
</style>