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

src/views/warningHome/components/mapLegend.vue

@@ -1,6 +1,10 @@
 <template>
     <div class="map-legend">
-        <div v-for="item in legendObj[type]" :key="item.label" class="legend-item">
+        <div
+            v-for="(item, index) in legendObj[type]"
+            :key="`${type}-${item.label}-${index}`"
+            class="legend-item"
+        >
             <span class="legend-dot" v-if="item.color" :style="{ backgroundColor: item.color }"></span>
             <img class="legend-icon" v-else :src="item.icon" alt="">
             <span class="legend-label">{{ item.label }}</span>
@@ -9,9 +13,9 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
 import legendIcon1 from "@/assets/images/common/legend-icon-1.png";
 import legendIcon2 from "@/assets/images/common/legend-icon-2.png";
+import legendIcon3 from "@/assets/images/common/legend-icon-3.png";
 
 const props = defineProps({
     type: {
@@ -35,6 +39,9 @@ const legendObj = {
         { label: "冷链冷库", icon: legendIcon1 },
         { label: "加工厂", icon: legendIcon2 },
     ],
+    "农服管理": [
+        { label: "冷链仓库", icon: legendIcon3 },
+    ],
 }
 </script>
 
@@ -42,7 +49,7 @@ const legendObj = {
 .map-legend {
     position: fixed;
     bottom: 18px;
-    right: 440px;
+    right: 430px;
     padding: 6px 20px;
     display: flex;
     align-items: center;

src/views/warningHome/index.vue

@@ -151,7 +151,6 @@ import AlarmLayer from "./map/alarmLayer";
 import trackDialog from "./components/trackDialog.vue";
 import alarmList from "./components/alarmList.vue";
 import timeLine from "./components/timeLine.vue";
-import { useRouter } from "vue-router";
 import eventBus from "@/api/eventBus";
 import { areaListOptions } from "./area";
 import { useStore } from "vuex";
@@ -165,10 +164,9 @@ let warningMap = new WarningMap();
 let alarmLayer = null;
 let staticMapLayers = null;
 let staticMapPointLayers = null;
-const router = useRouter();
 
 const areaVal = ref(["3"]);
-const mapRef = ref();
+const mapRef = ref(null);
 const showDetail = ref(false);
 const defaultProps = {
   children: 'children',
@@ -243,11 +241,14 @@ const activeBaseTab = ref("作物分布");
 
 const legendImg = ref("");
 const warningLayers = ref({});
+
 onMounted(() => {
     warningMap.initMap(store.getters.userinfo.location, mapRef.value);
     alarmLayer = new AlarmLayer(warningMap.kmap);
     staticMapLayers = new StaticMapLayers(warningMap.kmap);
     staticMapPointLayers = new StaticMapPointLayers(warningMap.kmap);
+    // 添加 10 个测试点位（从 warningMap 中调用）
+    warningMap.addTestPointsAroundCenter();
     // setTimeout(() => {
     //   staticMapLayers.show("testpng")
     // },2000)

src/views/warningHome/warningMap.js

@@ -7,8 +7,11 @@ import VectorLayer from "ol/layer/Vector.js";
 import WKT from "ol/format/WKT.js";
 import ScaleLine from "ol/control/ScaleLine";
 import { useRouter } from "vue-router";
-import Overlay from 'ol/Overlay'
+import Overlay from "ol/Overlay";
 import eventBus from "@/api/eventBus";
+import Style from "ol/style/Style";
+import Icon from "ol/style/Icon";
+import { newPoint } from "@/utils/map.js";
 /**
  * @description 地图层对象
  */
@@ -17,7 +20,8 @@ class HomeMap {
     let that = this;
     let vectorStyle = new KMap.VectorStyle();
     this.vectorStyle = vectorStyle;
-    that.address = ""
+    that.address = "";
+    this.testPointLayer = null;
   }
 
   initMap(location, target) {
@@ -32,6 +36,48 @@ class HomeMap {
     this.kmap.addControl(scaleLine);
   }
 
+  /**
+   * 在当前地图中心生成并展示 10 个测试点位
+   */
+  addTestPointsAroundCenter() {
+    if (!this.kmap || !this.kmap.map) return;
+    const center = this.kmap.map.getView().getCenter();
+    if (!center || center.length < 2) return;
+    const [lon, lat] = center;
+
+    // 首次创建测试点图层
+    if (!this.testPointLayer) {
+      const vecLayer = new KMap.VectorLayer("testPointLayer", 1200, {
+        visible: true,
+        style: () =>
+          new Style({
+            image: new Icon({
+              src: "/src/assets/images/warningHome/chat/fly-point.png",
+              scale: 0.6,
+            }),
+          }),
+      });
+      this.kmap.addLayer(vecLayer.layer);
+      this.testPointLayer = vecLayer;
+    }
+
+    // 以当前中心为基准生成 10 个随机偏移点位（小范围散点）
+    const points = [];
+    for (let i = 0; i < 10; i++) {
+      const dx = (Math.random() - 0.5) * 0.2;
+      const dy = (Math.random() - 0.5) * 0.2;
+      points.push({
+        id: `test-${i + 1}`,
+        wkt: `POINT(${lon + dx} ${lat + dy})`,
+      });
+    }
+
+    points.forEach((item) => {
+      const feature = newPoint(item);
+      this.testPointLayer.addFeature(feature);
+    });
+  }
+
   addMapListen() {
     let that = this
     // 监听地图点击事件