fix: 首页虚拟农场

src/components/navigation.vue

@@ -26,6 +26,16 @@
             </el-checkbox>
         </el-checkbox-group>
         <!-- <div class="btn" @click="toPage">农场确权</div> -->
+        <!-- 对比 -->
+        <el-checkbox-group
+            class="checkbox-group compare-btn"
+            v-model="checkedCompareChildren"
+            @change="handleCompareChange"
+        >
+            <el-checkbox label="指标对比" value="1">
+                指标对比
+            </el-checkbox>
+        </el-checkbox-group>
     </div>
 </template>
 
@@ -76,6 +86,8 @@ const handleCheckedChange = (e) => {
         eventBus.emit('handleTabItem',checkedChildren.value[0])
     }
 };
+// 对比
+const checkedCompareChildren = ref([]);
 
 function handleActive({name,key}){
     childrenData.value = []
@@ -209,13 +221,16 @@ const toPage = () => {
     .checkbox-group {
         position: absolute;
         top: 74px;
-        right: 30px;
+        right: 160px;
         background: rgba(35, 35, 35, 0.8);
         border-radius: 8px;
         border: 1px solid #555555;
         padding: 10px 20px;
         display: flex;
         flex-direction: column;
+        &.compare-btn {
+            right: 26px;
+        }
         ::v-deep {
             .el-checkbox {
                 margin-right: 0;

src/views/warningHome/components/alarmList.vue

@@ -54,7 +54,7 @@ const alarmList = ref([
     // { name: "干旱缺水", id: 2 },
     // { name: "冲梢风险", id: 3 },
     // { name: "病虫风险", id: 4 },
-    { name: "干热风险", id: 1 },
+    // { name: "干热风险", id: 1 },
     { name: "阴雨沤花", id: 2 },
     { name: "阴天寡照", id: 3 },
 ]);

src/views/warningHome/index.vue

@@ -45,9 +45,9 @@
                 <div class="warning-alarm yes-events" v-show="hideChatMapLayer">
                     <alarm-list></alarm-list>
                 </div>
-                <div class="time-wrap yes-events">
+                <!-- <div class="time-wrap yes-events">
                     <time-line></time-line>
-                </div>
+                </div> -->
             </div>
             <div class="warning-r right yes-events">
                 <!-- <album></album> -->
@@ -103,6 +103,7 @@ import { onMounted, onUnmounted, ref } from "vue";
 import fnHeader from "@/components/fnHeader.vue";
 import WarningMap from "./warningMap";
 import AlarmLayer from "./map/alarmLayer";
+import GardenPointLayer from "./map/gardenPointLayer";
 import album from "./components/album.vue";
 import trackDialog from "./components/trackDialog.vue";
 import chat from "./components/chat_components/index.vue";
@@ -117,6 +118,7 @@ let store = useStore();
 
 let warningMap = new WarningMap();
 let alarmLayer = null;
+let gardenPointLayer = null;
 let staticMapLayers = null;
 let staticMapPointLayers = null;
 const router = useRouter();
@@ -131,10 +133,13 @@ onMounted(() => {
     alarmLayer = new AlarmLayer(warningMap.kmap);
     staticMapLayers = new StaticMapLayers(warningMap.kmap);
     staticMapPointLayers = new StaticMapPointLayers(warningMap.kmap);
+    gardenPointLayer = new GardenPointLayer(warningMap.kmap);
     // setTimeout(() => {
     //   staticMapLayers.show("testpng")
     // },2000)
 
+    eventBus.emit("warningMap:init", warningMap.kmap)
+
     // 图例数据
     eventBus.on("alarmList:warningLayers", (data) => {
         warningLayers.value = data

src/views/warningHome/map/gardenPointLayer.js

@@ -0,0 +1,88 @@
+import eventBus from "@/api/eventBus";
+import * as KMap from "@/utils/ol-map/KMap";
+import { Vector as VectorSource } from "ol/source.js";
+import Style from "ol/style/Style";
+import { WKT } from 'ol/format'
+import { Fill, Text } from "ol/style";
+import { Feature } from "ol";
+import store from '@/store'
+import Photo from "ol-ext/style/Photo";
+import Stroke from 'ol/style/Stroke.js';
+import { newPoint } from "@/utils/map.js";
+
+/**
+ *
+ */
+class gardenPointLayer {
+    constructor(kmap) {
+        let that = this;
+        this.kmap = kmap
+        let vectorStyle = new KMap.VectorStyle()
+        // this.regionLayer = new KMap.VectorLayer("regionLayer", 3, {
+        //     source: new VectorSource({}),
+        //     style: function (f) {
+        //         let style2 = vectorStyle.getPolygonStyle("#032833" + "30", "#c7cb20", 2)
+        //         return [style2]
+        //     }
+        // });
+        // this.kmap.addLayer(this.regionLayer.layer)
+
+        this.gardenPointLayer = new KMap.VectorLayer("gardenUserLayer", 1000, {
+            minZoom: 0,
+            maxZoom: 22,
+            source: new VectorSource({}),
+            style: (feature) => {
+              const organId = feature.get('organId') === this.organId
+              let style1 = new Style({
+                image: new Photo({
+                  src: "https://birdseye-img.sysuimars.com/ai_result/2023/11/20/tree_4414/img_27572.jpg"+ '?imageView2/1/w/300/interlace/1',
+                  radius: 26,
+                  shadow: 0,
+                  crop: true,
+                  onload: function () {
+                    that.gardenPointLayer.layer.changed();
+                  },
+                  displacement: [-1, -1],
+                  stroke: new Stroke({
+                    width: 2,
+                    color: "#fdfcfc00",
+                  }),
+                }),
+              });
+              let style5 = new Style({
+                text: new Text({
+                  text: organId?'':feature.get('name'),
+                  // text: feature.get('name'),
+                  offsetX: 0,
+                  offsetY: 54,
+                  font:"bold 14px sans-serif",
+                  fill: new Fill({ color: "#2199f8" }), // 字体颜色
+                  stroke:new Stroke({ color: "#fff" }), // 字体颜色
+                }),
+              });
+              return [style1, style5];
+            },
+          });
+          this.kmap.addLayer(this.gardenPointLayer.layer);
+
+    }
+
+    initLayer(gardenList){
+        this.gardenPointLayer.refresh()
+        if (this.gardenPointLayer.source) {
+          this.gardenPointLayer.source.clear()
+          // this.gardenReportPointLayer.source.clear()
+        }
+        for(let garden of gardenList){
+          // this.clearOverLay(garden.organId)
+          if (garden.example) {
+            garden.wktVal = garden.wkt
+            this.gardenPointLayer.source.addFeature(newPoint(garden, "wktVal", "myGarden"))
+          }
+          // this.gardenReportPointLayer.source.addFeature(newPoint(garden, "wkt", "myGardenReport"))
+          // this.initGardenWaring(extractCoordinates(garden.wkt), garden)
+        }
+      }
+}
+
+export default gardenPointLayer;

src/views/warningHome/map/mockFarmLayer.js

@@ -23,11 +23,11 @@ class MockFarmLayer {
         this.statusTitleStyleCache = {}
         this.textBgStyleCache = {}
         this.diseaseStyle = new Style({
-            image: new Icon({
-                src: require("@/assets/status/status_yj.png"),
-                scale: 0.7,
-                displacement: [2.5, 40],
-            }),
+            // image: new Icon({
+            //     src: require("@/assets/status/status_yj.png"),
+            //     scale: 0.7,
+            //     displacement: [2.5, 40],
+            // }),
         });
         this.pointStyle = new Style({
             renderer: function (coordinates, state) {
@@ -58,13 +58,13 @@ class MockFarmLayer {
                 }
             })
         })
-        // eventBus.on("MockFarmLayer:click", function ({event, feature}) {
-        //     let targetSampleId = feature.get("targetSampleId")
-        //     let mockFarmId = feature.get("mockFarmId")
-        //     // let lonLat = event.map.getCoordinateFromPixel(event.pixel);
-        //     // console.log('纬度:', lonlat[1]);
-        //     router.push({path:'feature_album',query:{farmId:mockFarmId,sampleId:targetSampleId,timestamp: Date.now()}})
-        // })
+        eventBus.on("MockFarmLayer:click", function ({event, feature}) {
+            let targetSampleId = feature.get("targetSampleId")
+            let mockFarmId = feature.get("mockFarmId")
+            // let lonLat = event.map.getCoordinateFromPixel(event.pixel);
+            // console.log('纬度:', lonlat[1]);
+            router.push({path:'feature_album',query:{farmId:mockFarmId,sampleId:targetSampleId,timestamp: Date.now()}})
+        })
     }
 
 
@@ -87,7 +87,7 @@ class MockFarmLayer {
             style: function (feature) {
                 let f = that.selectFeature(feature)
                 let disease = f.get("disease");
-                let grow = f.get("grow");
+                let grow = (f.get("grow") === "花苞" || f.get("grow") === "露白") ? "谢花" : f.get("grow");
                 let phenology = "褪绿";
                 let img = f.get("img");
                 let name = f.get("name");
@@ -278,15 +278,15 @@ class MockFarmLayer {
         if (fs.length === 1) {
             return fs[0];
         } else {
-            // 优先返回有 disease 的项
+            // 优先返回有 grow 的项
             for (let item of fs) {
-                if (item.get("disease")) {
+                if (item.get("grow")) {
                     return item;
                 }
             }
-            // 其次返回有 grow 的项
+            // 其次返回有 disease 的项
             for (let item of fs) {
-                if (item.get("grow")) {
+                if (item.get("disease")) {
                     return item;
                 }
             }