foster-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, newPoint} from "@/utils/map";
import Stroke from "ol/style/Stroke";

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

        this.area = null
        this.index = null

        this.regionLayer = new KMap.VectorLayer("regionLayer", 99, {
            minZoom: 15,
            style: (f) => {
                const style = new Style({
                    fill: new Fill({
                        color: "#0000004d",
                    }),
                    stroke: new Stroke({
                        color: "#FFE17E80", // 边框
                        width: 2,
                    }),
                });
                return [style];
            },
        });

        this.gardenPointLayer = new KMap.VectorLayer("gardenUserLayer", 100, {
            minZoom: 15,
            maxZoom: 22,
            source: new VectorSource({}),
            style: (feature) => {
                let style1 = new Style({
                    image: new Icon({
                        src: require("@/assets/images/foster-home/area-bg.png"),
                        scale: 1,
                        // displacement: [70, 25],  // 向右30px，向上30px
                    }),
                    text: new Text({
                        text: feature.get("name"), // 显示的文字
                        font: "30px PangMenZhengDao",
                        fill: new Fill({
                            color: "#FFFFFF", // 文字颜色
                        }),
                        stroke: new Stroke({
                            color: "#000", // 文字描边
                            width: 1,
                        }),
                    }),
                });
                return [style1];
            },
            });

        map.addLayer(this.regionLayer.layer);
        map.addLayer(this.gardenPointLayer.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");
            item.set("bgColor", "defalut");
        })
    }

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

    initData(data) {
        console.log('da', data);
        if (!data) return
        let that = this;
        let features = [];
        for (let item of data) {
            item.regionWkt = item.wkt
            let f = newRegionFeature({...item,bgName:"defalut",bgColor:"defalut"}, "wkt");
            features.push(f);

            item.wkt = item.pointWkt
            this.gardenPointLayer.source.addFeature(newPoint(item, "wktVal", "myGarden"))
        }
        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;