agriculture-one-map/src/views/warningHome/map/distributionLayer.js

import * as KMap from "@/utils/ol-map/KMap";
import { Vector as VectorSource, Cluster } from "ol/source.js";
import { Feature } from "ol";
import { WKT } from "ol/format";
import { Circle, Fill, Stroke, Style, Text, Icon, RegularShape } from "ol/style.js";
import Photo from "ol-ext/style/Photo";
import { newPoint, newPolymerFeature } from "@/utils/map.js";

import pointBgImg from "@/assets/images/map/point_bg.png";

class DistributionLayer {
    constructor(kmap) {
        let that = this;
        this.kmap = kmap
        let vectorStyle = new KMap.VectorStyle()
        this.distributionLayer = new KMap.VectorLayer("distributionLayer", 99, {
            source: new VectorSource({}),
            style: function (f) {
                let style2 = vectorStyle.getPolygonStyle(f.get("color")+'4d', f.get("color"), 2)
                return [style2]
            }
        });
        this.kmap.addLayer(this.distributionLayer.layer)

        // 创建聚合数据源
        this.clusterSource = new Cluster({
            distance: 80, // 聚合距离（像素）
            minDistance: 50, // 最小聚合距离
        });

        // 提取单个点样式函数
        const getPointStyle = (feature, isCluster = false, clusterSize = 1) => {
            const label = feature.get("label") || "";
            const baseColor = feature.get("color") || "#2199F8";
            const farmName = feature.get("farmName") || "";
            const imgName = feature.get("imgName") || "";
            const speciesIcon = feature.get("speciesIcon");

            // 方块填充色背景（在白色描边 PNG 底图下方，参考 UI）
            const squareBgStyle = new Style({
                image: new RegularShape({
                    points: 4,
                    radius: 34, // 控制方块大小
                    angle: Math.PI / 4, // 旋转 45°，让正方形对齐
                    fill: new Fill({
                        color: baseColor,
                    }),
                    imgSize: [34, 34],
                    // 向上平移一点，让方块主要位于指针上方
                    displacement: [0, 4],
                }),
            });

            const iconAndTextStyle = new Style({
                image: new Icon({
                    src: pointBgImg,
                    scale: 0.45,
                }),
                // 文字 + 背景（参考 UI：白色圆角矩形 + 彩色文字）
                text: new Text({
                    text: label,
                    font: "normal 14px sans-serif",
                    offsetY: -46, // 文字整体上移，避免和图片重叠
                    textAlign: "center",
                    fill: new Fill({
                        color: baseColor,
                    }),
                    backgroundFill: new Fill({
                        color: "rgba(255,255,255,1)",
                    }),
                    backgroundStroke: new Stroke({
                        color: baseColor,
                        width: 1,
                    }),
                    padding: [2, 14, 2, 14],
                }),
            });

            // 聚合点数量徽章（红色圆形，白色文字，图片右上角）
            // 图片 scale 0.45，假设原始图片约 100x100，实际显示约 45x45
            // 右上角位置：offsetX 约 22-25，offsetY 约 -22-25（相对于图片中心）
            const badgeStyle = isCluster && clusterSize > 1
                ? new Style({
                    image: new Circle({
                        radius: 10,
                        fill: new Fill({
                            color: "#FF0000", // 红色
                        }),
                        // 定位到图片右上角
                        displacement: [22, 25], // 相对于图片中心，向右上偏移
                    }),
                    text: new Text({
                        text: clusterSize.toString(),
                        font: "bold 11px sans-serif",
                        fill: new Fill({
                            color: "#FFFFFF", // 白色文字
                        }),
                        // 文字位置与圆形位置一致
                        offsetX: 22,
                        offsetY: -25,
                        textAlign: "center",
                        textBaseline: "middle",
                    }),
                })
                : null;

            // 农场名称（显示在点位下方，白色文字）
            // 聚合点显示第一个点的农场名称
            const farmNameStyle = farmName
                ? new Style({
                    text: new Text({
                        text: farmName,
                        font: "normal 18px sans-serif",
                        offsetY: 45, // 向下偏移，位于点位下方
                        textAlign: "center",
                        fill: new Fill({
                            color: "#FFFFFF",
                        }),
                        stroke: new Stroke({
                            color: "rgba(0,0,0,0.6)",
                            width: 2,
                        }),
                    }),
                })
                : null;
            const typeImgStyle = new Style({
                image: new Icon({
                    // src: imgUrl,
                    src: speciesIcon,
                    scale: 0.8,
                    displacement: [0, 4],
                }),
            });

            // 先画纯色方块，再画白色描边 PNG 和文字，然后画徽章，最后画农场名称
            const styles = [squareBgStyle, iconAndTextStyle];
            if (speciesIcon) styles.push(typeImgStyle);
            if (badgeStyle) styles.push(badgeStyle);
            if (farmNameStyle) styles.push(farmNameStyle);
            return styles;
        };

        this.distributionPointLayer = new KMap.VectorLayer("distributionPointLayer", 99, {
            source: this.clusterSource,
            style: (f) => {
                // 判断是否为聚合点
                const features = f.get('features');
                if (features && features.length > 1) {
                    // 聚合点：使用第一个点的样式，但添加数量标识
                    const firstFeature = features[0];
                    return getPointStyle(firstFeature, true, features.length);
                }
                // 单个点样式（原有逻辑）
                const singleFeature = features && features.length === 1 ? features[0] : f;
                return getPointStyle(singleFeature, false, 1);
            },
        });
        this.kmap.addLayer(this.distributionPointLayer.layer)

        // 设施图层：只显示图标（冷链冷库 / 加工厂等），不带边框和文字
        this.facilityPointLayer = new KMap.VectorLayer("facilityPointLayer", 100, {
            source: new VectorSource({}),
            style: function (f) {
                const imgName = f.get("imgName") || "";
                return new Style({
                    image: new Icon({
                        src: imgName,
                        imgSize: [45, 45],
                        width: 45,
                        height: 45,
                        scale: 0.9,
                    }),
                });
            },
        });
        this.kmap.addLayer(this.facilityPointLayer.layer)
    }

