baise-pc-vue/src/views/warningHome/map/alarmLayer copy.js

import eventBus from "@/api/eventBus";
import * as KMap from "@/utils/ol-map/KMap";
import { Vector as VectorSource } from "ol/source.js";
import Style from "ol/style/Style";
import { WKT } from 'ol/format'
import { Fill, Text } from "ol/style";
import { Feature } from "ol";
import store from '@/store'

/**
 *
 */
class AlarmLayer {
    constructor(kmap) {
        let that = this;
        this.kmap = kmap
        let vectorStyle = new KMap.VectorStyle()
        this.regionLayer = new KMap.VectorLayer("regionLayer", 3, {
            source: new VectorSource({}),
            style: function (f) {
                let style2 = vectorStyle.getPolygonStyle("#032833" + "30", "#c7cb20", 2)
                return [style2]
            }
        });
        this.kmap.addLayer(this.regionLayer.layer)

        this.warningLayers = {}
        // 底图数据
        eventBus.on("alarmList:warningLayers", (data) => {
            this.warningLayers = data
            this.plantLayer1 = this.kmap.addXYZLayer(
                this.warningLayers["面积"],
                { minZoom: 6, maxZoom: 22 },
                99,
                0.4
            );
            this.plantLayer1.layer.setOpacity(0.4)

            this.plantLayer2 = this.kmap.addXYZLayer(
                this.warningLayers["产量"],
                { minZoom: 6, maxZoom: 22 },
                99,
                0.4
            );
            this.plantLayer2.layer.setOpacity(0.4)
            this.plantLayer3 = ""
            this.plantLayer4 = ""
        })

        // 预警底图
        eventBus.on("alarmList:changeMapLayer", function (url) {
            console.log('uu', url);
            that.initLayer("https://birdseye-img.sysuimars.com/map/risk/lby_dwdh/{z}/{x}/{y}.png")
        })
        // 种植面积，预估产量，底图切换
        eventBus.on("warningHome:toggleMapLayer", function (name) {
            that.togglePlantLayer(name)
        })
        // 切换区域广东省or从化区
        that.areaId = "3"
        eventBus.on("warningHome:toggleArea", (id) => {
            that.areaId = id
            that.changeDistrict(id)
        })
        // 时间轴
        eventBus.on("weatherTime:changeTime", (index) => {
            console.log('vvv',index);
            that.toggleSmallLayer(index)
        })
    }

    initLayer(layerUrl) {
        this.lizhiLayer && this.kmap.map.removeLayer(this.lizhiLayer.layer)
        // 104.3017367175,30.329292136
        this.lizhiLayer = this.kmap.addXYZLayer(
            layerUrl,
            { minZoom: 5, maxZoom: 22 },
            99,
            0.4
        );
        this.lizhiLayer.layer.setOpacity(0.7)
        // this.kmap.map.getView().setZoom(18)
        // this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
    }

    togglePlantLayer(name) {
        const url = this.warningLayers[name]
        console.log('rrrr', url);
        // const url = "https://birdseye-img.sysuimars.com/map/szts/{z}/{x}/{y}.png"
        // console.log('uu', url);
        // this.plantLayer && this.kmap.map.removeLayer(this.plantLayer.layer)
        // 104.3017367175,30.329292136
        // this.plantLayer = this.kmap.addXYZLayer(
        //     url,
        //     { minZoom: 6, maxZoom: 22 },
        //     99,
        //     0.4
        // );
        // this.plantLayer.layer.setOpacity(0.4)
        if (name === "面积") {
            this.plantLayer1.layer.setVisible(true)
            this.plantLayer2.layer.setVisible(false)
        } else if(name === "产量") {
            this.plantLayer1.layer.setVisible(false)
            this.plantLayer2.layer.setVisible(true)
        }
        this.kmap.map.getView().setZoom(7.3)
        this.kmap.map.getView().setCenter([113.679, 23.607])
        // this.kmap.map.getView().setCenter([113.61702297075017, 23.584863449735067])
        // this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])

        
        // this.plantLayer && this.kmap.map.removeLayer(this.plantLayer.layer)
        // // 104.3017367175,30.329292136
        // this.plantLayer = this.kmap.addXYZLayer(
        //     url,
        //     { minZoom: 5, maxZoom: 22 },
        //     99,
        //     0.4
        // );
        // this.plantLayer.layer.setOpacity(0.7)
        // this.kmap.map.getView().setZoom(18)
        // this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
    }

    // 切换地图区域
    changeDistrict(id) {
        VE_API.warning.fetchAreaDistrict({ id }).then(({ data }) => {
            if (data.geom) {
                let f = new Feature({
                    geometry: new WKT().readGeometry(data.geom)
                })
                this.regionLayer.source.addFeature(f)
                this.kmap.map.getView().fit(f.getGeometry(), { padding: [180, 150, 100, 150] })
            }
            if (id === "3") {
                this.kmap.map.getView().setZoom(7.2)
                // const position = store.getters.userinfo.location
                this.kmap.map.getView().setCenter([113.679, 23.607])
            }
        })
    }

    // 从化区-切换到小范围
    toggleSmallLayer(index) {
        if (this.areaId === "3") {
            // 虚拟果园会播放物候变化
        }
        if (this.areaId === "3186") {
            this.kmap.map.getView().setZoom(12+index)
            // const position = store.getters.userinfo.location
            this.kmap.map.getView().setCenter([113.679, 23.607])
        }
    }
}

export default AlarmLayer;