ai成果点击详情地图显示图片

src/views/demo/aiachievement/ShowImage.vue

@@ -1,6 +1,12 @@
 <template>
   <div ref="scrollBox" class="show-image-div">
-    <a-image-preview-group>
+    <a-image-preview-group
+      :preview="{
+        visible: previewVisible,
+        current: currentIndex,
+        onVisibleChange: handleVisibleChange
+      }"
+    >
       <a-image
         v-for="(value, index) in props.showInfoData.aiAchievementDetailList"
         :key="index"
@@ -10,19 +16,22 @@
         class="image-item"
         :src="`${value.image}`"
         :img-props="{ loading: 'lazy' }" 
+         @click="openPreview(index)"
       />
     </a-image-preview-group>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, defineProps } from "vue";
+import { ref, onMounted, onBeforeUnmount, defineProps, defineExpose } from "vue";
 import { getAppEnvConfig } from '@/utils/env';
 const { VITE_GLOB_API_URL } = getAppEnvConfig();
 
 const props = defineProps(['showInfoData'])
 
 const scrollBox = ref<HTMLElement | null>(null);
+const previewVisible = ref(false)
+const currentIndex = ref(0)
 
 onMounted(() => {
   const el = scrollBox.value;
@@ -42,6 +51,21 @@ onMounted(() => {
   el.addEventListener("wheel", onWheel, { passive: false });
   onBeforeUnmount(() => el.removeEventListener("wheel", onWheel));
 });
+
+// 点击某一张图片
+const openPreview = (index) => {
+  console.log("点击了第", index, "张图片")
+  currentIndex.value = index
+  previewVisible.value = true
+}
+
+// 关闭预览时
+const handleVisibleChange = (val) => {
+  previewVisible.value = val
+}
+defineExpose({
+  openPreview
+})
 </script>
 
 <style lang="scss" scoped>

src/views/demo/aiachievement/index.vue

@@ -17,7 +17,7 @@
         :showInfoData="showInfoData"
         @closeDetailsInfo="closeDetailsInfo"
       />
-      <ShowImage v-if="detailsInfoShow" :showInfoData="showInfoData"/>
+      <ShowImage ref="showImageRef" v-if="detailsInfoShow" :showInfoData="showInfoData"/>
     </div>
   </template>
   <script lang="ts" setup>
@@ -33,6 +33,7 @@
     const airLineForm = ref({});
     const map = ref()
     const graphicLayer = ref()
+    const showImageRef = ref()
 
     watch(() => map.value, (val) => {
       if (val) {
@@ -47,23 +48,42 @@
     const changeLeftMenuShow = (item) => {
       GetAiAchievement({id:item.id}).then(res => {
         showInfoData.value = res
-        const position:any = [res.lng, res.lat]
-        const pointGraphic = new mars3d.graphic.BillboardEntity({
-          position: position,
-          style: {
-            image: '/projecthome/project_location.png',
-            width: 53,
-            height: 97,
-            scale: 1,
-            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-            clampToGround: true,
-          }
-        })
-        map.value?.flyToPoint(position);
-        graphicLayer.value?.clear()
-        graphicLayer.value?.addGraphic(pointGraphic)
         detailsInfoShow.value = true;
+
+        // 2. 循环数据，添加点位
+        res.aiAchievementDetailList.forEach((item, index) => {
+          const bottomPos = Cesium.Cartesian3.fromDegrees(item.lng, item.lat, 0)
+          const topPos = Cesium.Cartesian3.fromDegrees(item.lng, item.lat, 100)
+          const line = new mars3d.graphic.PolylineEntity({
+            positions: [bottomPos, topPos],
+            style: {
+              width: 2,
+              color: "#ffffff"
+            }
+          })
+          graphicLayer.value?.clear()
+          graphicLayer.value?.addGraphic(line)
+          const graphic = new mars3d.graphic.BillboardEntity({
+            position: topPos,
+            style: {
+              image: item.image, // 直接用图片当做图标
+              width: 80,   // 宽度（像素）
+              height: 60,  // 高度（像素）
+              // scale: 0.1,        // 缩放比例
+              clampToGround: false,
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+              verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+            }
+          })
+          graphic.on(mars3d.EventType.click, function (event) {
+            console.log("点击了图片", item.image, item.id, index)
+            showImageRef.value.openPreview(index)
+          })
+
+
+          graphicLayer.value?.addGraphic(graphic)
+        })
+        
       })
     }
     // 关闭右侧标注