baise-pc-vue/src/views/home/map/regionLayer.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 { Circle as CircleStyle, Fill, Text } from "ol/style.js";
import { useRouter } from "vue-router";
import { unByKey } from "ol/Observable";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import { Vector as VectorSource } from "ol/source";
import { newRegionFeature } from "../../zhgl/map";
import Stroke from "ol/style/Stroke";

/**
 * @description 地图层对象
 */
class RegionLayer {
    constructor(map, farm) {
        let that = this;
        this.farmId = farm.id;
        this.vectorStyle = new KMap.VectorStyle();

        this.area = null
        this.index = null

        const colorObj = {
            "defalut":["#fba50410","#eee5e5"],
            "blue":["#2199f894","#2199f894"],
            "blue1":["#2199f804","#2199f804"],
            "blue2":["#2199f87a","#2199f87a"],
            "red":["#b8150094","#b8150094"],
            "red1":["#FF733F94","#FF733F94"],
            "red2":["#FFA96C94","#FFA96C94"],
            "green":["#006f0b94","#006f0b94"],
            "green1":["#32b81a94","#32b81a94"],
            "green2":["#B7FFAA94","#B7FFAA94"]
        }

        this.regionLayer = new KMap.VectorLayer("regionLayer", 99, {
            minZoom: 15,
            style: (f) => {
                let style1
                style1 = this.vectorStyle.getPolygonStyle("#fba50410", "#eee5e5", 2);
                if(f.get("bgName")==="active"){
                    const color = colorObj[f.get("bgColor")]
                    style1 = this.vectorStyle.getPolygonStyle(color[0], color[1], 2);
                }
                const style2 = new Style({
                    text: new Text({
                        text: f.get("id"),
                        color: "#120046",
                        stroke: new Stroke({
                            color: "#FFFFFF",
                            width: 2,
                        }),
                        backgroundFill: new Fill({
                            color: "#f8f9fa10",
                            width: 2,
                        }),
                        font: "30px sans-serif",
                    }),
                });
                return [style1];
            },
        });

        map.addLayer(this.regionLayer.layer);
        this.initData(this.farmId);
    }
    //得到点样式
    getStyle(feature) {
        return this.getIconStyle(feature);
    }

    selectArea(index,color){
        if(this.index !=null){
            this.resetData()
        }
        this.area[index].set("bgColor", color);
        this.area[index].set("bgName", "active");
        this.index = index
    }

    resetData(){
        this.area.forEach(item =>{
            item.set("bgName", "defalut");
        })
    }

    selectAreaMultiple(arr){
        this.resetData()
        arr.forEach(item =>{
            this.area[item.value].set("bgColor", item.color);
            this.area[item.value].set("bgName", "active");
        })
    }

    initData(farmId) {
        let that = this;
        VE_API.region.listArea().then(({ data }) => {
            let features = [];
            for (let item of data) {
                let f = newRegionFeature({...item,bgName:"defalut",bgColor:"defalut"}, "wkt");
                features.push(f);
            }
            that.area = features
            const source = new VectorSource({
                features: features,
            });
            that.regionLayer.layer.setSource(source);
        });
    }

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

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

export default RegionLayer;