foster-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 { Fill, Circle, Stroke } from "ol/style";
import { newPoint } from "@/utils/map";
import eventBus from "@/api/eventBus";
import Overlay from 'ol/Overlay'

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

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

    this.treeClusterLayer = new KMap.VectorLayer("tree-cluster-home", 999, {
      minZoom: 15,
      source: this.clusterSource,
      style: (f) => this.getStyle(f)
    })

    this.addMapSingerClick(map.map);

  }
  getIconStyle(feature) {
    const color = feature.get("color")
    const noImg = feature.get("noImg")
    const activeCompare = feature.get('activeCompare')
    let style = new Style({
      image: new Icon({
        src: activeCompare ? require('@/assets/images/map/active-icon-small.png') : feature.get('icon'),
        // src: require(`@/assets/images/map/${feature.get('iconName')}-icon.png`),
        scale: activeCompare ? 0.5 : feature.get('scale'),
      })
    });

    let style2 = new Style({
      image: new Circle({
        radius: 6,                             // 半径
        stroke: new Stroke({           // 边界样式
          color: noImg ? 'transparent' : '#fff',                    // 边界颜色
          width: 2                            // 边界宽度
        }),
        fill: new Fill({               // 填充样式
          color                    // 填充颜色
        })
      })
    });
    return color ? (activeCompare ? style : style2) : 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') && item.get('noImg') === 0 && item.get('wys') === 1 ? res : item
    }
    return res;
  }
  //得到点样式
  getStyle(feature) {
    feature = this.manyFeatureFilter(feature.get('features'))
    return this.getIconStyle(feature)
  }

  initData(farmId, regionId) {
    let that = this
    let selectAll = undefined
    if (regionId === 0) {
      selectAll = 1
    }
    const areaId = selectAll ? undefined : regionId
    VE_API.variety.pointList({ farmId, regionId: areaId, selectAll }).then(({ data }) => {
      this.pointArr = data
      let features = []
      for (let item of data) {
        item.iconName = 'defalut'
        that.getIcon(item)
        let point = newPoint(item);
        features.push(point)
        // console.log('item.dyImg',item.dyImg);
      }
      const source = new VectorSource({
        features: features,
      });
      that.clusterSource.setSource(source)
      // console.log('this.treeClusterLayer.layer.getSource()', that.treeClusterLayer.layer.getSource());
      // if (!that.treeClusterLayer || !that.treeClusterLayer.layer.getSource()) {
      //   that.mapRef.addLayer(that.treeClusterLayer.layer)
      // }

      const layers = that.mapRef.map.getLayers().getArray();
      const exists = layers.includes(that.treeClusterLayer.layer);

      if (!exists) {
        that.mapRef.addLayer(that.treeClusterLayer.layer);
      }
      setTimeout(() => {
        that.mapRef.fit(that.clusterSource.source.getExtent(), { padding: [100, 100, 100, 100] })
      }, 100)
    })
  }

  addMapSingerClick(kmap) {
    let that = this
    // 创建弹窗图层
    this.popup = new Overlay({
      element: document.getElementById('popup-file'),
      positioning: 'right-center',
      offset: [0, 0],
    });
    kmap.addOverlay(this.popup);
    // 点击地图弹窗的关闭-销毁dom
    // eventBus.on("map:destroyPopup", () => {
    //   that.popup.setPosition(undefined)
    // })
    kmap.on("singleclick", (evt) => {
      let hasFeature = false
      kmap.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
        if (layer instanceof VectorLayer && layer.get("name") === "tree-cluster-home") {
          hasFeature = true
          if (that.curPoint) {
            that.curPoint.set("iconName", "defalut");
          }
          const featureArr = feature.get("features")
          let fs = featureArr[0]
          for (let item of featureArr) {
            fs = fs.get('status') > item.get('status') ? fs : item
          }
          that.curPoint = fs
          if (that.isUpdatePoint) {
            fs.set("iconName", "active");
          }
          eventBus.emit("click:point", { farmId: fs.get("farmId"), sampleId: fs.get("sampleId"), data: fs.getProperties() })
        }
      })
      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") })
            }
          }
        })
        if (that.isCompare) {
          eventBus.emit("quitCompare")
          eventBus.emit("compareTree", false)
        }
        if (that.popup) {
          that.popup.setPosition(undefined)
        }
      }
    })
  }

  resetPoint() {
    this.isUpdatePoint = null
    console.log('this.curPoint', this.curPoint);
    if (this.curPoint) {
      // this.curPoint.set("iconName", "defalut");
      this.curPoint.set("activeCompare", false);
    }
  }

  updatePointStatus(e) {
    this.isUpdatePoint = e
  }

  updateAreaStatus(e) {
    this.isUpdateArea = e
  }

  // 切换点位数据

  getIcon(item) {
    // let imgSrc = require(`@/assets/images/map/${item.iconName}-icon.png`)
    let imgSrc = require('@/assets/images/map/status/status-zc.png')
    let scale = 0.8
    if (item.status == 1) {
      imgSrc = require('@/assets/images/map/status/status-szyc.png')
    }
    if (item.status == 2) {
      imgSrc = require('@/assets/images/map/status/status-bh.png')
    }
    if (item.status == 3) {
      imgSrc = require('@/assets/images/map/status/status-ch.png')
    }

    if (item.wys === '1') {
      scale = 0.3
      imgSrc = require('@/assets/images/map/status/wns.png')
    }

    // if (item.farmId === 90263) {
    // }
    if (item.noImg === 1) {
      imgSrc = require('@/assets/images/map/status/defalut-icon.png')
      scale = 0.3
    }
    if (item.nonghu === 1) {
      imgSrc = require('@/assets/images/map/status/nonghu-icon.png')
      scale = 0.3
    }

    item["icon"] = imgSrc
    item["scale"] = scale
  }

  reset(farm, region) {
    this.clearCluster()
    this.initData(farm.id, region.id)
  }

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

export default SamplePointLayer;