baise-pc-vue/src/views/home/map/samplePointLayer.js

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 {newPoint} from "../../zhgl/map";
import eventBus from "@/api/eventBus";

/**
 * @description 地图层对象
 */
class SamplePointLayer {
  constructor(map, farm, region) {
    let that = this;
    this.farmId = farm.id
    this.regionId = region.id
    let vectorStyle = new KMap.VectorStyle();
    this.vectorStyle = vectorStyle;
    this.clusterSource = new Cluster({
      distance: 15,
      minDistance: 60,
    });

    this.curPoint = null
    this.curArea = null
    this.isUpdatePoint = null
    this.isUpdateArea = null

    this.treeClusterLayer = new KMap.VectorLayer("tree-cluster",999,{
      minZoom:15,
      source:this.clusterSource,
      style:(f)=> this.getStyle(f)})
    this.yellowBlockLayer = new KMap.VectorLayer("yellow-block",999,{
      minZoom:15,
      // source:this.clusterSource,
      // source:"POINT(113.61396985128522 23.5859386716038)",
      style: () => {
        return new Style({
          image: new Icon({
            src: require("@/assets/images/map/yellow-block.png"),
            scale: 0.4,
          }),
        });
      },
    })
    map.addLayer(this.treeClusterLayer.layer)
    map.addLayer(this.yellowBlockLayer.layer);

    let point = new Feature(new Point([113.61396985128522,23.5859386716038]));
    let point1 = new Feature(new Point([113.61390710255375 ,23.586379215663726]));
    let point2 = new Feature(new Point([113.61491218688275 ,23.58671519555776]));
    this.yellowBlockLayer.addFeature(point);
    this.yellowBlockLayer.addFeature(point1);
    this.yellowBlockLayer.addFeature(point2);

    this.initData(this.farmId, this.regionId)
    this.addMapSingerClick(map);
  }
  getIconStyle(feature){
    let style = new Style({
      image: new Icon({
        src: feature.get('icon'),
        // src: require(`@/assets/images/map/${feature.get('iconName')}-icon.png`),
        scale:feature.get('scale'),
      })
    });
    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:766,regionId:2}).then(({data})=>{
      // data[0].status = 9
      let features = []
      for(let item of data){
        item.iconName='defalut'
        that.getIcon(item)
        let point = newPoint(item);
        features.push(point)
      }
      const source = new VectorSource({
        features: features,
      });
      that.clusterSource.setSource(source)
    })
  }

  addMapSingerClick(kmap){
    let that = this
    kmap.on("singleclick", (evt) => {
      let hasFeature = false
      kmap.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
        if (layer instanceof VectorLayer && layer.get("name") === "tree-cluster") {
          hasFeature = true
          if(that.curPoint){
            that.curPoint.set("iconName", "defalut");
          }
          const featureArr = feature.get("features")
          const fs = featureArr[0]
          that.curPoint = fs
          if(that.isUpdatePoint){
            fs.set("iconName", "active");
          }
          eventBus.emit("click:point",{name:fs.get("id"),value:fs.get("highYield")})
        }
        if (layer instanceof VectorLayer && layer.get("name") === "yellow-block") {
          hasFeature = true
          eventBus.emit("click:yellowBlock",feature.get("geometry").flatCoordinates[0])
        }
      })
      if(!hasFeature){
          kmap.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
            if (layer instanceof VectorLayer && layer.get("name") === "regionLayer") {
              hasFeature = false
              if(that.curArea){
                that.curArea.set("bgName", "defalut");
              }
              that.curArea = feature
              if(that.isUpdateArea){
                feature.set("bgName", "active");
                eventBus.emit("click:updateArea",{name:feature.get("id"),value:feature.get("blueZone")})
              }else{
                eventBus.emit("click:area",{name:feature.get("id"),value:feature.get("highYield")})
              }
            }
        })
      }
    })
  }

  resetPoint(){
    this.isUpdatePoint = null
    if(this.curPoint){
      this.curPoint.set("iconName", "defalut");
    }
  }

  updatePointStatus(e){
    this.isUpdatePoint = e
  }

  updateAreaStatus(e){
    this.isUpdateArea = e
  }

  getIcon(item){
    console.log(item)
    let imgSrc = require(`@/assets/images/map/${item.iconName}-icon.png`)
    let scale = 0.25
    if(item.status == 1){
      imgSrc = require('@/assets/images/map/active-icon.png')
    }
    if(item.status == 2){
      imgSrc = require('@/assets/status/status_szyc.png')
      scale = 0.8
    }
    if(item.status == 3){
      imgSrc = require('@/assets/status/status_bcyc.png')
      scale = 0.8
    }
    item["icon"] = imgSrc
    item["scale"] = scale
  }

  reset(farm, region){
    console.log('farm',farm);
    this.clearCluster()
    this.initData(farm.id, region.id)
  }

  // 清除聚合图层，解除绑定
  clearCluster() {
    if (this.treeClusterLayer) {
      this.treeClusterLayer.layer.getSource().getSource().clear()
    }
  }
}

export default SamplePointLayer;