
import VectorLayer from "ol/layer/Vector";
import Heatmap from "ol/layer/Heatmap";
import Cluster from "ol/source/Cluster";
import { Fill, Stroke, Circle, Text, Icon, Style } from "ol/style";
import marker from "../../assets/images/poi/marker-icon.png";

function createHeatMapLayer(source, blur, radius, zIndex) {
    return new Heatmap({
        name: "heatmap",
        // 矢量数据源
        source: source,
        blur: blur || 2000, // 模糊尺寸
        radius: radius || 10000, // 热点半径
        zIndex: zIndex || 1
    });
}

function createAggregationLayer(source, distance, returnStyleFunction, zIndex) {
    let clusterSource = new Cluster({
        name: "cluster",
        distance: distance || 100,
        source: source,
        geometryFunction: function (feature) {
            return feature.getGeometry();
        }
    });
    return new VectorLayer({
        name: "cluster",
        source: clusterSource,
        zIndex: zIndex || 1,
        style: function (feature) {
            if (returnStyleFunction) {
                return returnStyleFunction(feature);
                // return new Style({
                //     image: new Icon({
                //         anchor: [0.5, 0.5],
                //         anchorOrigin: "top-left",
                //         crossOrigin: "anonymous",
                //         src: marker,
                //     }),
                // })
            } else {
                return (function (feature) {
                    var features = feature.get("features");
                    var size = features.length;
                    return new Style({
                        image: new Circle({
                            radius: 18,
                            stroke: new Stroke({
                                color: "#fff",
                            }),
                            fill: new Fill({
                                color: "#3399CC",
                            }),
                        }),
                        text: new Text({
                            font: "14px sans-serif",
                            text: size.toString(),
                            fill: new Fill({
                                color: "#fff",
                            }),
                        }),
                    });
                })(feature);
            }
        },
    });
}

function createVectorLayer(source, style, zIndex) {
    return new VectorLayer({
        name: "singlepoint",
        source: source,
        zIndex: zIndex || 1,
        style: style || new Style({
            image: new Icon({
                anchor: [0.5, 0.5],
                anchorOrigin: "top-left",
                crossOrigin: "anonymous",
                src: marker,
            }),
        }),
    });
}

// 获取 svg 的元素源码
function getAndSetSVGElement(svgUrl, color,token) {
    var oReq = new XMLHttpRequest();
    oReq.open("GET", svgUrl, false);
    oReq.setRequestHeader("Content-type", "application/json");
    oReq.setRequestHeader("token", token);
    oReq.send(JSON.stringify());
    let parser = new DOMParser();
    let xmlDom = parser.parseFromString(oReq.responseText, "text/html");
    xmlDom.querySelector("g>path").setAttribute("fill", color);
    return new XMLSerializer().serializeToString(xmlDom.querySelector("svg"));
}

function createLayer(item, layerType, source, token) {
    let layer, svg;
    switch (layerType) {
        case "singlepoint":
            svg = getAndSetSVGElement(
                systemConfig.dataUrl + item.iconUrl,
                item.fillColor,
                token
            );
            let style = new Style({
                image: new Icon({
                    scale: 0.3,
                    anchor: [0.5, 1],
                    anchorOrigin: "top-left",
                    crossOrigin: "anonymous",
                    src: "data:image/svg+xml," + escape(svg),
                }),
            });
            layer = createVectorLayer(source, style);
            break;
        case "aggregation":
            svg = getAndSetSVGElement(
                systemConfig.dataUrl + item.iconUrl,
                item.fillColor,
                token
            );
            function returnStyleFunction(feature) {
                var features = feature.get("features");
                var size = features.length;
                if (size != 1) {
                    return new Style({
                        image: new Circle({
                            radius: 18,
                            stroke: new Stroke({
                                color: "#ffffff",
                            }),
                            fill: new Fill({
                                color: item.fillColor,
                            }),
                        }),
                        text: new Text({
                            font: "14px sans-serif",
                            text: size.toString(),
                            fill: new Fill({
                                color: "#ffffff",
                            }),
                        }),
                    });
                } else {
                    return new Style({
                        image: new Icon({
                            scale: 0.3,
                            anchor: [0.5, 1],
                            anchorOrigin: "top-left",
                            crossOrigin: "anonymous",
                            src: "data:image/svg+xml," + escape(svg),
                        }),
                    });
                }
            }
            layer = createAggregationLayer(source, 100, returnStyleFunction);
            break;
        case "heatmap":
            layer = createHeatMapLayer(source, 20, 20);
            break;

        default:
            break;
    }
    return layer;
}



export {  createLayer }

// createHeatMapLayer, createAggregationLayer, createVectorLayer,