baise-pc-vue/src/components/static_map_change/Layers.js

import Style from "ol/style/Style";
import {deepClone} from '@/common/commonFun'
import {Cluster, Vector as VectorSource} from 'ol/source.js';
import { Vector as VectorLayer} from 'ol/layer.js';
import {boundingExtent} from 'ol/extent.js';
import {
    Circle as CircleStyle,
    Fill,
    Text,
} from 'ol/style.js';
import {unByKey} from 'ol/Observable';
import ImageLayer from 'ol/layer/Image';
import ImageStatic from 'ol/source/ImageStatic';
import XYZLayer from "../../utils/ol-map/XYZLayer";
import GeoJsonLayer from "../../utils/ol-map/GeoJsonLayer";
import eventBus from "@/api/eventBus";
import {VectorStyle} from "../../utils/ol-map/KMap";
import StaticImgLayer from "../../utils/ol-map/StaticImgLayer";

function getColorByVal(val, legendData) {
    for (let i = 0; i < legendData.level.length; i++) {
        let [min, max] = legendData.level[i];
        if (val >= min && val <= max) {
            return legendData.colors[i];
        }
    }
    return undefined; // 如果 val 不在任何区间内，返回 undefined
}

/**
 * @description 全景化地图层对象
 */
class StaticMapLayers {
    constructor(map){
        this.initStaticMapLayers(map)
        this.vectorStyle = new VectorStyle()
        this.layerData = {}
        this.cacheStyle = {}
        this.timeIndex = 0
        this.layerName = ""
    }
    initStaticMapLayers(map){
        let that = this
        VE_API.warning.fetchWarningLayer({
            k: "static_map",
            resultType: "json",
        }).then(({data}) => {
            for(let key in data){
                let item = data[key]
                if(item.type === "xyz"){
                    that.layerData[key] = {legend:item.legend, layer:that.addXyzLayer(map, item)}
                }else if(item.type === "geojson"){
                    that.layerData[key] = {legend:item.legend, legendData:item.legendData, layer:that.addGeoJsonLayer(map, item, key)}
                }else if(item.type === "img"){
                    that.layerData[key] = {legend:item.legend, layer:that.addStaticImgLayer(map, item)}
                }
            }
            // that.autoTest()
            // 时间轴
            eventBus.on("weatherTime:changeTime", ({index}) => {
                this.timeIndex = index
                this.show(this.layerName)
            })
        })
    }
    
    show(key,isFit = false){
        if (isFit) {
            this.timeIndex = 0
        }
        this.layerName = key
        this.hideAll()
        let keyText = key+this.timeIndex
        let layer = this.layerData[keyText].layer
        eventBus.emit("alarmList:changeMapLayer", {legendUrl:this.layerData[keyText].legend,
            colors:layer.layer.get("colors"), labels:layer.layer.get("labels")});
        layer.show()
        if(isFit && layer.layer.getExtent){
            let extent = layer.layer.getExtent();
            if(extent && extent[0] != Infinity){
                console.log("show layer",extent)
                layer.mapInstance.fit(extent,{padding:[100,100,100,100]})
            }
        }
    }
    hideAll(){
        for(let key in this.layerData){
            let layer = this.layerData[key].layer
            layer.hide()
        }
    }

    addStaticImgLayer(map, item){
        let imgLayer = new StaticImgLayer(item.url, item, 3, map);
        imgLayer.hide()
        return imgLayer
    }

    addXyzLayer(map, item){
        let xyz = new XYZLayer(item.url, item, 3, map);
        xyz.hide()
        return xyz
    }

    addGeoJsonLayer(map, item, key){
        let that = this
        item["style"] = function(feature){
            let val = feature.get(item.legendData.paramKey)
            let cacheKey = `${key}_${item.legendData.paramKey}_${val}`
            let style = that.cacheStyle[cacheKey]
            if(!style){
                let color = getColorByVal(val, item.legendData)
                let fillColor = color
                let strokeColor = color
                style = that.vectorStyle.getPolygonStyle(fillColor, strokeColor, 1)
                that.cacheStyle[cacheKey] = style
            }
            return style
        }
        let geoJsonLayer = new GeoJsonLayer(item.url, item, 3, map);
        geoJsonLayer.layer.set("colors", item.legendData.colors)
        geoJsonLayer.layer.set("labels", item.legendData.label)
        geoJsonLayer.hide()
        return geoJsonLayer
    }



    autoTest(){
        let that = this
        let keys = []
        for(let key in that.layerData){
            keys.push(key)
        }
        let index = 0
        setTimeout(() => {
            that.show("分散种植0",true)
            index = (index + 1) % keys.length

        }, 2000);
    }
}

export default StaticMapLayers