地图图片路径-优化地图的加载速度、图片和视频展示-右侧添加数据项

2025-08-04 16:39:57 +08:00 · 2025-08-04 16:39:57 +08:00 · 3d8745a7cb
parent bc0b71880c
commit 3d8745a7cb
10 changed files with 365 additions and 394 deletions
--- a/src/assets/images/flightoperation/mediaLibraryFlight.png
+++ b/src/assets/images/flightoperation/mediaLibraryFlight.png
--- a/src/assets/images/flightoperation/mediaLibraryPoint.png
+++ b/src/assets/images/flightoperation/mediaLibraryPoint.png
--- a/src/views/demo/system/mediaLibrary/index.vue
+++ b/src/views/demo/system/mediaLibrary/index.vue
@ -37,7 +37,7 @@
              <!-- 图片 -->
              <img
                v-if="record.objectKey && record.objectKey.includes('jpeg')"
-                :src="`${VITE_GLOB_MEDIALIBRARY_IMAGE_URL + (record.minipic ? record.minipic : record.objectKey)}`"
+                :src="`${VITE_GLOB_MEDIALIBRARY_IMAGE_URL + record.minipic}`"
                :width="30"
                :height="20"
              />
@ -159,7 +159,7 @@
          <!-- 图片 -->
          <img
            v-if="record.objectKey && record.objectKey.includes('jpeg')"
-            :src="`${VITE_GLOB_MEDIALIBRARY_IMAGE_URL + (record.minipic ? record.minipic : record.objectKey)}`"
+            :src="`${VITE_GLOB_MEDIALIBRARY_IMAGE_URL + record.minipic}`"
            :width="100"
            :height="60"
            style="position: absolute; top: 10px; left: 32.5px"
--- a/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathImageInfo.vue
@ -24,25 +24,34 @@
      </div>
      <div class="titleTime">
        <ClockCircleOutlined />
-        {{
-          dayjs(props.nowShowImageData.createTime).format('YYYY-MM-DD HH:mm:ss (UTCZ)') +
-          '&nbsp;&nbsp;&nbsp;' +
-          (props.nowShowImageData.size / 1024 / 1024).toFixed(2) +
-          'M' +
-          '&nbsp;&nbsp;&nbsp;' +
-          props.nowShowImageData.width +
-          ' x ' +
-          props.nowShowImageData.height
-        }}
+        <span>
+          {{
+            '&nbsp;&nbsp;' +
+            dayjs(props.nowShowImageData.createTime).format('YYYY-MM-DD HH:mm:ss (UTCZ)') +
+            '&nbsp;&nbsp;&nbsp;'
+          }}
+        </span>
+        <span>
+          {{
+            props.nowShowImageData.siz
+              ? (props.nowShowImageData.size / 1024 / 1024).toFixed(2) + 'M' + '&nbsp;&nbsp;&nbsp;'
+              : ''
+          }}
+        </span>
+        <span>
+          {{ props.nowShowImageData.width + ' x ' + props.nowShowImageData.height }}
+        </span>
      </div>
      <div class="titleCoordinate">
-        {{
-          props.nowShowImageData.lng +
-          '° N' +
-          '&nbsp;&nbsp;&nbsp;&nbsp;' +
-          props.nowShowImageData.lat +
-          '° E'
-        }}
+        <span>
+          {{ props.nowShowImageData.lat + '° E' + '&nbsp;&nbsp;&nbsp;&nbsp;' }}
+        </span>
+        <span>
+          {{ props.nowShowImageData.lng + '° N' + '&nbsp;&nbsp;&nbsp;&nbsp;' }}
+        </span>
+        <span>
+          {{ '拍摄高度' + props.nowShowImageData.relativeAltitude + 'm &nbsp;&nbsp;&nbsp;&nbsp;' }}
+        </span>
      </div>
    </div>
    <!-- 标签 -->
@ -471,11 +480,7 @@
            </template>
            <div :class="li.id == props.nowShowImageData.id ? 'bottom_div_choose' : 'bottom_div'">
              <img
-                :src="
-                  li.minipic
-                    ? VITE_GLOB_MEDIALIBRARY_IMAGE_URL + li.minipic
-                    : 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871'
-                "
+                :src="VITE_GLOB_MEDIALIBRARY_IMAGE_URL + li.minipic"
                loading="lazy"
                width="75"
                height="50"
@ -1371,13 +1376,18 @@
    }
    .titleTime {
      margin-top: 5px;
-      font-size: 16px;
-      color: #ffffff;
+      display: flex;
+      span {
+        font-size: 16px;
+        color: #ffffff;
+      }
    }
    .titleCoordinate {
      margin-top: 5px;
-      font-size: 16px;
-      color: #ffffff;
+      span {
+        font-size: 16px;
+        color: #ffffff;
+      }
    }
  }
  // 标签
