agriculture-one-map/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 "@/utils/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"],
            "red3":["#FF26267a","#FF26267a"],
            "green":["#006f0b94","#006f0b94"],
            "green1":["#32b81a94","#32b81a94"],
            "green2":["#B7FFAA94","#B7FFAA94"],
            "red4":["#ff262663","#ff262663"]
        }

        this.regionLayer = new KMap.VectorLayer("regionLayer", 99, {
            minZoom: 15,
            style: (f) => {
                const color = colorObj[f.get("bgColor")]
                const style1 = this.vectorStyle.getPolygonStyle(color[0], color[1], 2);
                // let style2 = null
                // if(f.get("id")==0){
                //     style2 = new Style({
                //         image: new Icon({
                //             src: require("@/assets/images/map/yellow-block.png"),
                //             scale: 0.4,
                //         }),
                //         // 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");
            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(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);
            }
            features.push(
                newRegionFeature({
                    highYield:1,
                    id:"0",
                    blueZone:"0",
                    dateValue:"",
                    bgName:"defalut",
                    bgColor:"red4",
                    wkt:"MULTIPOLYGON (((113.61390710255375 23.586379215663726,113.6140224799741 23.586530760891492,113.61429532483612 23.586727463001182,113.61471252366596 23.587019343551333,113.6151313088028 23.587376262702094,113.61544063873373 23.587220804583183,113.61557230224264 23.58706376015681,113.61544222504097 23.586978099560497,113.6151614486422 23.586913060959716,113.61506827952462 23.586818940057697,113.61491218688275 23.58671519555776,113.61477512992872 23.58657909038834,113.61452195527784 23.586449647709514,113.61430590021848 23.586303072911505,113.61396420961808 23.58621741231542,113.61390710255375 23.586379215663726)))"
                },"wkt")
            )
            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;