diff --git a/src/views/demo/system/achievement/AchievementManage/index.vue b/src/views/demo/system/achievement/AchievementManage/index.vue
index 36e88948..a706fc33 100644
--- a/src/views/demo/system/achievement/AchievementManage/index.vue
+++ b/src/views/demo/system/achievement/AchievementManage/index.vue
@@ -288,11 +288,11 @@
       type: 'FeatureCollection',
       features: [],
     };
-    // let lngList: any = [];
-    // let latList: any = [];
+    let lngList: any = [];
+    let latList: any = [];
     tasklist?.forEach((item, index) => {
-      // lngList.push(parseFloat(item.gemo.x));
-      // latList.push(parseFloat(item.gemo.y));
+      lngList.push(parseFloat(item.gemo.x));
+      latList.push(parseFloat(item.gemo.y));
       let feature: any = {
         type: 'Feature',
         geometry: {
@@ -311,12 +311,11 @@
     });
 
     // 确定中心点和zoom等级
-    // let result = calculateCenterAndZoom(lngList, latList);
-    // console.log(result);
+    let result = calculateCenterAndZoom(lngList, latList);
     // 航飞图片-图层
     mapboxComponentRef.value.AchievementManageRaster(
       taskLayerGeoJson,
-      [118.30207505530701, 35.30123435040745],
+      result.center,
       7.848587811931849,
     );
   }
@@ -353,7 +352,7 @@
     const deltaLng = maxLng - minLng;
     const deltaLat = maxLat - minLat;
     // 估算合适的缩放级别
-    let zoom = 14 - Math.log2((Math.max(deltaLng, deltaLat) * 360) / 360); // 360度为地球一圈
+    let zoom = 14 - Math.log2(Math.max(deltaLng, deltaLat)); // 直接使用最大偏移量
     zoom = Math.max(8, Math.min(15, zoom)); // 确保缩放级别在合理范围内
     return {
       center: [centerLng, centerLat],
diff --git a/src/views/demo/system/achievement/Display/index.vue b/src/views/demo/system/achievement/Display/index.vue
new file mode 100644
index 00000000..a54fb2bb
--- /dev/null
+++ b/src/views/demo/system/achievement/Display/index.vue
@@ -0,0 +1,389 @@
+<template>
+  <div>
+    <div class="case-tree-container">
+      <div class="title"> 图层列表 </div>
+      <div class="case-tree">
+        <a-directory-tree
+          v-model:selectedKeys="selectedKeys"
+          :tree-data="treeData"
+          @select="onSelect"
+        />
+      </div>
+    </div>
+    <div>
+      <MapComponent
+        ref="mapboxComponentRef"
+        :style="{
+          position: 'absolute',
+          height: `calc(100vh - 90px)`,
+          width: `100%`,
+          marginLeft: '6px',
+          top: '0px',
+          left: '0px',
+          zIndex: '0',
+        }"
+        @handleOpen="handleOpen"
+      />
+    </div>
+    <a-modal :open="modalOpen" :title="modalTitle" :footer="null" @cancel="handleCancel">
+      <a-image style="height: 100%; width: 100%" :src="modalImage" />
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, onMounted } from 'vue';
+  import { BasicTree, TreeItem, TreeActionType } from '@/components/Tree';
+  import type { TreeProps } from 'ant-design-vue';
+  // vben
+  import { useMessage } from '@/hooks/web/useMessage';
+  import MapComponent from '@/views/demo/system/geoservermanagement/clound/mapComponent.vue';
+  import {
+    AchievementManageAddImageexif,
+    AchievementManageIntactById,
+    AchievementManageAddTask,
+    AchievementManageListTask,
+    AchievementManageListDroneShpImageexif,
+    GeoTiffManagerUpdateGeoTiff,
+    GeoTiffManagerLoadPage,
+    GeoTiffManagerGet,
+    getGeomData,
+    getStatisticalList,
+    ShpGeoLayerAdd,
+    ShpGeoLayerLoadPage,
+    ShpGeoLayerGet,
+    ShpGeoLayerUpdateLayer,
+    ShpGeoLayerDelete,
+    ShpGeoLayerParseShpInfo,
+  } from '@/api/demo/system';
+  import { prepareTreeData, prepareTreeData2, prepareTreeData3 } from './util';
+  import dayjs from 'dayjs';
+  // 图片路径拼接
+  import { getAppEnvConfig } from '@/utils/env';
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+  const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');
+
+  const { createMessage } = useMessage();
+
+  const selectedKeys = ref<string[]>([]);
+  const treeData: any = ref(prepareTreeData);
+  let tableData1: any = [];
+  let tableData2: any = [];
+  let tableData3: any = [];
+  let tableData3_tupian: any = [];
+
+  // 右边树的数据
+  function fetch() {
+    // 矢量图层
+    ShpGeoLayerLoadPage({
+      page: 1,
+      limit: 100,
+    }).then((res) => {
+      tableData1 = res.items;
+      treeData.value[0].children = [];
+      res.items.forEach((item) => {
+        treeData.value[0].children.push({
+          key: item.id,
+          title: item.serverName,
+        });
+      });
+    });
+    // 历史影像
+    GeoTiffManagerLoadPage({
+      page: 1,
+      limit: 100,
+    }).then((res) => {
+      tableData2 = res.items;
+      treeData.value[1].children = [];
+      res.items.forEach((item) => {
+        treeData.value[1].children.push({
+          key: item.id,
+          title: item.layerName,
+        });
+      });
+    });
+    // 航飞图片
+    AchievementManageListTask({
+      pageIndex: 1,
+      pageSize: 100,
+    }).then((res) => {
+      tableData3 = res.items;
+      tableData3_tupian = [];
+      treeData.value[2].children = [];
+      res.items.forEach((item1) => {
+        if (item1.imageCount > 0) {
+          // 航飞图片-任务
+          let children: any = [];
+          AchievementManageListDroneShpImageexif({
+            pageIndex: 1,
+            pageSize: item1.imageCount,
+            taskId: item1.id,
+          }).then((res2) => {
+            res2.items.forEach((item2) => {
+              tableData3_tupian.push(item2);
+              children.push({
+                key: item2.id,
+                title: item2.uploadTime,
+              });
+            });
+            // 添加进树里
+            treeData.value[2].children.push({
+              key: item1.id,
+              title: item1.taskName + '(' + item1.imageCount + ')',
+              children: children,
+            });
+          });
+        } else {
+          treeData.value[2].children.push({
+            key: item1.id,
+            title: item1.taskName + '(' + item1.imageCount + ')',
+          });
+        }
+      });
+    });
+  }
+
+  // 航飞图片-任务
+  function DroneShpImageexif(record) {
+    let children: any = [];
+    AchievementManageListDroneShpImageexif({
+      pageIndex: 1,
+      pageSize: record.imageCount,
+    }).then((res) => {
+      res.items.forEach((item) => {
+        children.push({
+          key: item.id,
+          title: item.uploadTime,
+        });
+      });
+    });
+    return children;
+  }
+
+  // 地图ref
+  const mapboxComponentRef = ref();
+  // 树选中
+  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
+    console.log(177, selectedKeys, info);
+    if (!['1', '2', '3'].includes(selectedKeys[selectedKeys.length - 1])) {
+      // 图层管理-图层
+      if (info?.node?.parent?.key == '1') {
+        tableData1.forEach((data) => {
+          if (selectedKeys[0] == data.id) {
+            // // 获取图层中心
+            // getGeomData({ dataTable: data.dataTable }).then((res) => {
+            //   if (res == undefined) {
+            //     createMessage.error('数据库不存在此图层的数据表');
+            //   } else {
+            //     let st: any = res.slice(6, -1);
+            //     st = st.split(' ');
+            mapboxComponentRef.value.GeoserverManagementRaster(
+              data,
+              [118.30207505530701, 35.30123435040745],
+              7.848587811931849,
+            );
+            //   }
+            // });
+          }
+        });
+      }
+      // 影像管理-图层
+      else if (info?.node?.parent?.key == '2') {
+        tableData2.forEach((data) => {
+          if (selectedKeys[0] == data.id) {
+            // let bbox = getBboxFromUrl(data.accessUrl);
+            // let lngLat = getCenterPoint(bbox);
+            mapboxComponentRef.value.GeoTiffManagerRaster(
+              data,
+              [118.30207505530701, 35.30123435040745],
+              7.848587811931849,
+            );
+          }
+        });
+      }
+      // 航飞图片-图层
+      else if (info?.node?.parent?.key == '3') {
+        // console.log('3', selectedKeys, info);
+        tableData3.forEach((data) => {
+          if (selectedKeys[0] == data.id) {
+            AchievementManageListDroneShpImageexif({
+              pageIndex: 1,
+              pageSize: data.imageCount,
+            }).then((res) => {
+              if (res.items.length > 0) {
+                handlerUpdateTaskLayerData(res.items);
+              } else {
+                createMessage.info('当前选中的任务并无航飞图片');
+              }
+            });
+          }
+        });
+      }
+      // 航飞图片-任务
+      else {
+        let filter = tableData3_tupian.filter((item) => item.id == selectedKeys);
+        handlerUpdateTaskLayerData(filter);
+      }
+    }
+  };
+
+  // 影像管理-从参数中获取 bbox 的值
+  function getBboxFromUrl(url) {
+    const urlObj = new URL(url);
+    const params = new URLSearchParams(urlObj.search);
+    const bbox = params.get('bbox');
+    return bbox;
+  }
+
+  // 影像管理-计算中心点
+  function getCenterPoint(bbox) {
+    const coords = bbox.split(',').map((coord) => parseFloat(coord));
+    const [minLon, minLat, maxLon, maxLat] = coords;
+    const centerLon = (minLon + maxLon) / 2;
+    const centerLat = (minLat + maxLat) / 2;
+    return [centerLon, centerLat];
+  }
+
+  // 航飞图片-无人机图层
+  function handlerUpdateTaskLayerData(tasklist) {
+    let taskLayerGeoJson = {
+      type: 'FeatureCollection',
+      features: [],
+    };
+    let lngList: any = [];
+    let latList: any = [];
+    tasklist?.forEach((item, index) => {
+      lngList.push(parseFloat(item.gemo.x));
+      latList.push(parseFloat(item.gemo.y));
+      let feature: any = {
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [parseFloat(item.gemo.x), parseFloat(item.gemo.y)],
+        },
+        properties: {
+          taskName: getTaskNameBytaskId(item.taskId) + item.uploadTime,
+          path: item.path,
+          // model: item.model,
+          lng: item.gemo.x,
+          lat: item.gemo.y,
+        },
+      };
+      taskLayerGeoJson.features.push(feature);
+    });
+
+    // 确定中心点和zoom等级
+    // let result = calculateCenterAndZoom(lngList, latList);
+    // 航飞图片-图层
+    mapboxComponentRef.value.AchievementManageRaster(
+      taskLayerGeoJson,
+      [118.30207505530701, 35.30123435040745],
+      7.848587811931849,
+    );
+  }
+
+  // 航飞图片-获取任务名称
+  function getTaskNameBytaskId(taskid) {
+    let resultName = '';
+    tableData3.forEach((element) => {
+      if (element.id == taskid) {
+        resultName = element.taskName;
+      }
+    });
+    if (resultName) {
+      return resultName + '\n';
+    } else {
+      return resultName;
+    }
+  }
+
+  // 航飞图片-确定中心点和zoom等级
+  function calculateCenterAndZoom(lngList, latList) {
+    // 检查输入的有效性
+    if (!lngList || !latList || lngList.length !== latList.length) {
+      throw new Error('');
+    }
+    // 计算中心点
+    const centerLng = lngList.reduce((acc, lng) => acc + lng, 0) / lngList.length;
+    const centerLat = latList.reduce((acc, lat) => acc + lat, 0) / latList.length;
+    // 计算经纬度范围
+    const minLng = Math.min(...lngList);
+    const maxLng = Math.max(...lngList);
+    const minLat = Math.min(...latList);
+    const maxLat = Math.max(...latList);
+    const deltaLng = maxLng - minLng;
+    const deltaLat = maxLat - minLat;
+    // 估算合适的缩放级别
+    let zoom = 14 - Math.log2(Math.max(deltaLng, deltaLat)); // 直接使用最大偏移量
+    zoom = Math.max(8, Math.min(15, zoom)); // 确保缩放级别在合理范围内
+    return {
+      center: [centerLng, centerLat],
+      zoomLevel: zoom,
+    };
+  }
+  onMounted(() => {
+    fetch();
+  });
+
+  // 点击地图上的无人机图标后展示图片------------------------------------------------------------
+  // 窗口
+  const modalOpen = ref(false);
+  const modalTitle = ref('');
+  const modalImage = ref('');
+  // 打开窗口
+  const handleOpen = (path) => {
+    modalOpen.value = true;
+    modalTitle.value = '';
+    // 正则表达式验证函数
+    if (isValidUrl(path)) {
+      modalImage.value = path;
+    } else {
+      modalImage.value = VITE_GLOB_API_URL_VAR.value + path;
+    }
+  };
+  // 关闭窗口
+  const handleCancel = () => {
+    modalOpen.value = false;
+    modalTitle.value = '';
+    modalImage.value = '';
+  };
+  // 正则表达式验证函数
+  function isValidUrl(url: string): boolean {
+    const regex =
+      /^(?:http|ftp)s?:\/\/(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[?[A-F0-9]*:[A-F0-9:]+\]?)(?::\d+)?(?:\/?|[\/?]\S+)$/i;
+    return regex.test(url);
+  }
+</script>
+<style type="less" scoped>
+  .case-tree-container {
+    width: 300px;
+    height: 720px;
+    background: #041b36;
+    position: absolute;
+    z-index: 1;
+    top: 100px;
+    margin-bottom: 20px;
+  }
+
+  .title {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 40px;
+    background-image: url('/videosupervision/title.png');
+    background-size: 100% 100%;
+    line-height: 40px;
+    text-indent: 18px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #ffffff;
+  }
+
+  .case-tree {
+    padding: 10px 24px;
+    overflow: auto;
+  }
+
+  ::v-deep .case-tree {
+  }
+</style>
diff --git a/src/views/demo/system/achievement/Display/util.ts b/src/views/demo/system/achievement/Display/util.ts
new file mode 100644
index 00000000..f7ec097f
--- /dev/null
+++ b/src/views/demo/system/achievement/Display/util.ts
@@ -0,0 +1,19 @@
+import type { TreeProps } from 'ant-design-vue';
+
+export const prepareTreeData: TreeProps['treeData'] = [
+  {
+    title: '矢量图层',
+    key: '1',
+    children: [],
+  },
+  {
+    title: '历史影像',
+    key: '2',
+    children: [],
+  },
+  {
+    title: '航飞图片',
+    key: '3',
+    children: [],
+  },
+];
\ No newline at end of file
diff --git a/src/views/demo/system/achievement/GeoTiffManager/util.ts b/src/views/demo/system/achievement/GeoTiffManager/util.ts
index 1b5fd4a0..a07f17e0 100644
--- a/src/views/demo/system/achievement/GeoTiffManager/util.ts
+++ b/src/views/demo/system/achievement/GeoTiffManager/util.ts
@@ -6,6 +6,11 @@ export const columns = [
       dataIndex: 'id',
       ifShow: false,
     },
