agriculture-one-map/src/views/addFarm/farmMap.js

import Layer from "ol/layer/Vector";
import config from "@/api/config.js";
import * as KMap from "@/utils/ol-map/KMap";
import Stroke from "ol/style/Stroke";
import * as util from "@/common/ol_common.js";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import { Point } from 'ol/geom';
import Feature from "ol/Feature";
import VectorLayer from "ol/layer/Vector.js";
import WKT from "ol/format/WKT";
import { Cluster, Vector as VectorSource } from "ol/source";
import { newAreaFeature, newAreaPoint, newPolymerFeature, newPoint } from "@/utils/map.js";
import { GARDEN_STATUS_ENUM as STATUS_ENUM } from "@/api/enum.js"
import { getArea } from 'ol/sphere.js';
import * as proj from "ol/proj";
import { register } from "ol/proj/proj4";
import proj4 from "proj4"
import eventBus from "@/api/eventBus";
proj4.defs("EPSG:38572", "+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs");
register(proj4);

/**
 * @description 智能巡园地图层对象
 */
class FarmMap {
    constructor() {
        let that = this;
        let vectorStyle = new KMap.VectorStyle();
        this.vectorStyle = vectorStyle;

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

        this.areaLayer = new KMap.VectorLayer("areaLayer", 999, { style: (f) => that.vectorStyle.getPolygonStyle("#00000010", "#000000", 3) })
        this.subAreaLayer = new KMap.VectorLayer("subAreaLayer", 1000, {
            style: (f) => {
                return that.vectorStyle.getPolygonStyle(f.get("fillColor"), f.get("strokeColor"), 2)
            }
        })
        that.areaVal = 0

        this.treeCacheStyle = {}
        this.treeStyle = (f) => {
            let key = f.get("imgSrc");
            if (that.treeCacheStyle[key]) {
                return that.treeCacheStyle[key]
            }
            let style = new Style({
                image: new Icon({
                    src: f.get("imgSrc"),
                    scale: 1,
                    anchor: [0.5, 1],
                })
            });
            that.treeCacheStyle[key] = style
            return style
        }
        this.treeLayer = new KMap.VectorLayer("statusPointLayer", 999, { style: that.treeStyle })



        this.blueRegionLayer = new KMap.VectorLayer("blueRegionLayer", 99, {
            minZoom: 1,
            maxZoom: 22,
            style: function (f) {
                const selected = f.get('selected');
                if (selected) {
                    return that.vectorStyle.getPolygonStyle("rgba(23, 99, 110, 0.43)", "rgba(37, 227, 255, 0.7)", 2)
                }
                return that.vectorStyle.getPolygonStyle("rgba(0, 0, 0, 0.5)", "rgba(255, 255, 255, 0.2)", 1)
            }
        });
    }

    initMap(location, target) {
        let level = 16;
        let coordinate = util.wktCastGeom(location).getFirstCoordinate();
        this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 1, 22, "vec", true, true);
        this.kmap.addLayer(this.areaLayer.layer)
        this.kmap.addLayer(this.subAreaLayer.layer)
        this.kmap.addLayer(this.treeLayer.layer)
        this.kmap.addLayer(this.blueRegionLayer.layer)
        this.kmap.addLayer(this.treeClusterLayer.layer)

