import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import LineString from "ol/geom/LineString";
import {fromExtent } from "ol/geom/Polygon";
import { Polygon} from "ol/geom";
import { fromLonLat } from "ol/proj";
import { Circle, Fill, Icon, Stroke, Style, Text } from 'ol/style.js';

const mapOL = {
    removeLayerData(res){
        var layers =  window.map.getAllLayers();
        for(var i=0;i<layers.length;i++){
            if(res.id === layers[i].values_.id){
                window.map.removeLayer(layers[i])
            }
        }
    },
    addLayerData(res) {
        var type = res.style.type;
        if (!type) return
        this.removeLayerData(res)
        switch (type) {
            case 'label':
                this.addLabellayer(res);
                break;
            case 'billboard':
                this.addBillboardlayer(res);
                break;
            case 'polyline':
                this.addPolylinelayer(res);
                break;
            case 'rectangle':
                this.addRectanglelayer(res);
                break;
            case 'polygon':
                this.addPolygonlayer(res);
                break;
        }
    },
    CesiumTo84(x, y, z) {
        var ellipsoid = Viewer.scene.globe.ellipsoid;
       
        var cartographic = ellipsoid.cartesianToCartographic({ x: x, y: y, z: z });
        var lat = Cesium.Math.toDegrees(cartographic.latitude);
        var lng = Cesium.Math.toDegrees(cartographic.longitude);
        var alt = cartographic.height;
        return [lng, lat, alt ]
    },
    addLabellayer(res) {
        var style = res.style;
        var val = this.CesiumTo84(style.position.x, style.position.y, style.position.z)
        const labelFeature = new Feature({
            geometry: new Point([val[0], val[1]]),
        });
        const labelStyle = new Style({
            text: new Text({
                text: style.text,
                font: style.font,
                fill: new Fill({
                    color: style.fillColor,
                }),
                stroke: new Stroke({
                    color: style.outlineColor,
                    width: style.outlineWidth,
                }),
            }),
        });
        labelFeature.setStyle([labelStyle])
        const vectorSource = new VectorSource({
            features: [labelFeature],
        });
        var vectorLayer = new VectorLayer({
            id: res.id,
            source: vectorSource,
        });
        window.map.addLayer(vectorLayer)
    },
    addBillboardlayer(res) {
        var style = res.style;
        var val = this.CesiumTo84(style.position.x, style.position.y, style.position.z)
        const imgFeature = new Feature({
            geometry: new Point([val[0], val[1]]),
        });
        const imgStyle = new Style({
            image: new Icon({
                scale: style.scale,
                src: style.image,
            }),
        });
        imgFeature.setStyle([imgStyle])
        const vectorSource = new VectorSource({
            features: [imgFeature],
        });
        var vectorLayer = new VectorLayer({
            id: res.id,
            source: vectorSource,
        });
        window.map.addLayer(vectorLayer)
    },
    addPolylinelayer(res) {
        var style = res.style;
        var positon = style.positions;
        var geom = [];
        for (var i in positon) {
            var lonlat = positon[i];
            var val = this.CesiumTo84(lonlat.x, lonlat.y, lonlat.z);
            geom.push([val[0], val[1]])
        }
        const lineFeature = new Feature({
            geometry: new LineString(geom),
            name: "Line"
        });
        const lineStyle = new Style({

            stroke: new Stroke({
                color: style.color,
                width: style.outlineWidth == 0 ? 2 : style.outlineWidth,
            }),

        });
        lineFeature.setStyle([lineStyle])
        const vectorSource = new VectorSource({
            features: [lineFeature],
        });
        var vectorLayer = new VectorLayer({
            id: res.id,
            source: vectorSource,
        });
        window.map.addLayer(vectorLayer)
    },
    addRectanglelayer(res) {
        var style = res.style;
       
        var east = Cesium.Math.toDegrees(
            style.coordinates.east
        );
        var north = Cesium.Math.toDegrees(
            style.coordinates.north
        );
        var west = Cesium.Math.toDegrees(
            style.coordinates.west
        );
        var south = Cesium.Math.toDegrees(
            style.coordinates.south
        );

        var rectFeature = new Feature({
            geometry: new fromExtent([east, south, west, north])
        });
        const rectStyle = new Style({
            //填充色
            fill: new Fill({
                color:  style.color,
            }),
            //边线颜色
            stroke: new Stroke({
                color:  style.outlineColor,
                width: 1
            }),
        });
        rectFeature.setStyle(rectStyle)
        const vectorSource = new VectorSource({
            features: [rectFeature],
        });
        var vectorLayer = new VectorLayer({
            id: res.id,
            source: vectorSource,
        });
        window.map.addLayer(vectorLayer)
    },
    addPolygonlayer(res) {
        var style = res.style;
        console.log(style)
        var positon= style.positions;
        var geom = [];
        for (var i in positon) {
            var lonlat = positon[i];
            var val = this.CesiumTo84(lonlat.x, lonlat.y, lonlat.z);
            geom.push([val[0], val[1]])
        }
        if(geom[0]!= geom[geom.length-1]){
            geom.push(geom[0])
        }
           var std =[];
           std.push(geom) 
        var rectFeature = new Feature({
            geometry: new Polygon(std)
        });

        const rectStyle = new Style({
            //填充色
            fill: new Fill({
                color:  style.color,
            }),
            //边线颜色
            stroke: new Stroke({
                color:  style.outlineColor,
                width: 1
            }),
        });
        rectFeature.setStyle(rectStyle)
        const vectorSource = new VectorSource({
            features: [rectFeature],
        });
        var vectorLayer = new VectorLayer({
            id: res.id,
            source: vectorSource,
        });
        window.map.addLayer(vectorLayer)

    },
}
export default mapOL;