+    {
+      title: '影像名称',
+      dataIndex: 'layerName',
+      width: 100,
+    },
     {
       title: '数据表名',
       dataIndex: 'dataTable',
diff --git a/src/views/demo/system/achievement/index.vue b/src/views/demo/system/achievement/index.vue
index d7f13201..a3360964 100644
--- a/src/views/demo/system/achievement/index.vue
+++ b/src/views/demo/system/achievement/index.vue
@@ -9,6 +9,9 @@
     <a-tab-pane key="3" tab="航飞图片">
       <AchievementManage ref="AchievementManageRef" />
     </a-tab-pane>
+    <a-tab-pane key="4" tab="成果展示">
+      <Display ref="DisplayRef" />
+    </a-tab-pane>
   </a-tabs>
 </template>
 <script setup lang="ts">
@@ -17,14 +20,17 @@
   import GeoserverManagement from '@/views/demo/system/geoservermanagement/index.vue';
   import GeoTiffManager from './GeoTiffManager/index.vue';
   import AchievementManage from './AchievementManage/index.vue';
+  import Display from './Display/index.vue';
 
-  const activeKey = ref('1');
+  const activeKey = ref('4');
   // 图层管理
   const GeoserverManagementRef = ref();
   // 影像管理
   const GeoTiffManagerRef = ref();
   // 航飞图片
   const AchievementManageRef = ref();
+  // 成果展示
+  const DisplayRef = ref();
 
   function changeTabs(activeKey) {
     console.log(activeKey);
@@ -34,6 +40,8 @@
       // 影像管理
     } else if (activeKey == 3) {
       // 航飞图片
+    } else if (activeKey == 4) {
+      // 成果展示
     }
   }
 </script>