        this.addMapSingerClick()
    }

    initData(farmId, regionId) {
        let that = this
        VE_API.image.pointByRegionId({ farmId, regionId }).then(({ data }) => {
            let features = []
            for (let item of data) {
                item.iconName = 'defalut'
                that.getIcon(item)
                let point = newPoint(item);
                features.push(point)
            }

            if (this.treeClusterLayer &&  this.treeClusterLayer.layer.getSource()) {
                // this.treeClusterLayer.layer.getSource().getSource().clear()
            }
            that.clusterSource = new Cluster({
                distance: 15,
                minDistance: 60,
                source: new VectorSource({
                    features: features,
                }),
            });
            that.treeClusterLayer.layer.setSource(that.clusterSource)
            setTimeout(()=>{
                that.kmap.fit(that.clusterSource.source.getExtent(), {padding:[100,100,100,100]})
            },100)
        })
    }
    //多点的过滤方法
    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)
    }
    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
    }
    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')
        }
        item["icon"] = imgSrc
        item["scale"] = scale
    }

    // 重新渲染地图
    updateMap() {
        setTimeout(() => {
            this.kmap.map.updateSize()
        }, 1000);
    }

    fit(geomOrExtent, padding) {
        this.kmap.fit(geomOrExtent, padding);
    }
    addMapSingerClick() {
        let that = this
        this.kmap.on("singleclick", (evt) => {
            that.kmap.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
                if (layer instanceof VectorLayer && layer.get("name") === "blueRegionLayer") {
                    feature.set('selected', feature.get("selected") ? false : true);

                    let geom = feature.getGeometry().clone()
                    geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572"))
                    let areaItem = getArea(geom)
                    areaItem = (areaItem + areaItem / 2) / 1000;
                    if (feature.get('selected') === true) {
                        that.areaVal += areaItem
                    } else {
                        that.areaVal -= areaItem
                    }
                    eventBus.emit("editNsMap:areaVal", that.areaVal)
                }
            })
        })
    }


    // 状态图例
    handleStatusIcon(obj) {
        let key = this.afterDayNum == 3 ? "ycStatus" : this.afterDayNum == 5 ? "ycStatus5d" : "ycStatus7d"
        let hasStatus = false
        let imgSrc = null
        if (obj[key] == 3) {
            hasStatus = true
            imgSrc = require('@/assets/status/status_bcyc.png')
            return { hasStatus, imgSrc }
        }
        if (obj[key] == 2) {
            hasStatus = true
            imgSrc = require('@/assets/status/status_szyc.png')
            return { hasStatus, imgSrc }
        }
        // if (obj[key] == 1) {
        //     hasStatus = true
        //     imgSrc = require('@/assets/status/status_dfh.png')
        //     return { hasStatus, imgSrc }
        // }
        // if (obj[key] == 0) {
        //     hasStatus = true
        //     imgSrc = require('@/assets/status/status_xfdw.png')
        //     return { hasStatus, imgSrc }
        // }
        return { hasStatus, imgSrc }
    }

    // 区级颜色
    handleStatusColor(key) {
        let fillColor = '#ffffff00'
        let strokeColor = '#ffffff'
        switch (key) {
            case STATUS_ENUM.DONE:
                fillColor = 'rgba(95,255,197,0)'
                strokeColor = '#ffffff'
                break;
            case STATUS_ENUM.ABNORMAL_GROWTH:
                fillColor = 'rgba(255,189,5,0.2)'
                strokeColor = '#FFE44E'
                break;
            case STATUS_ENUM.ABNORMAL_Pest:
                fillColor = 'rgba(51,11,3,0.52)'
                strokeColor = '#F55A5A'
                break;
            case STATUS_ENUM.PENDING_REVIEW:
                fillColor = 'rgba(3,40,51,0.2)'
                strokeColor = '#032833'
                break;
            case STATUS_ENUM.REVIEWED:
                fillColor = 'rgba(95,255,197,0.1)'
                strokeColor = '#5FFFC5'
                break;
            default:
                break;
        }
        return { fillColor, strokeColor }
    }

    initArea(data, callback) {
        let that = this
        this.areaLayer.refresh()
        for (let item of data) {
            that.areaLayer.addFeature(newAreaFeature(item))
            that.areaPointLayer.addFeature(newAreaPoint(item))
        }
        callback && callback()
    }

    initSubArea(organId, callback) {
        let that = this
        this.subAreaLayer.refresh()
        VE_API.sub_area.list({ organId }).then(({ data, code }) => {
            for (let item of data) {
                item.fillColor = that.handleStatusColor(item.status).fillColor
                item.strokeColor = that.handleStatusColor(item.status).strokeColor
                that.subAreaLayer.addFeature(newPolymerFeature(item))
            }
            callback && callback()
        })
    }

    toggleLegend(val) {
        // this.treeLayer.layer.setVisible(val)
        this.treeClusterLayer.layer.setVisible(val)
    }


    getBlueRegion({ gardenId, regionId }, callback) {
        this.blueRegionLayer.source && this.blueRegionLayer.source.clear()
        VE_API.farm.blueRegionList({ farmId: gardenId, regionId }).then(({ data, code }) => {
            for (let item of data) {
                item.wkt = item.geom
                item.id = item.blueZoneCode
                let feature = newAreaFeature(item);
                this.blueRegionLayer.addFeature(feature)
            }
            this.kmap.fit(this.blueRegionLayer.source.getExtent(), [0, 0, 0, 0])
            callback && callback(data.length)
        })
    }

    setBlueRegion(data) {
        this.blueRegionLayer.source.getFeatures().forEach(feature => {
            // 检查 feature 的属性中是否有 selected 属性且为 true
            data.map(item => {
                if (item.id === feature.get('id')) {
                    feature.set('selected', true)
                }
            })
        });
    }

    toggleAllArea(val) {
        let that = this
        that.areaVal = 0
        this.blueRegionLayer.source.getFeatures().forEach(feature => {
            feature.set('selected', val)
            if (val === true) {
                let geom = feature.getGeometry().clone()
                geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572"))
                let areaItem = getArea(geom)
                areaItem = (areaItem + areaItem / 2) / 1000;
                that.areaVal += areaItem
            }
            eventBus.emit("editNsMap:areaVal", that.areaVal)
        });

    }
    getSelectedBlueRegion() {
        // 用于存储 selected 为 true 的 feature 的 id
        const selectedFeatureIds = [];
        // 遍历所有 features
        this.blueRegionLayer.source.getFeatures().forEach(feature => {
            // 检查 feature 的属性中是否有 selected 属性且为 true
            if (feature.get('selected') === true) {
                // 获取 feature 的 id
                const id = feature.get('id');
                // 将 id 添加到数组中
                selectedFeatureIds.push({ id });
            }
        });
        return selectedFeatureIds;
    }
}

export default FarmMap;