--- a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
@ -83,55 +83,23 @@
                  style="color: #ffffff; font-size: 16px"
                />
              </div>
-              <a-tooltip placement="top">
-                <template #title>
-                  <div>
-                    <img
-                      :src="VITE_GLOB_MEDIALIBRARY_IMAGE_URL + show.minipic"
-                      loading="lazy"
-                      width="230"
-                      height="190"
-                    />
-                  </div>
-                  <div> {{ show.name }}</div>
-                </template>
-                <div
-                  :style="{
-                    width: show.mouse ? '160px' : '210px',
-                    'white-space': 'nowrap',
-                    overflow: 'hidden',
-                    'text-overflow': 'ellipsis',
-                  }"
-                  @click="setNowShowImageData(show)"
-                >
-                  {{ show.name }}
-                </div>
-              </a-tooltip>
+              <div
+                :style="{
+                  width: '230px',
+                  'white-space': 'nowrap',
+                  overflow: 'hidden',
+                  'text-overflow': 'ellipsis',
+                }"
+                @click="setNowShowImageData(show)"
+              >
+                {{ show.name }}
+              </div>
              <a-tooltip placement="top">
                <template #title>
                  <span>回中</span>
                </template>
                <AimOutlined @click="handlerLocation(show)" />
              </a-tooltip>
-              <!-- <a-popconfirm
-                placement="right"
-                title="您是否将该照片在地图上取消加载？取消后照片将不在地图上显示。"
-                ok-text="确认"
-                cancel-text="取消"
-                @confirm="funShowOnMapOrDisplay(show, 'showOnMap')"
-              >
-                <a-tooltip placement="top">
-                  <template #title>
-                    <span>
-                      {{ show.showOnMap ? '在地图上取消加载' : '在地图上加载' }}
-                    </span>
-                  </template>
-                  <div style="display: flex; align-items: center">
-                    <div v-if="show.showOnMap == 1" class="svg-container" v-html="showOnMap_1" />
-                    <div v-if="show.showOnMap != 1" class="svg-container" v-html="showOnMap_0" />
-                  </div>
-                </a-tooltip>
-              </a-popconfirm> -->
            </div>
          </div>
        </div>
--- a/src/views/demo/system/mediaLibrary/path/pathMap.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathMap.vue
@ -352,13 +352,15 @@
    // 飞行方向标
    const flightimage = new Image();
    flightimage.crossOrigin = 'Anonymous';