diff --git a/src/views/demo/system/geoservermanagement/clound/mapComponent.vue b/src/views/demo/system/geoservermanagement/clound/mapComponent.vue
index 32e33127..1236a826 100644
--- a/src/views/demo/system/geoservermanagement/clound/mapComponent.vue
+++ b/src/views/demo/system/geoservermanagement/clound/mapComponent.vue
@@ -182,6 +182,7 @@
     // 县区边界
     handlerDealStreet('GeoserverManagementRaster');
     handlerDealCountry('GeoserverManagementRaster');
+    // handlerLocation([118.0676058205292, 35.443435], zoom);
     handlerLocation(lngLat, zoom);
 
     let format =
@@ -197,6 +198,8 @@
           '&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=' +
           chooseRow.spatialRef +
           format,
+        // 'http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE',
+        // 'http://221.2.83.254:9007/geoserver/ksp/wms?service=WMS&version=1.1.0&request=GetMap&layers=ksp:linqubianyaqi&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE&cql_filter=is_del%20=0',
         // 'http://192.168.10.131:8080/geoserver/my_workspace/wms?service=WMS&version=1.1.0&request=GetMap&layers=my_workspace:parse_shpinfo_text3&styles=&bbox=118.32113719388846%2C35.64528587987562%2C118.89333296872105%2C36.17725393199594&width=256&height=256&srs=EPSG:4326&format=image/png&TRANSPARENT=TRUE&exceptions=application%2Fvnd.ogc.se_inimage',
         // 'http://175.27.168.120:8080/geoserver/yinanxian/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fjpeg&TRANSPARENT=true&LAYERS=yinanxian%3Ayingxiang_01&exceptions=application%2Fvnd.ogc.se_inimage&SRS=EPSG%3A4548&STYLES=&WIDTH=529&HEIGHT=769&BBOX=607366.3276808303%2C3919435.438766631%2C612405.5241015075%2C3926765.179014889',
       ],