新增采样点显示

src/api/config.js

@@ -1,3 +1,4 @@
+// let server = "http://127.0.0.1:81/";
 let server = "https://birdseye-api.feiniaotech.sysuimars.cn/"
 let mapServer = "https://birdseye-api.sysuimars.cn/"
 let serverMock = "https://mock.apipark.cn/m1/4662471-4313509-default/"
@@ -10,7 +11,6 @@ module.exports = {
     base_map_url: mapServer + "mini/",
     dji_cloud_base :djiCloudBase,
     image_url:server+"images/",
-    base_img_url : "https://img.sysuimars.com/",
     base_img_url2 : "https://birdseye-img-ali-cdn.sysuimars.com/",
     base_img_url3 : "https://birdseye-img.sysuimars.com/",
     base_video_url : "https://minio.sysuimars.com/sysuimars/",

src/api/modules/region.js

@@ -0,0 +1,11 @@
+//采样点接口
+const config = require("../config")
+
+
+
+module.exports = {
+    list: {
+        url: config.base_url + "region/list",
+        type: "post",
+    },
+}

src/api/modules/system.js

@@ -22,10 +22,6 @@ module.exports = {
         url: config.base_url + "cfg/get",
         type: "post",
     },
-    getDeviceReceiverByAreaId: {
-        url: config.base_url + "deviceReceiver/getByAreaId/{areaId}",
-        type: "post",
-    },
     weather:{
         url:config.base_url + "lz_weather7d/get/{organId}",
         type:"get"
@@ -38,10 +34,6 @@ module.exports = {
         url: config.base_url + "town/dropdown",
         type:"get"
     },
-    areaList:{
-        url: config.base_url + "lz_area/list",
-        type:"get"
-    },
     getTown:{
         url: config.base_url + "town/get",
         type:"get"

src/utils/ol-map/Map.js

@@ -119,6 +119,8 @@ class Map {
 	  const cva_wmts = await VE_API.system.getCfg({"k":"cva_wmts_mkt","resultType":"json"});
 	  this.tdtImgLayer = new WMTSLayer(img_wmts.data, projection,this);
 	  this.cva_torLayer = new  WMTSLayer(cva_wmts.data,projection,this);
+	  let xyz2 = config.base_img_url3 + 'map/lby/{z}/{x}/{y}.png';
+	  this.addXYZLayer(xyz2,{minZoom:15,maxZoom:22});
   }
 	addXYZLayer(url,options){
 		let xyz = new XYZLayer(url,options,3);

src/views/home/index.vue

@@ -50,18 +50,31 @@ import homePage from "./components/homePage.vue";
 import weatherPage from "./components/weatherPage.vue";
 import phenologyPage from "./components/phenologyPage.vue";
 import { useRouter } from "vue-router";
+import SamplePointLayer from "./samplePointLayer";
+import {useStore} from "vuex";
+let store = useStore()
 const components = {
   homePage,
   weatherPage,
   phenologyPage,
 };
-
+//当前农场
+const currentFarm = {
+  id: store.getters.userinfo.curFarmId,
+  name: store.getters.userinfo.curFarmName,
+}
+//当前区域
+const currentRegion = {
+  id: null,
+  name: null
+}
 let homeMap = new HomeMap();
+let samplePointLayer = null
 const router = useRouter();
 const mapRef = ref();
 onMounted(() => {
-  let location = "POINT (113.78049350268851 23.419886891845312)";
-  homeMap.initMap(location, mapRef.value);
+  homeMap.initMap(store.getters.userinfo.location, mapRef.value);
+  samplePointLayer = new SamplePointLayer(homeMap.kmap.map, currentFarm, currentRegion)
 });
 
 const currentComponent = ref("homePage");

src/views/home/regionLayer.js

@@ -0,0 +1,76 @@
+import config from "@/api/config.js";
+import * as KMap from "@/utils/ol-map/KMap";
+import * as util from "@/common/ol_common.js";
+import Point from "ol/geom/Point.js";
+import Feature from "ol/Feature";
+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 {unByKey} from "ol/Observable";
+import Style from "ol/style/Style";
+import Icon from "ol/style/Icon";
+import {Cluster, Vector as VectorSource} from "ol/source";
+import {newRegionFeature} from "../zhgl/map";
+
+/**
+ * @description 地图层对象
+ */
+class SamplePointLayer {
+  constructor(map, farm) {
+    let that = this;
+    this.farmId = farm.id
+    let vectorStyle = new KMap.VectorStyle();
+    this.vectorStyle = vectorStyle;
+
+    this.regionLayer = new KMap.VectorLayer("regionLayer",999,{
+      minZoom:15,
+      source:this.clusterSource,
+      style:(f)=> this.getStyle(f)})
+    map.addLayer(this.regionLayer.layer)
+    this.initData(this.farmId)
+  }
+  getIconStyle(feature){
+    let style = new Style({
+      image: new Icon({
+        src: feature.get('icon'),
+        scale:1,
+      })
+    });
+    return style
+  }
+  //得到点样式
+  getStyle(feature){
+    return this.getIconStyle(feature)
+  }
+
+  initData(farmId){
+    let that = this
+    VE_API.sample.list({farmId}).then(({data})=>{
+      let features = []
+      for(let item of data){
+        that.getIcon(item)
+        let f = newRegionFeature(item);
+        features.push(f)
+      }
+      const source = new VectorSource({
+        features: features,
+      });
+      that.regionLayer.setSource(source)
+    })
+  }
+
+  reset(farm, region){
+    this.clearCluster()
+    this.initData(farm.id, region.id)
+  }
+
+  // 清除聚合图层，解除绑定
+  clearCluster() {
+    if (this.regionLayer) {
+      this.regionLayer.layer.getSource().clear()
+    }
+  }
+}
+
+export default SamplePointLayer;

src/views/home/samplePointLayer.js

@@ -10,61 +10,96 @@ import { useRouter } from "vue-router";
 import {unByKey} from "ol/Observable";
 import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
-import {Cluster} from "ol/source";
+import {Cluster, Vector as VectorSource} from "ol/source";
+import {newPoint} from "../zhgl/map";
 
 /**
  * @description 地图层对象
  */
 class SamplePointLayer {
-  constructor(map, farmId, regionId) {
+  constructor(map, farm, region) {
     let that = this;
-    this.farmId = farmId
-    this.regionId = regionId
+    this.farmId = farm.id
+    this.regionId = region.id
     let vectorStyle = new KMap.VectorStyle();
     this.vectorStyle = vectorStyle;
-
-
-    const clusterSource = new Cluster({
+    this.clusterSource = new Cluster({
       distance: 15,
-      // minDistance: 60,
-      source: source,
+      minDistance: 60,
     });
 
     this.treeClusterLayer = new KMap.VectorLayer("tree-cluster",999,{
       minZoom:15,
-      source:clusterSource,
-      style:(feature)=> {
-        const size = feature.get('features').length;
-        // 只有一个数据，不需要聚合，直接使用第一项数据的图标
-        let style = null
-        if (size == 1) {
-          feature = feature.get('features')[0]
-            style = new Style({
-              image: new Icon({
-                src: feature.get('imgSrc'),
-                scale:1,
-              })
-            });
-          return style
-        }
-        return style;
-      }})
+      source:this.clusterSource,
+      style:(f)=> this.getStyle(f)})
     map.addLayer(this.treeClusterLayer.layer)
     this.initData(this.farmId, this.regionId)
   }
+  getIconStyle(feature){
+    let style = new Style({
+      image: new Icon({
+        src: feature.get('icon'),
+        scale:1,
+      })
+    });
+    return style
+  }
+  //多点的过滤方法
+  manyFeatureFilter(features){
+    let res = features[0]
+    if(features.length == 1){
+      return res
+    }
+    for(let item of features){
+      res = res.get('status') > item.get('status') ? res : item
+    }
+    return res;
+  }
+  //得到点样式
+  getStyle(feature){
+    feature = this.manyFeatureFilter(feature.get('features'))
+    return this.getIconStyle(feature)
+  }
 
   initData(farmId, regionId){
+    let that = this
     VE_API.sample.list({farmId,regionId}).then(({data})=>{
-
+      let features = []
+      for(let item of data){
+        that.getIcon(item)
+        let point = newPoint(item);
+        features.push(point)
+      }
+      const source = new VectorSource({
+        features: features,
+      });
+      that.clusterSource.setSource(source)
     })
   }
 
+  getIcon(item){
+    let imgSrc = require('@/assets/status/status_xfdw.png')
+    if(item.status == 1){
+      imgSrc = require('@/assets/status/status_dfh.png')
+    }
+    if(item.status == 2){
+      imgSrc = require('@/assets/status/status_szyc.png')
+    }
+    if(item.status == 3){
+      imgSrc = require('@/assets/status/status_bcyc.png')
+    }
+    item["icon"] = imgSrc
+  }
+
+  reset(farm, region){
+    this.clearCluster()
+    this.initData(farm.id, region.id)
+  }
+
   // 清除聚合图层，解除绑定
   clearCluster() {
     if (this.treeClusterLayer) {
       this.treeClusterLayer.layer.getSource().getSource().clear()
-      this.treeClusterLayer = null
-      unByKey(this.listenKey)
     }
   }
 }

src/views/zhgl/map.js

@@ -91,7 +91,7 @@ export const newRegionFeature = (data)=>{
 
 
 export const newPoint = (data)=>{
-    let point = new WKT().readGeometry(data["wkt"])
+    let point = new WKT().readGeometry(data["wkt"] || data["point"])
     let feature = new Feature({
         geometry: point
     });