-    flightimage.src = '/src/assets/images/flightoperation/mediaLibraryFlight.png';
+    // flightimage.src = '/src/assets/images/flightoperation/mediaLibraryFlight.png';
+    flightimage.src = '/mediaLibrary/mediaLibraryFlight.png';
+
    flightimage.onload = () => {
      let flightRotation = 0;
      let flightMapRotation = 0;
      // 地图照片-遍历
      props.allImageDataList.forEach((item, index) => {
-        if (item.lng && item.lat && item.absoluteAltitude) {
+        if (item.lng && item.lat && item.absoluteAltitude && item.relativeAltitude) {
          const image = new Image();
          image.crossOrigin = 'Anonymous';
          if (item.minipic) {
@ -374,247 +376,256 @@
              parseFloat(item.lat),
              parseFloat(item.absoluteAltitude),
            ];
-            // 地形高度
-            mars3d.PointUtil.getSurfaceHeight(
-              map.scene,
-              Cesium.Cartesian3.fromDegrees(position[0], position[1]),
-            ).then((point) => {
-              // 创建Canvas元素
-              const canvas = document.createElement('canvas');
-              canvas.width = 34;
-              canvas.height = 29;
-              // 获取Canvas绘图上下文
-              const ctx = canvas.getContext('2d');
-              ctx.fillStyle = '#ffffff00';
-              ctx?.fillRect(0, 0, canvas.width, canvas.height);
+            // 地面点的绝对高度
+            let surfaceHeight = item.absoluteAltitude - item.relativeAltitude;
+            // 创建Canvas元素
+            const canvas = document.createElement('canvas');
+            canvas.width = 34;
+            canvas.height = 29;
+            // 获取Canvas绘图上下文
+            const ctx = canvas.getContext('2d');
+            ctx.fillStyle = '#ffffff00';
+            ctx?.fillRect(0, 0, canvas.width, canvas.height);

-              // 图片
-              ctx.save();
-              const centerX = canvas.width / 2;
-              const centerY = canvas.height / 2;
-              ctx.translate(centerX, centerY);
-              const angleInRadians = (Math.PI / 180) * (parseFloat(item.gimbalYawDegree) + 180); // 将角度转换为弧度
-              ctx.rotate(angleInRadians);
-              ctx.drawImage(image, 2 - centerX, 2 - centerY, 30, 25);
-              ctx.restore();
+            // 图片
+            ctx.save();
+            const centerX = canvas.width / 2;
+            const centerY = canvas.height / 2;
+            ctx.translate(centerX, centerY);
+            const angleInRadians = (Math.PI / 180) * (parseFloat(item.gimbalYawDegree) + 180); // 将角度转换为弧度
+            ctx.rotate(angleInRadians);
+            ctx.drawImage(image, 2 - centerX, 2 - centerY, 30, 25);
+            ctx.restore();

-              // 飞行标识-右上角
-              if (index + 1 < props.allImageDataList.length) {
-                const afterItem = props.allImageDataList[index + 1];
-                let dLng = afterItem.lng - item.lng;
-                let dLat = afterItem.lat - item.lat;
-                // 使用 atan2 自动处理象限和除零
-                let angleRad = Math.atan2(dLat, dLng);
-                let angleDeg = Cesium.Math.toDegrees(angleRad);
-                flightRotation = ((Math.PI / 180) * (90 - angleDeg + 360)) % 360;
-                flightMapRotation = ((Math.PI / 180) * (angleDeg + 270)) % 360;
-              }
-              ctx.save();
-              const imgWAndH = 15;
-              ctx.translate(18 + imgWAndH / 2, imgWAndH / 2);
-              ctx.rotate(flightRotation);
-              ctx.drawImage(flightimage, -imgWAndH / 2, -imgWAndH / 2, imgWAndH, imgWAndH);
-              ctx.restore();
+            // 飞行标识-右上角
+            if (index + 1 < props.allImageDataList.length) {
+              const afterItem = props.allImageDataList[index + 1];
+              let dLng = afterItem.lng - item.lng;
+              let dLat = afterItem.lat - item.lat;
+              // 使用 atan2 自动处理象限和除零
+              let angleRad = Math.atan2(dLat, dLng);
+              let angleDeg = Cesium.Math.toDegrees(angleRad);
+              flightRotation = ((Math.PI / 180) * (90 - angleDeg + 360)) % 360;
+              flightMapRotation = ((Math.PI / 180) * (angleDeg + 270)) % 360;
+            }
+            ctx.save();
+            const imgWAndH = 15;
+            ctx.translate(18 + imgWAndH / 2, imgWAndH / 2);
+            ctx.rotate(flightRotation);
+            ctx.drawImage(flightimage, -imgWAndH / 2, -imgWAndH / 2, imgWAndH, imgWAndH);
+            ctx.restore();

-              // 设置图片1的边框颜色和宽度
-              ctx.save();
-              ctx.strokeStyle = '#ffffff';
-              ctx.lineWidth = 1;
-              ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
-              const dataURL1 = canvas.toDataURL('image/png');
-              ctx.restore();
+            // 设置图片1的边框颜色和宽度
+            ctx.save();
+            ctx.strokeStyle = '#ffffff';
+            ctx.lineWidth = 1;
+            ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
+            const dataURL1 = canvas.toDataURL('image/png');
+            ctx.restore();

-              // 设置图片2的边框颜色和宽度
-              ctx.strokeStyle = '#2d8cef';
-              ctx.lineWidth = 1;
-              ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
-              const dataURL2 = canvas.toDataURL('image/png');
+            // 设置图片2的边框颜色和宽度
+            ctx.strokeStyle = '#2d8cef';
+            ctx.lineWidth = 1;
+            ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
+            const dataURL2 = canvas.toDataURL('image/png');

-              // 飞行点
-              let flightointGraphic = new mars3d.graphic.BillboardEntity({
-                id: item.id + '_flight',
-                position: [position[0], position[1], position[2]],
-                style: {
-                  image: '/src/assets/images/flightoperation/mediaLibraryFlight.png',
-                  clampToGround: false,
-                  verticalOrigin: Cesium.VerticalOrigin.CENTER,
-                  rotation: flightMapRotation,
-                },
-                hasEdit: false,
-                show: false,
-              });
-              // 地面点到展示图片的线
-              let bottomImagePolylineGraphic = new mars3d.graphic.PolylineEntity({
-                id: item.id + '_polyline',
-                positions: [
-                  Cesium.Cartesian3.fromDegrees(position[0], position[1], point.height),
-                  Cesium.Cartesian3.fromDegrees(
-                    position[0],
-                    position[1],
-                    point.height + (position[2] - point.height) / 10,
-                  ),
-                ],
-                style: {
+            // 飞行点
+            let flightointGraphic = new mars3d.graphic.BillboardEntity({
+              id: item.id + '_flight',
+              position: [position[0], position[1], position[2]],
+              style: {
+                image: '/mediaLibrary/mediaLibraryFlight.png',
+                clampToGround: false,
+                verticalOrigin: Cesium.VerticalOrigin.CENTER,
+                rotation: flightMapRotation,
+                label: {
+                  text: `拍摄高度: ${item.relativeAltitude}米`,
+                  font_size: 16,
                  color: '#ffffff',
-                  width: 1, // 线宽
-                  clampToGround: false,
+                  outline: true,
+                  outlineWidth: 4,
+                  outlineColor: '#000000',
+                  verticalOrigin: Cesium.VerticalOrigin.TOP,
+                  horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
+                  pixelOffset: [-10, -28],
+                  // show: false,
                },
-                hasEdit: false,
-                show: item.display == 1 ? true : false,
-                // 用于恢复默认
-                defaultPosition: position,
-                // 地形高度
-                surfaceHeight: point.height,
-              });
-              // 展示图片
-              let imageGraphic = new mars3d.graphic.BillboardEntity({
-                id: item.id + '_image',
-                position: [
+              },
+              hasEdit: false,
+              show: false,
+            });
+
+            // 地面点到展示图片的线
+            let bottomImagePolylineGraphic = new mars3d.graphic.PolylineEntity({
+              id: item.id + '_polyline',
+              positions: [
+                Cesium.Cartesian3.fromDegrees(position[0], position[1], surfaceHeight),
+                Cesium.Cartesian3.fromDegrees(
                  position[0],
                  position[1],
-                  point.height + (position[2] - point.height) / 10,
-                ],
-                style: {
-                  image: dataURL1,
-                  clampToGround: false,
-                  scale: 1,
-                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-                  label: {
-                    text: `${item.name}`,
-                    font_size: 16,
-                    color: '#ffffff',
-                    outline: true,
-                    outlineWidth: 4,
-                    outlineColor: '#000000',
-                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-                    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-                    pixelOffset: [25, -5],
-                    show: false,
-                  },
+                  surfaceHeight + item.relativeAltitude / 10,
+                ),
+              ],
+              style: {
+                color: '#ffffff',
+                width: 1, // 线宽
+                clampToGround: false,
+              },
+              hasEdit: false,
+              show: item.display == 1 ? true : false,
+              // 用于恢复默认
+              defaultPosition: position,
+              // 地面点的绝对高度
+              surfaceHeight: surfaceHeight,
+            });
+            // 展示图片
+            let imageGraphic = new mars3d.graphic.BillboardEntity({
+              id: item.id + '_image',
+              position: [
+                position[0],
+                position[1],
+                surfaceHeight + (position[2] - surfaceHeight) / 10,
+              ],
+              style: {
+                image: dataURL1,
+                clampToGround: false,
+                scale: 1,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                label: {
+                  text: `${item.name}`,
+                  font_size: 16,
+                  color: '#ffffff',
+                  outline: true,
+                  outlineWidth: 4,
+                  outlineColor: '#000000',
+                  verticalOrigin: Cesium.VerticalOrigin.TOP,
+                  horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
+                  pixelOffset: [-20, -60],
+                  show: false,
                },
-                hasEdit: false,
-                show: item.display == 1 ? true : false,
-                // 用于恢复默认
-                defaultImage: dataURL1,
-                // 用于外侧修改图片
-                chooseImage: dataURL2,
-              });
-              // 监听mouseover事件
-              imageGraphic.on(mars3d.EventType.mouseOver, function () {
-                if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
-                  // 鼠标悬停时更改图片、图片变大
-                  imageGraphic.setStyle({
-                    image: dataURL2,
-                    scale: 1.3,
-                    label: {
-                      show: true,
-                    },
-                  });
-                }
-              });
-              // 监听mouseout事件
-              imageGraphic.on(mars3d.EventType.mouseOut, function () {
-                if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
-                  // 鼠标移出时恢复默认图片、图片恢复大小
-                  imageGraphic.setStyle({
-                    image: dataURL1,
-                    scale: 1,
-                    label: {
-                      show: false,
-                    },
-                  });
-                }
-              });
-              // 监听点击事件
-              imageGraphic.on(mars3d.EventType.click, function () {
-                // 点击当前展示的图片
-                // if (props.nowShowImageData && props.nowShowImageData.id == item.id) {
-                //   // 全部恢复默认
-                //   imageRestoreDefault();
-                //   emits('setNowShowImageData', {});
-                // } else
-                if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
-                  // 当前展示图片为空 或者 点击与当前展示不同
-                  // 全部恢复默认
-                  imageRestoreDefault();
-                  // 鼠标点击
-                  // 更新 PolylineEntity 的位置
-                  bottomImagePolylineGraphic.positions = [
-                    Cesium.Cartesian3.fromDegrees(position[0], position[1], point.height),
-                    Cesium.Cartesian3.fromDegrees(position[0], position[1], position[2]),
-                  ];
-                  // 更新 PolylineEntity 的颜色
-                  bottomImagePolylineGraphic.setStyle({
-                    color: '#2d8cf0',
-                  });
-                  // 飞行点显示
-                  flightointGraphic.show = true;
-                  // 鼠标更改图片
-                  imageGraphic.setStyle({
-                    image: dataURL2,
-                    scale: 1.3,
-                    label: {
-                      show: true,
-                    },
-                  });
-                  emits('setNowShowImageData', item);
-                }
-              });
-              // 将飞行点 添加到图层中
-              graphicLayers.addGraphic(flightointGraphic);
-              // 地面点到展示图片的线 添加到图层中
-              graphicLayers.addGraphic(bottomImagePolylineGraphic);
-              // 展示图片 添加到图层中
-              graphicLayers.addGraphic(imageGraphic);
-              // 数据
-              flightointGraphicData.push(flightointGraphic);
-              bottomImagePolylineGraphicData.push(bottomImagePolylineGraphic);
-              imageGraphicData.push(imageGraphic);
-
-              // 初始选中
-              if (props.nowShowImageData && props.nowShowImageData.id) {
-                // 飞行点
-                flightointGraphicData?.forEach((graphicLayer) => {
-                  if (props.nowShowImageData.id + '_flight' == graphicLayer.options.id) {
-                    graphicLayer.show = true;
-                  }
-                });
-                // 地面点到展示图片的线
-                bottomImagePolylineGraphicData?.forEach((graphicLayer) => {
-                  if (props.nowShowImageData.id + '_polyline' == graphicLayer.options.id) {
-                    let defaultPosition = graphicLayer.options.defaultPosition;
-                    let surfaceHeight = graphicLayer.options.surfaceHeight;
-                    graphicLayer.positions = [
-                      Cesium.Cartesian3.fromDegrees(
-                        defaultPosition[0],
-                        defaultPosition[1],
-                        surfaceHeight,
-                      ),
-                      Cesium.Cartesian3.fromDegrees(
-                        defaultPosition[0],
-                        defaultPosition[1],
-                        defaultPosition[2],
-                      ),
-                    ];
-                    graphicLayer.setStyle({
-                      color: '#2d8cf0',
-                    });
-                  }
-                });
-                // 展示图片
-                imageGraphicData?.forEach((graphicLayer) => {
-                  if (props.nowShowImageData.id + '_image' == graphicLayer.options.id) {
-                    graphicLayer.setStyle({
-                      image: graphicLayer.options.chooseImage,
-                      scale: 1.3,
-                      label: {
-                        show: true,
-                      },
-                    });
-                  }
+              },
+              hasEdit: false,
+              show: item.display == 1 ? true : false,
+              // 用于恢复默认
+              defaultImage: dataURL1,
+              // 用于外侧修改图片
+              chooseImage: dataURL2,
+            });
+            // 监听mouseover事件
+            imageGraphic.on(mars3d.EventType.mouseOver, function () {
+              if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
+                // 鼠标悬停时更改图片、图片变大
+                imageGraphic.setStyle({
+                  image: dataURL2,
+                  scale: 1.3,
+                  label: {
+                    show: true,
+                  },
                });
              }
            });
+            // 监听mouseout事件
+            imageGraphic.on(mars3d.EventType.mouseOut, function () {
+              if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
+                // 鼠标移出时恢复默认图片、图片恢复大小
+                imageGraphic.setStyle({
+                  image: dataURL1,
+                  scale: 1,
+                  label: {
+                    show: false,
+                  },
+                });
+              }
+            });
+            // 监听点击事件
+            imageGraphic.on(mars3d.EventType.click, function () {
+              // 点击当前展示的图片
+              // if (props.nowShowImageData && props.nowShowImageData.id == item.id) {
+              //   // 全部恢复默认
+              //   imageRestoreDefault();
+              //   emits('setNowShowImageData', {});
+              // } else
+              if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
+                // 当前展示图片为空 或者 点击与当前展示不同
+                // 全部恢复默认
+                imageRestoreDefault();
+                // 鼠标点击
+                // 更新 PolylineEntity 的位置
+                bottomImagePolylineGraphic.positions = [
+                  Cesium.Cartesian3.fromDegrees(position[0], position[1], surfaceHeight),
+                  Cesium.Cartesian3.fromDegrees(position[0], position[1], position[2]),
+                ];
+                // 更新 PolylineEntity 的颜色
+                bottomImagePolylineGraphic.setStyle({
+                  color: '#2d8cf0',
+                });
+                // 飞行点显示
+                flightointGraphic.show = true;
+                // 鼠标更改图片
+                imageGraphic.setStyle({
+                  image: dataURL2,
+                  scale: 1.3,
+                  label: {
+                    show: true,
+                  },
+                });
+                emits('setNowShowImageData', item);
+              }
+            });
+            // 将飞行点 添加到图层中
+            graphicLayers.addGraphic(flightointGraphic);
+            // 地面点到展示图片的线 添加到图层中
+            graphicLayers.addGraphic(bottomImagePolylineGraphic);
+            // 展示图片 添加到图层中
+            graphicLayers.addGraphic(imageGraphic);
+            // 数据
+            flightointGraphicData.push(flightointGraphic);
+            bottomImagePolylineGraphicData.push(bottomImagePolylineGraphic);
+            imageGraphicData.push(imageGraphic);
+
+            // 初始选中
+            if (props.nowShowImageData && props.nowShowImageData.id) {
+              // 飞行点
+              flightointGraphicData?.forEach((graphicLayer) => {
+                if (props.nowShowImageData.id + '_flight' == graphicLayer.options.id) {
+                  graphicLayer.show = true;
+                }
+              });
+              // 地面点到展示图片的线
+              bottomImagePolylineGraphicData?.forEach((graphicLayer) => {
+                if (props.nowShowImageData.id + '_polyline' == graphicLayer.options.id) {
+                  let defaultPosition = graphicLayer.options.defaultPosition;
+                  let surfaceHeight = graphicLayer.options.surfaceHeight;
+                  graphicLayer.positions = [
+                    Cesium.Cartesian3.fromDegrees(
+                      defaultPosition[0],
+                      defaultPosition[1],
+                      surfaceHeight,
+                    ),
+                    Cesium.Cartesian3.fromDegrees(
+                      defaultPosition[0],
+                      defaultPosition[1],
+                      defaultPosition[2],
+                    ),
+                  ];
+                  graphicLayer.setStyle({
+                    color: '#2d8cf0',
+                  });
+                }
+              });
+              // 展示图片
+              imageGraphicData?.forEach((graphicLayer) => {
+                if (props.nowShowImageData.id + '_image' == graphicLayer.options.id) {
+                  graphicLayer.setStyle({
+                    image: graphicLayer.options.chooseImage,
+                    scale: 1.3,
+                    label: {
+                      show: true,
+                    },
+                  });
+                }
+              });
+            }
          };
        }
      });
--- a/src/views/demo/system/mediaLibrary/preview/Map.vue
+++ b/src/views/demo/system/mediaLibrary/preview/Map.vue
@ -85,8 +85,8 @@
    map = new mars3d.Map(vChartRef.value, {
      scene: {
        center: {
-          lat: parseFloat(props.nowPreviewRecord.lat),
-          lng: parseFloat(props.nowPreviewRecord.lng),
+          lat: props.nowPreviewRecord.lat ? parseFloat(props.nowPreviewRecord.lat) : 35.134608,
+          lng: props.nowPreviewRecord.lng ? parseFloat(props.nowPreviewRecord.lng) : 118.29853,
          alt: 8306.3,
          heading: 360,
          pitch: -45,
@ -294,11 +294,13 @@
      map.addLayer(graphicLayers);
      // 图层
      showAllImageDataList();
-      const position = Cesium.Cartesian3.fromDegrees(
-        parseFloat(props.nowPreviewRecord.lng),
-        parseFloat(props.nowPreviewRecord.lat),
-      );
-      map.flyToPoint(position);
+      if (props.nowPreviewRecord.lng && props.nowPreviewRecord.lat) {
+        const position = Cesium.Cartesian3.fromDegrees(
+          parseFloat(props.nowPreviewRecord.lng),
+          parseFloat(props.nowPreviewRecord.lat),
+        );
+        map.flyToPoint(position);
+      }
    }
  };

@ -316,7 +318,7 @@
    bottomImagePolylineGraphicData = [];

    props.previewRecordList.forEach((item, index) => {
-      if (item.lng && item.lat && item.absoluteAltitude) {
+      if (item.lng && item.lat && item.absoluteAltitude && item.relativeAltitude) {
        const image = new Image();
        image.crossOrigin = 'Anonymous';
        if (item.minipic) {
@ -364,55 +366,51 @@
            parseFloat(item.lat),
            parseFloat(item.absoluteAltitude),
          ];
-          // 地形高度
-          mars3d.PointUtil.getSurfaceHeight(
-            map.scene,
-            Cesium.Cartesian3.fromDegrees(position[0], position[1]),
-          ).then((point) => {
-            // 地面点到展示图片的线
-            let bottomImagePolylineGraphic = new mars3d.graphic.PolylineEntity({
-              id: item.id + '_polyline',
-              positions: [
-                Cesium.Cartesian3.fromDegrees(position[0], position[1], point.height),
-                Cesium.Cartesian3.fromDegrees(position[0], position[1], position[2]),
-              ],
-              style: {
-                color: '#ffffff',
-                width: 1, // 线宽
-                clampToGround: false,
-              },
-              hasEdit: false,
-            });
-
-            // 展示图片
-            let imageGraphic = new mars3d.graphic.BillboardEntity({
-              id: item.id,
-              position: [position[0], position[1], position[2]],
-              style: {
-                image: item.id == props.nowPreviewRecord.id ? dataURL2 : dataURL1,
-                clampToGround: false,
-                scale: 1,
-                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-              },
-              hasEdit: false,
-              // 用于恢复默认
-              defaultImage: dataURL1,
-              // 用于外侧修改图片
-              chooseImage: dataURL2,
-            });
-            // 监听点击事件
-            imageGraphic.on(mars3d.EventType.click, function () {
-              if (props.nowPreviewRecord.id !== item.id) {
-                clickSetImage(item);
-              }
-            });
-            // 添加到图层中
-            graphicLayers.addGraphic(bottomImagePolylineGraphic);
-            graphicLayers.addGraphic(imageGraphic);
-            // 数据
-            bottomImagePolylineGraphicData.push(bottomImagePolylineGraphic);
-            imageGraphicData.push(imageGraphic);
+          // 地面点的绝对高度
+          let surfaceHeight = item.absoluteAltitude - item.relativeAltitude;
+          // 地面点到展示图片的线
+          let bottomImagePolylineGraphic = new mars3d.graphic.PolylineEntity({
+            id: item.id + '_polyline',
+            positions: [
+              Cesium.Cartesian3.fromDegrees(position[0], position[1], surfaceHeight),
+              Cesium.Cartesian3.fromDegrees(position[0], position[1], position[2]),
+            ],
+            style: {
+              color: '#ffffff',
+              width: 1, // 线宽
+              clampToGround: false,
+            },
+            hasEdit: false,
          });
+
+          // 展示图片
+          let imageGraphic = new mars3d.graphic.BillboardEntity({
+            id: item.id,
+            position: [position[0], position[1], position[2]],
+            style: {
+              image: item.id == props.nowPreviewRecord.id ? dataURL2 : dataURL1,
+              clampToGround: false,
+              scale: 1,
+              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            },
+            hasEdit: false,
+            // 用于恢复默认
+            defaultImage: dataURL1,
+            // 用于外侧修改图片
+            chooseImage: dataURL2,
+          });
+          // 监听点击事件
+          imageGraphic.on(mars3d.EventType.click, function () {
+            if (props.nowPreviewRecord.id !== item.id) {
+              clickSetImage(item);
+            }
+          });
+          // 添加到图层中
+          graphicLayers.addGraphic(bottomImagePolylineGraphic);
+          graphicLayers.addGraphic(imageGraphic);
+          // 数据
+          bottomImagePolylineGraphicData.push(bottomImagePolylineGraphic);
+          imageGraphicData.push(imageGraphic);
        };
      }
    });
--- a/src/views/demo/system/mediaLibrary/preview/previewImage.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewImage.vue
@ -397,7 +397,7 @@
            :class="li.id == props.nowPreviewRecord.id ? 'bottom_div_choose' : 'bottom_div'"
          >
            <img
-              :src="VITE_GLOB_MEDIALIBRARY_IMAGE_URL + (li.minipic ? li.minipic : li.objectKey)"
+              :src="VITE_GLOB_MEDIALIBRARY_IMAGE_URL + li.minipic"
              loading="lazy"
              :width="60"
              :height="35"
--- a/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
@ -21,19 +21,19 @@
          <span class="infotitle">照片类型</span>
        </a-col>
        <a-col :span="17">
-          <span class="infovalue">{{ props.nowPreviewRecord.imgtype }} </span>
+          <span class="infovalue">{{ props.nowPreviewRecord.imgtype || '--' }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">任务名称</span>
        </a-col>
        <a-col :span="17">
-          <span class="infovalue">{{ props.nowPreviewRecord.taskname }} </span>
+          <span class="infovalue">{{ props.nowPreviewRecord.taskName || '--' }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">航线名称</span>
        </a-col>
        <a-col :span="17">
-          <span class="infovalue">{{ props.nowPreviewRecord.airlineName }} </span>
+          <span class="infovalue">{{ props.nowPreviewRecord.airLineName || '--' }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">照片分辨率</span>
@ -51,7 +51,7 @@
            {{
              props.nowPreviewRecord.size
                ? (props.nowPreviewRecord.size / 1024 / 1024).toFixed(2) + 'M'
-                : 0
+                : '--'
            }}
          </span>
        </a-col>
@ -59,19 +59,19 @@
          <span class="infotitle">拍摄飞机</span>
        </a-col>
        <a-col :span="17">
-          <span class="infovalue">{{ props.nowPreviewRecord.photographFeiji }} </span>
+          <span class="infovalue">{{ props.nowPreviewRecord.taskDronePortName || '--' }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">拍摄负载</span>
        </a-col>
        <a-col :span="17">
-          <span class="infovalue">{{ props.nowPreviewRecord.payloadName }} </span>
+          <span class="infovalue">{{ props.nowPreviewRecord.payloadModelKey || '--' }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">拍摄人员</span>
        </a-col>
        <a-col :span="17">
-          <span class="infovalue">{{ props.nowPreviewRecord.photographMan }} </span>
+          <span class="infovalue">{{ props.nowPreviewRecord.createUserName || '--' }}</span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">拍摄时间</span>
@ -154,8 +154,8 @@
            align-items: center;
            justify-content: flex-start;
          "
-          @mouseenter="showGraffitiNum = true"
-          @mouseleave="showGraffitiNum = false"
+          @mouseenter="showGraffitiNumFlag = true"
+          @mouseleave="showGraffitiNumFlag = false"
        >
          <div class="graffitiNum">
            <EditOutlined style="color: #ffffff" />
@ -166,7 +166,7 @@
            </span>
          </div>
          <div
-            v-if="showGraffitiNum"
+            v-if="showGraffitiNumFlag"
            style="position: absolute; top: 36px; left: 5px; width: 60%; z-index: 1000"
            :style="{
              height: `${options.length * 30}px`,
@ -339,7 +339,7 @@
    });
  }

-  const showGraffitiNum = ref(false);
+  const showGraffitiNumFlag = ref(false);
  const options = computed(() => {
    if (props.nowPreviewRecord.graffitiJson) {
      const map = {};
@ -378,6 +378,7 @@
    color: white;
    display: flex;
    align-items: center;
+    margin-left: 7px;
  }
  .infoDiv {
    position: relative;
--- a/src/views/demo/system/mediaLibrary/preview/previewVideoInformation.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewVideoInformation.vue
@ -24,25 +24,19 @@
          <span class="infotitle">任务名称</span>
        </a-col>
        <a-col :span="17">
-          <span class="infovalue">
-            {{ props.nowPreviewRecord.taskname ? props.nowPreviewRecord.taskname : '--' }}
-          </span>
+          <span class="infovalue">{{ props.nowPreviewRecord.taskName || '--' }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">航线名称</span>
        </a-col>
        <a-col :span="17">
-          <span class="infovalue">
-            {{ props.nowPreviewRecord.airlineName ? props.nowPreviewRecord.airlineName : '--' }}
-          </span>
+          <span class="infovalue">{{ props.nowPreviewRecord.taskAirLineName || '--' }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">视频时长</span>
        </a-col>
        <a-col :span="17">
-          <span class="infovalue">
-            {{ props.nowPreviewRecord.airlineName ? props.nowPreviewRecord.airlineName : '--' }}
-          </span>
+          <span class="infovalue">{{ taskAirLineName || '--' }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">视频分辨率</span>
@ -61,38 +55,26 @@
        </a-col>
        <a-col :span="17">
          <span class="infovalue">
-            {{ props.nowPreviewRecord.size ? props.nowPreviewRecord.size : '--' }}
+            {{ props.nowPreviewRecord.size || '--' }}
          </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">拍摄负载</span>
        </a-col>
        <a-col :span="17">
-          <span class="infovalue">
-            {{
-              props.nowPreviewRecord.photographNumber
-                ? props.nowPreviewRecord.photographNumber
-                : '--'
-            }}
-          </span>
+          <span class="infovalue">{{ props.nowPreviewRecord.payloadModelKey || '--' }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">文件来源</span>
        </a-col>
        <a-col :span="17">
-          <span class="infovalue">
-            {{ props.nowPreviewRecord.photographMan ? props.nowPreviewRecord.photographMan : '--' }}
-          </span>
+          <span class="infovalue">{{ createUserName || '--' }}</span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">拍摄时间</span>
        </a-col>
        <a-col :span="17">
-          <span class="infovalue">
-            {{
-              props.nowPreviewRecord.photographTime ? props.nowPreviewRecord.photographTime : '--'
-            }}
-          </span>
+          <span class="infovalue">{{ props.nowPreviewRecord.createTime }} </span>
        </a-col>
        <a-col :span="7">
          <span class="infotitle">标签</span>
@ -285,6 +267,7 @@
    color: white;
    display: flex;
    align-items: center;
+    margin-left: 7px;
  }
  .infoDiv {
    position: relative;