feat：添加资源图层

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

@@ -8,7 +8,7 @@
                 </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>
@@ -16,7 +16,20 @@
 
 <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);
 

src/views/warningHome/index.vue

@@ -21,15 +21,18 @@
         </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 +47,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);
@@ -69,6 +73,10 @@ const warningLayers = ref({});
 
 const handleBaseTabClick = (tab) => {
     activeBaseTab.value = tab;
+    staticMapPointLayers.hidePoint()
+    if (tab === "资源") {
+        staticMapPointLayers.showPoint()
+    }
 };
 
 const handleSmartFarmClick = () => {
@@ -91,6 +99,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 +186,6 @@ onMounted(async () => {
             }
         }
     });
-    // 初始化区域选择器的默认值
-    initAreaDefaultValue();
 
     // 窗口大小改变时更新地图尺寸
     const handleResize = () => {

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;