Merge branch 'Malaysia' of http://www.sysuimars.cn:3000/feiniao/agriculture-one-map into Malaysia

src/components/static_map_change/Layers.js

@@ -98,7 +98,6 @@ class StaticMapLayers {
     }
 
     showSingle(key,isFit = false,hideOther = true){
-        console.log('layerData', key, this.layerData,);
         if(!this.layerData[key]){
             return;
         }

src/components/static_map_change/pointLayer.js

@@ -2,6 +2,7 @@ import * as KMap from '@/utils/ol-map/KMap';
 import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
 import { newPoint } from "@/utils/map.js";
+import flyPointIcon from "@/assets/images/warningHome/chat/fly-point.png";
 
 /**
  *
@@ -15,7 +16,8 @@ class pointLayer {
         style: () => {
             return new Style({
             image: new Icon({
-                src: "/src/assets/images/warningHome/chat/fly-point.png", 
+                // 使用打包器可识别的静态资源路径
+                src: flyPointIcon,
                 scale: 0.6,
             }),
             });
@@ -98,11 +100,13 @@ class pointLayer {
   }
 
   showPoint() {
+    // 显示点位图层
     this.pointLayer.layer.setVisible(true);
-    let extent = this.pointLayer.layer.getExtent();
-    if(extent && extent[0] != Infinity){
-          console.log("show layer",extent)
-          this.pointLayer.mapInstance.fit(extent,{padding:[100,100,100,100]})
+    // 使用 source 计算范围，VectorLayer 本身没有 getExtent 方法
+    const extent = this.pointLayer.source.getExtent();
+    if (extent && extent[0] !== Infinity) {
+      // 通过 kmap（KMap.Map 实例）来缩放到点位范围
+      this.kmap.fit(extent, [100, 100, 100, 100]);
     }
   }
 

src/views/warningHome/components/trackDialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-if="showVideoDialog">
         <el-dialog v-model="centerDialogVisible" width="800" align-center modal-class="track-dialog">
             <template #header>
                 <div class="track-title">
@@ -8,7 +8,20 @@
                 </div>
             </template>
             <div class="track">
-                <img class="track-img" :src="`/src/assets/images/warningHome/chat/track${urlIndex}.png`" alt="">
+                <img class="track-img" :src="trackUrls[urlIndex]" alt="">
+            </div>
+        </el-dialog>
+    </div>
+    <div v-else>
+        <el-dialog v-model="centerDialogVisible" width="800" align-center modal-class="track-dialog">
+            <template #header>
+                <div class="track-title">
+                    <!-- <img class="track-icon" src="@/assets/images/warningHome/chat/track.png" alt="" /> -->
+                    视频
+                </div>
+            </template>
+            <div class="track">
+                <video class="track-img" src="https://birdseye-img-ali-cdn.sysuimars.com/bbs_post/video/1768189223030.mp4" controls></video>
             </div>
         </el-dialog>
     </div>
@@ -16,21 +29,41 @@
 
 <script setup>
 import eventBus from "@/api/eventBus";
+import track1 from "@/assets/images/warningHome/chat/track1.png";
+import track2 from "@/assets/images/warningHome/chat/track2.png";
+import track3 from "@/assets/images/warningHome/chat/track3.png";
+import track4 from "@/assets/images/warningHome/chat/track4.png";
+import track5 from "@/assets/images/warningHome/chat/track5.png";
+import track6 from "@/assets/images/warningHome/chat/track6.png";
+import track7 from "@/assets/images/warningHome/chat/track7.png";
+import track8 from "@/assets/images/warningHome/chat/track8.png";
+import track9 from "@/assets/images/warningHome/chat/track9.png";
+import track10 from "@/assets/images/warningHome/chat/track10.png";
+import track11 from "@/assets/images/warningHome/chat/track11.png";
+import track12 from "@/assets/images/warningHome/chat/track12.png";
 import { onMounted, ref } from "vue";
+const trackUrls = [track1, track2, track3, track4, track5, track6, track7, track8, track9, track10, track11, track12];
 
 const centerDialogVisible = ref(false);
 
 onMounted(() => {
     // ai与地图交互
     eventBus.on("chat:showTrackDialog", showTrackDialog)
+    eventBus.on("chat:showVideoDialog", showVideoDialogFn)
 })
 
+const showVideoDialog = ref(false)
 const urlIndex = ref(1)
 const showTrackDialog = (url) => {
-    console.log('url', url)
+    showVideoDialog.value = false
     urlIndex.value = url
     centerDialogVisible.value = true
 }
+
+const showVideoDialogFn = (url) => {
+    showVideoDialog.value = true
+    centerDialogVisible.value = true
+}
 </script>
 
 <style lang="scss" scoped>

src/views/warningHome/index.vue

@@ -18,18 +18,22 @@
             <!-- 地图图例 -->
             <!-- <map-legend></map-legend> -->
             <land-use-legend @change="handleLegendChange"></land-use-legend>
+            <div class="show-point yes-events" v-show="showPoint" @click="handleShowPointClick"></div>
         </div>
     </div>
     <div ref="mapRef" class="bottom-map"></div>
+    <track-dialog></track-dialog>
 </template>
 
 <script setup>
 import "./map/mockFarmLayer";
 import StaticMapLayers from "@/components/static_map_change/Layers.js";
-import { onMounted, onUnmounted, ref, reactive, nextTick } from "vue";
+import StaticMapPointLayers from "@/components/static_map_change/pointLayer.js"
+import { onMounted, onUnmounted, ref, nextTick } from "vue";
 import fnHeader from "@/components/fnHeader.vue";
 import landUseLegend from "./components/landUseLegend.vue";
 import WarningMap from "./warningMap";
+import trackDialog from "./components/trackDialog.vue";
 import AlarmLayer from "./map/alarmLayer";
 import DistributionLayer from "./map/distributionLayer";
 import BoundaryLayer from "./map/boundaryLayer";
@@ -44,6 +48,7 @@ let warningMap = new WarningMap();
 let alarmLayer = null;
 let staticMapLayers = null;
 let distributionLayer = null;
+let staticMapPointLayers = null;
 let boundaryLayer = null;
 const mapRef = ref(null);
 const treeRef = ref(null);
@@ -66,15 +71,26 @@ const baseTabs = ["物候期分布", "长势等级", "水利", "灌渠与泵站"
 const activeBaseTab = ref("物候期分布");
 
 const warningLayers = ref({});
-
+const showPoint = ref(false)
 const handleBaseTabClick = (tab) => {
     activeBaseTab.value = tab;
+    showPoint.value = false
+    staticMapPointLayers.hidePoint()
+    if (tab === "资源") {
+        staticMapPointLayers.showPoint()
+    }else if (tab === "灌渠与泵站") {
+        showPoint.value = true
+    }
 };
 
 const handleSmartFarmClick = () => {
     window.open("https://feiniao-pc-gly.feiniaotech.com/#/login");
 };
 
+const handleShowPointClick = () => {
+    eventBus.emit("chat:showTrackDialog")
+}
+
 onMounted(async () => {
     // 使用 nextTick 确保 DOM 已经渲染完成，地图容器有正确的尺寸
     await nextTick();
@@ -91,6 +107,7 @@ onMounted(async () => {
 
     alarmLayer = new AlarmLayer(warningMap.kmap);
     staticMapLayers = new StaticMapLayers(warningMap.kmap);
+    staticMapPointLayers = new StaticMapPointLayers(warningMap.kmap);
     distributionLayer = new DistributionLayer(warningMap.kmap);
     boundaryLayer = new BoundaryLayer(warningMap.kmap);
     await getSpeciesListData();
@@ -177,8 +194,6 @@ onMounted(async () => {
             }
         }
     });
-    // 初始化区域选择器的默认值
-    // initAreaDefaultValue();
 
     // 窗口大小改变时更新地图尺寸
     const handleResize = () => {
@@ -494,6 +509,16 @@ const handleLegendChange = (data) => {
         box-sizing: border-box;
         position: relative;
 
+        .show-point{
+            position: absolute;
+            top: calc(50% - 250px);
+            left: calc(50% - 250px);
+            width: 500px;
+            height: 500px;
+            // background: red;
+            z-index: 2;
+        }
+
         .left,
         .right {
             width: calc(376px + 54px);

src/views/warningHome/warningMap.js

@@ -20,7 +20,8 @@ class HomeMap {
     let level = 9;
     let coordinate = util.wktCastGeom(location).getFirstCoordinate();
     this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 7, 22);
-    // this.addMapListen()
+    // 开启地图点击事件监听，使点位点击可以触发弹窗
+    this.addMapListen();
     // 添加比例尺控件
     const scaleLine = new ScaleLine({
       units: 'metric' // 可以选择 'imperial' 或 'metric'
@@ -52,6 +53,7 @@ class HomeMap {
         }
         if (layer instanceof VectorLayer && layer.get("name") === "pointLayer") {
           hasFeature = true
+          console.log('feature', feature)
           eventBus.emit("chat:showTrackDialog", feature.get("url"))
         }
         return feature;