baise-pc-vue/src/views/warningHome/map/alarmLayer.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 = {}
        this.plantLayer = null
        this.warningLayer = null
        // 底图数据
        eventBus.on("alarmList:warningLayers", (data) => {
            this.warningLayers = data
        })

        // 预警底图
        eventBus.on("alarmList:changeMapLayer", function ({url, type}) {
            that.plantLayer && that.kmap.map.removeLayer(that.plantLayer.layer)
            that.initWarningLayer(url, type)
        })
        // 种植面积，预估产量，底图切换
        eventBus.on("warningHome:toggleMapLayer", function (name) {
            that.warningLayer && that.kmap.map.removeLayer(that.warningLayer.layer)
            that.togglePlantLayer(name)
        })
        // 切换区域广东省or从化区
        that.areaId = "3"
        eventBus.on("warningHome:toggleArea", (id) => {
            that.plantLayer && that.kmap.map.removeLayer(that.plantLayer.layer)
            that.warningLayer && that.kmap.map.removeLayer(that.warningLayer.layer)
            that.areaId = id
            that.changeDistrict(id)
        })
        // 时间轴
        eventBus.on("weatherTime:changeTime", ({index}) => {
            console.log('vvv',index);
            that.toggleSmallLayer(index)
        })
    }

    initWarningLayer(layerUrl, type) {
        this.warningLayer && this.kmap.map.removeLayer(this.warningLayer.layer)
        // 104.3017367175,30.329292136
        this.warningLayer = this.kmap.addXYZLayer(
            layerUrl,
            { minZoom: 5, maxZoom: 22 },
            99,
            0.4
        );
        this.warningLayer.layer.setOpacity(0.67)
        if (type === 1) {
            this.kmap.map.getView().setZoom(7.6)
            // 23.310292140601142,113.10638639232688
            this.kmap.map.getView().setCenter([113.609050, 23.30707646])
        }
        // 23.407672480519803,113.07739330484166
        // this.kmap.map.getView().setZoom(18)
        // this.kmap.map.getView().setCenter([104.3017367175, 30.329292136])
    }

    togglePlantLayer(name) {
        const url = this.warningLayers[name]
        // 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.6)
        if (name !== "从化荔枝") {
            this.kmap.map.getView().setZoom(7.6)
            this.kmap.map.getView().setCenter([113.609050, 23.30707646])
        } else {
            this.kmap.map.getView().setZoom(11)
            this.kmap.map.getView().setCenter([113.679, 23.607])
        }
        // this.kmap.map.getView().setCenter([113.679, 23.607])
        // 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") {
            let url = "https://birdseye-img.sysuimars.com/map/risk/lby_rjwd/{z}/{x}/{y}.png"
            // if (index === 0) {
            //     url = "https://birdseye-img.sysuimars.com/map/risk/lby_ghqs/{z}/{x}/{y}.png"
            // } else if (index === 1) {
            //     url =  "https://birdseye-img.sysuimars.com/map/risk/lby_dwdh/{z}/{x}/{y}.png"
            // }
            this.warningLayer && this.kmap.map.removeLayer(this.warningLayer.layer)
            // 104.3017367175,30.329292136
            this.warningLayer = this.kmap.addXYZLayer(
                url,
                { minZoom: 5, maxZoom: 22 },
                99,
                0.4
            );
            this.warningLayer.layer.setOpacity(0.6)
            // this.kmap.map.getView().setZoom(12+index)
            // const position = store.getters.userinfo.location
            this.kmap.map.getView().setZoom(16.6)
            // 23.60747406160339,113.6805952006568
            this.kmap.map.getView().setCenter([113.6805952006568, 23.60747406160339])
        }
    }
}

export default AlarmLayer;