fix: 聚合图标

src/views/home/homeMap.vue

@@ -7,17 +7,7 @@
 <script setup>
 import * as KMap from "@/utils/ol-map/KMap";
 import * as util from "@/common/ol_common.js";
-import "ol/ol.css";
-import Map from "ol/Map";
-import View from "ol/View";
-import TileLayer from "ol/layer/Tile";
-import OSM from "ol/source/OSM";
-import VectorLayer from "ol/layer/Vector";
-// import VectorSource from "ol/source/Vector";
-import Feature from "ol/Feature";
-import Point from "ol/geom/Point";
 import Icon from "ol/style/Icon";
-import { fromLonLat } from "ol/proj";
 import DragBox from "ol/interaction/DragBox";
 import { platformModifierKeyOnly } from "ol/events/condition";
 import { newPoint } from "@/utils/map.js";
@@ -115,7 +105,6 @@ function addCluster(treeListData, distanceVal) {
     for (let item of treeListData) {
         let point = newPoint(item);
         features.push(point);
-        console.log('item', item.icon, item);
     }
     const source = new VectorSource({
         features: features,
@@ -172,11 +161,10 @@ function addCluster(treeListData, distanceVal) {
                     // styleCache[key] = style;
                 }
                 const imgIcon = featureOne.get('icon')
-                console.log('imgIcon', imgIcon);
                 if (imgIcon) {
                     style = new Style({
                         image: new Icon({
-                            src: require("@/assets/images/map/owner1.png"),
+                            src: require(`@/assets/images/map/owner${imgIcon}.png`),
                             scale: 1,
                         }),
                     });
@@ -188,7 +176,6 @@ function addCluster(treeListData, distanceVal) {
             // let pointId = featureObj.get('fosterStatus')
             // let style = styleCache[pointId];
                 const imgIcon = featureObj.get('icon')
-                console.log('imgIcon22222', imgIcon);
             let style = false;
             if (!style) {
                 testStyle = new Style({

src/views/home/index.vue

@@ -128,14 +128,14 @@ const getPointList = () =>{
         // })
         if(mapRef.value){
             nextTick(() => {
-                data[0].icon = "123"
-                data[1].icon = "123"
-                data[100].icon = "123"
-                data[170].icon = "123"
-                data[190].icon = "123"
-                data[10].icon = "123"
-                data[20].icon = "123"
-                data[30].icon = "123"
+                data[0].icon = "1"
+                data[1].icon = "1"
+                data[100].icon = "1"
+                data[170].icon = "1"
+                data[190].icon = "2"
+                data[10].icon = "2"
+                data[20].icon = "2"
+                data[30].icon = "2"
                 mapRef.value.addCluster(data)
                 // mapRef.value.initData(arr)
                 // mapRef.value.initMap(arr, () =>  mapRef.value.getRegionList(organId.value))

src/views/home/map/regionLayer.js

@@ -11,7 +11,7 @@ import { unByKey } from "ol/Observable";
 import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
 import { Vector as VectorSource } from "ol/source";
-import {newRegionFeature, newPoint} from "@/utils/map";
+import { newRegionFeature, newPoint } from "@/utils/map";
 import Stroke from "ol/style/Stroke";
 
 /**
@@ -66,14 +66,14 @@ class RegionLayer {
                 });
                 // let style2 = that.textBgStyle("#FFD887","#ED9E1E")
                 // 创建带渐变背景的文字样式
-const style2 = that.createTextWithGradientBg(
-    '245/283',  // 文字内容
-    '#FFD887',      // 渐变起始色（蓝色）
-    '#ED9E1E',      // 渐变结束色（深蓝）
-    {
-        offsetX: 50,  // 向右偏移
-        offsetY: -30, // 向上偏移（Y轴向下为正，故用负值）
-            });
+                const style2 = that.createTextWithGradientBg(
+                    '245/283',  // 文字内容
+                    '#FFD887',      // 渐变起始色（蓝色）
+                    '#ED9E1E',      // 渐变结束色（深蓝）
+                    {
+                        offsetX: 70,  // 向右偏移
+                        offsetY: -30, // 向上偏移（Y轴向下为正，故用负值）
+                    });
                 return [style1, style2];
             },
         });
@@ -84,7 +84,7 @@ const style2 = that.createTextWithGradientBg(
             maxZoom: 22,
             source: new VectorSource({}),
             style: (feature) => {
-                return that.textBgStyle("#FFD887","#ED9E1E")
+                return that.textBgStyle("#FFD887", "#ED9E1E")
             },
         });
 
@@ -99,8 +99,8 @@ const style2 = that.createTextWithGradientBg(
         return this.getIconStyle(feature);
     }
 
-    selectArea(index,color){
-        if(this.index !=null){
+    selectArea(index, color) {
+        if (this.index != null) {
             this.resetData()
         }
         this.area[index].set("bgColor", color);
@@ -108,16 +108,16 @@ const style2 = that.createTextWithGradientBg(
         this.index = index
     }
 
-    resetData(){
-        this.area.forEach(item =>{
+    resetData() {
+        this.area.forEach(item => {
             item.set("bgName", "defalut");
             item.set("bgColor", "defalut");
         })
     }
 
-    selectAreaMultiple(arr){
+    selectAreaMultiple(arr) {
         this.resetData()
-        arr.forEach(item =>{
+        arr.forEach(item => {
             this.area[item.value].set("bgColor", item.color);
             this.area[item.value].set("bgName", "active");
         })
@@ -129,7 +129,7 @@ const style2 = that.createTextWithGradientBg(
         let features = [];
         for (let item of data) {
             item.regionWkt = item.wkt
-            let f = newRegionFeature({...item,bgName:"defalut",bgColor:"defalut"}, "wkt");
+            let f = newRegionFeature({ ...item, bgName: "defalut", bgColor: "defalut" }, "wkt");
             features.push(f);
 
             item.wkt = item.pointWkt
@@ -157,88 +157,88 @@ const style2 = that.createTextWithGradientBg(
     }
 
 
-/**
- * 创建带渐变背景的文字样式
- * @param {string} text - 要显示的文字
- * @param {string} startColor - 渐变起始颜色（如 '#00c6ff'）
- * @param {string} endColor - 渐变结束颜色（如 '#0072ff'）
- * @param {string} textColor - 文字颜色（默认白色）
- * @param {number} fontSize - 文字大小（像素，默认12）
- * @return {Style} OpenLayers 样式对象
- */
-createTextWithGradientBg(
-    text,
-    startColor,
-    endColor,
-    { textColor = '#fff', fontSize = 12, offsetX = 0, offsetY = 0 } = {}
-  ) {
-    const cacheKey = `${text}_${startColor}_${endColor}_${textColor}_${fontSize}_${offsetX}_${offsetY}`;
-  
-    if (this.textBgStyleCache[cacheKey]) {
-      return this.textBgStyleCache[cacheKey];
+    /**
+     * 创建带渐变背景的文字样式
+     * @param {string} text - 要显示的文字
+     * @param {string} startColor - 渐变起始颜色（如 '#00c6ff'）
+     * @param {string} endColor - 渐变结束颜色（如 '#0072ff'）
+     * @param {string} textColor - 文字颜色（默认白色）
+     * @param {number} fontSize - 文字大小（像素，默认12）
+     * @return {Style} OpenLayers 样式对象
+     */
+    createTextWithGradientBg(
+        text,
+        startColor,
+        endColor,
+        { textColor = '#fff', fontSize = 12, offsetX = 0, offsetY = 0 } = {}
+    ) {
+        const cacheKey = `${text}_${startColor}_${endColor}_${textColor}_${fontSize}_${offsetX}_${offsetY}`;
+
+        if (this.textBgStyleCache[cacheKey]) {
+            return this.textBgStyleCache[cacheKey];
+        }
+
+        const style = new Style({
+            renderer: (coordinates, state) => {
+                const ctx = state.context;
+                const pixelRatio = state.pixelRatio;
+                const x = coordinates[0] + offsetX * pixelRatio; // 应用水平偏移
+                const y = coordinates[1] + offsetY * pixelRatio; // 应用垂直偏移
+
+                // 文字测量
+                ctx.font = `${fontSize * pixelRatio}px Arial`;
+                const textWidth = ctx.measureText(text).width;
+                const padding = 8 * pixelRatio;
+
+                // 背景参数
+                const bgWidth = textWidth + 2.5 * padding;
+                const bgHeight = fontSize * 2.5 * pixelRatio;
+                const cornerRadius = 16 * pixelRatio;
+
+                // 渐变
+                const gradient = ctx.createLinearGradient(
+                    x - bgWidth / 2,
+                    y - bgHeight / 2,
+                    x + bgWidth / 2,
+                    y + bgHeight / 2
+                );
+                gradient.addColorStop(0, startColor);
+                gradient.addColorStop(1, endColor);
+
+                // 绘制圆角矩形背景
+                this.roundRect(ctx, x - bgWidth / 2, y - bgHeight / 2, bgWidth, bgHeight, cornerRadius);
+                ctx.fillStyle = gradient;
+                ctx.fill();
+
+                // 绘制文字
+                ctx.fillStyle = textColor;
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(text, x, y);
+            },
+            zIndex: 2,
+        });
+
+        this.textBgStyleCache[cacheKey] = style;
+        return style;
     }
-  
-    const style = new Style({
-      renderer: (coordinates, state) => {
-        const ctx = state.context;
-        const pixelRatio = state.pixelRatio;
-        const x = coordinates[0] + offsetX * pixelRatio; // 应用水平偏移
-        const y = coordinates[1] + offsetY * pixelRatio; // 应用垂直偏移
-  
-        // 文字测量
-        ctx.font = `${fontSize * pixelRatio}px Arial`;
-        const textWidth = ctx.measureText(text).width;
-        const padding = 8 * pixelRatio;
-  
-        // 背景参数
-        const bgWidth = textWidth + 2.5 * padding;
-        const bgHeight = fontSize * 2 * pixelRatio;
-        const cornerRadius = 4 * pixelRatio;
-  
-        // 渐变
-        const gradient = ctx.createLinearGradient(
-          x - bgWidth / 2,
-          y - bgHeight / 2,
-          x + bgWidth / 2,
-          y + bgHeight / 2
-        );
-        gradient.addColorStop(0, startColor);
-        gradient.addColorStop(1, endColor);
-  
-        // 绘制圆角矩形背景
-        this.roundRect(ctx, x - bgWidth / 2, y - bgHeight / 2, bgWidth, bgHeight, cornerRadius);
-        ctx.fillStyle = gradient;
-        ctx.fill();
-  
-        // 绘制文字
-        ctx.fillStyle = textColor;
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-        ctx.fillText(text, x, y);
-      },
-      zIndex: 2,
-    });
-  
-    this.textBgStyleCache[cacheKey] = style;
-    return style;
-  }
 
-/** 辅助函数：绘制圆角矩形 */
-roundRect(ctx, x, y, width, height, radius) {
-  ctx.beginPath();
-  ctx.moveTo(x + radius, y);
-  ctx.lineTo(x + width - radius, y);
-  ctx.arcTo(x + width, y, x + width, y + radius, radius);
-  ctx.lineTo(x + width, y + height - radius);
-  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
-  ctx.lineTo(x + radius, y + height);
-  ctx.arcTo(x, y + height, x, y + height - radius, radius);
-  ctx.lineTo(x, y + radius);
-  ctx.arcTo(x, y, x + radius, y, radius);
-  ctx.closePath();
-}
+    /** 辅助函数：绘制圆角矩形 */
+    roundRect(ctx, x, y, width, height, radius) {
+        ctx.beginPath();
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(x + width - radius, y);
+        ctx.arcTo(x + width, y, x + width, y + radius, radius);
+        ctx.lineTo(x + width, y + height - radius);
+        ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+        ctx.lineTo(x + radius, y + height);
+        ctx.arcTo(x, y + height, x, y + height - radius, radius);
+        ctx.lineTo(x, y + radius);
+        ctx.arcTo(x, y, x + radius, y, radius);
+        ctx.closePath();
+    }
 
-    textBgStyle(startColor,endColor){
+    textBgStyle(startColor, endColor) {
         let key = startColor + endColor
         let style = this.textBgStyleCache[key]
         if (!style) {
@@ -270,7 +270,7 @@ roundRect(ctx, x, y, width, height, radius) {
                     ctx.fillStyle = gradient;                // 填充颜色
                     ctx.fill();
                 },
-                zIndex:2
+                zIndex: 2
             })
             this.textBgStyleCache[key] = style
         }