    /**
     * 清空当前图层上的所有数据
     */
    clear() {
        if (this.distributionLayer && this.distributionLayer.source) {
            this.distributionLayer.source.clear();
        }
        if (this.clusterSource && this.clusterSource.source) {
            this.clusterSource.source.clear();
        }
        if (this.facilityPointLayer && this.facilityPointLayer.source) {
            this.facilityPointLayer.source.clear();
        }
    }

    initData(data, field = 'speciesName') {
        // 每次加载前先清空旧数据（多用于"作物分布 / 物候期分布 / 农场分布"）
        this.clear();
        if(!data || data.length === 0) return;

        // 创建临时 VectorSource 用于存储点数据
        const pointSource = new VectorSource({});

        for (let item of data) {
            // 面数据（区域多边形）
            if (item.geom) {
                item.color = item.speciesColor || "#2199F8";
                this.distributionLayer.source.addFeature(newPolymerFeature(item));
            }
            if (item.centerPoint) {
                item.color = item.speciesColor || "#2199F8";
                item.wkt = item.centerPoint;
                item.label = item[field] || "";
                pointSource.addFeature(newPoint(item));
            }
        }

        // 将点数据源设置到聚合源
        if (pointSource.getFeatures().length > 0) {
            this.clusterSource.setSource(pointSource);
        }
        // const extent = this.distributionLayer.source.getExtent();
        // if (extent && !isNaN(extent[0])) {
        //     this.kmap.map.getView().fit(extent, {
        //         padding: [280, 400, 200, 150],
        //         duration: 500,
        //     });
        // }

        // 所有点位添加完成后，地图范围自适应到包含所有点
        if (pointSource.getFeatures().length > 0) {
            setTimeout(() => {
                const pointExtent = this.clusterSource.source.getExtent();
                if (pointExtent && !isNaN(pointExtent[0])) {
                    this.kmap.map.getView().fit(pointExtent, {
                        padding: [280, 400, 200, 150],
                        duration: 500,
                        maxZoom: 12,
                    });
                }
            }, 100);
        }
    }

    /**
     * 设施数据加载（冷链冷库 / 加工厂）
     * 只操作 facilityPointLayer，不影响作物分布图层
     */
    initFacilityData(list = []) {
        if (!this.facilityPointLayer || !this.facilityPointLayer.source) return;
        this.facilityPointLayer.source.clear();

        const extentSource = new VectorSource({});

        for (let item of list) {
            if (!item.wktArr) continue;
            for (let wkt of item.wktArr) {
                const f = new Feature({
                    geometry: new WKT().readGeometry(wkt),
                });
                f.set("imgName", item.imgName);
                this.facilityPointLayer.source.addFeature(f);
                extentSource.addFeature(f);
            }
        }

        const extent = extentSource.getExtent();
        if (extent && !isNaN(extent[0])) {
            this.kmap.map.getView().fit(extent, {
                padding: [280, 400, 200, 150],
                duration: 500,
            });
        }
    }
}



export default DistributionLayer;