my-openlayer 3.1.1 → 3.1.2

package/core/polygon/Polygon.js

@@ -193,19 +193,16 @@ export default class Polygon {
         if (!(layer instanceof VectorLayer)) {
             throw ErrorHandler.getInstance().createAndHandleError(`Layer '${layerName}' is not a vector layer`, ErrorType.LAYER_ERROR);
         }
-        const mergedOptions = {
-            textFont: '14px Calibri,sans-serif',
-            textFillColor: '#FFF',
-            textStrokeWidth: 2,
-            ...options
-        };
         const features = layer.getSource()?.getFeatures();
         if (!features) {
             ErrorHandler.getInstance().warn(`No features found in layer '${layerName}'`);
             return;
         }
+        const resolution = this.map.getView().getResolution() ?? 1;
         features.forEach((feature) => {
-            PolygonStyleFactory.updateSingleFeatureColor(feature, colorObj, mergedOptions);
+            const currentStyle = feature.getStyle() ?? layer.getStyle();
+            const previousStyles = PolygonStyleFactory.resolveFeatureStyles(currentStyle, feature, resolution);
+            PolygonStyleFactory.updateSingleFeatureColor(feature, colorObj, options, previousStyles);
         });
     }
     /**

package/core/polygon/PolygonStyleFactory.d.ts

@@ -6,8 +6,13 @@ import type { FeatureColorUpdateOptions, PolygonOptions } from "../../types";
  */
 export default class PolygonStyleFactory {
     static getFeatureText(feature: FeatureLike, options: PolygonOptions | FeatureColorUpdateOptions): string;
+    private static normalizeStyles;
+    static resolveFeatureStyles(styleLike: unknown, feature: FeatureLike, resolution?: number): Style[];
+    private static getPreviousStroke;
+    private static getPreviousFill;
+    private static getPreviousText;
     static createStyle(options: PolygonOptions): Style | Style[] | ((feature: FeatureLike) => Style | Style[]);
     static updateSingleFeatureColor(feature: Feature, colorObj?: {
         [propName: string]: string;
-    }, options?: FeatureColorUpdateOptions): void;
+    }, options?: FeatureColorUpdateOptions, previousStyles?: Style[]): void;
 }

package/core/polygon/PolygonStyleFactory.js

@@ -12,6 +12,28 @@ export default class PolygonStyleFactory {
         }
         return '';
     }
+    static normalizeStyles(styles) {
+        if (!styles)
+            return [];
+        return Array.isArray(styles) ? styles : [styles];
+    }
+    static resolveFeatureStyles(styleLike, feature, resolution = 1) {
+        if (!styleLike)
+            return [];
+        if (typeof styleLike === 'function') {
+            return PolygonStyleFactory.normalizeStyles(styleLike(feature, resolution));
+        }
+        return PolygonStyleFactory.normalizeStyles(styleLike);
+    }
+    static getPreviousStroke(styles) {
+        return styles.map(style => style.getStroke()).find((stroke) => !!stroke);
+    }
+    static getPreviousFill(styles) {
+        return styles.map(style => style.getFill()).find((fill) => !!fill);
+    }
+    static getPreviousText(styles) {
+        return styles.map(style => style.getText()).find((text) => !!text);
+    }
     static createStyle(options) {
         if (options.style) {
             return options.style;
@@ -56,6 +78,7 @@ export default class PolygonStyleFactory {
                         text: new Text({
                             text,
                             font: options.textFont,
+                            overflow: options.textOverflow,
                             fill: new Fill({ color: options.textFillColor }),
                             stroke: new Stroke({
                                 color: options.textStrokeColor,
@@ -68,30 +91,43 @@ export default class PolygonStyleFactory {
             return styles;
         };
     }
-    static updateSingleFeatureColor(feature, colorObj, options) {
-        const name = options?.textKey ? feature.get(options.textKey) : '';
-        const withDefaultStroke = options?.withDefaultStroke ?? true;
-        const withDefaultFill = options?.withDefaultFill ?? true;
-        const strokeColor = options?.strokeColor ?? (withDefaultStroke ? '#EBEEF5' : undefined);
-        const strokeWidth = options?.strokeWidth ?? 2;
-        const defaultFillColor = 'rgba(255, 255, 255, 0.3)';
-        const resolvedFillColor = options?.fillColor ?? (withDefaultFill ? defaultFillColor : undefined);
-        const newColor = colorObj?.[name] || resolvedFillColor;
+    static updateSingleFeatureColor(feature, colorObj, options, previousStyles = []) {
+        const name = options?.textKey ? String(feature.get(options.textKey) ?? '') : '';
+        const hasMappedColor = !!colorObj && Object.prototype.hasOwnProperty.call(colorObj, name);
+        const previousStroke = PolygonStyleFactory.getPreviousStroke(previousStyles);
+        const previousFill = PolygonStyleFactory.getPreviousFill(previousStyles);
+        const previousText = PolygonStyleFactory.getPreviousText(previousStyles);
+        const withDefaultStroke = options?.withDefaultStroke !== false;
+        const withDefaultFill = options?.withDefaultFill !== false;
+        const strokeColor = withDefaultStroke ? options?.strokeColor ?? previousStroke?.getColor() : undefined;
+        const strokeWidth = withDefaultStroke ? options?.strokeWidth ?? previousStroke?.getWidth() : undefined;
+        const lineDash = withDefaultStroke ? options?.lineDash ?? previousStroke?.getLineDash() ?? undefined : undefined;
+        const lineDashOffset = withDefaultStroke ? options?.lineDashOffset ?? previousStroke?.getLineDashOffset() : undefined;
+        const newColor = hasMappedColor
+            ? colorObj[name]
+            : options?.fillColor ?? (withDefaultFill ? previousFill?.getColor() : undefined);
         const featureStyle = new Style({
-            stroke: strokeColor ? new Stroke({ color: strokeColor, width: strokeWidth }) : undefined,
+            stroke: strokeColor !== undefined || strokeWidth !== undefined || lineDash !== undefined || lineDashOffset !== undefined
+                ? new Stroke({ color: strokeColor, width: strokeWidth, lineDash, lineDashOffset })
+                : undefined,
             fill: newColor ? new Fill({ color: newColor }) : undefined
         });
-        if (options?.textVisible) {
-            const text = PolygonStyleFactory.getFeatureText(feature, options);
+        const textVisible = options?.textVisible ?? !!previousText;
+        if (textVisible) {
+            const text = options ? PolygonStyleFactory.getFeatureText(feature, options) || previousText?.getText() : previousText?.getText();
             if (text) {
+                const textFillColor = options?.textFillColor ?? previousText?.getFill()?.getColor();
+                const textStrokeColor = options?.textStrokeColor ?? previousText?.getStroke()?.getColor();
+                const textStrokeWidth = options?.textStrokeWidth ?? previousText?.getStroke()?.getWidth();
                 featureStyle.setText(new Text({
                     text,
-                    font: options.textFont,
-                    fill: new Fill({ color: options.textFillColor }),
-                    stroke: new Stroke({
-                        color: options.textStrokeColor,
-                        width: options.textStrokeWidth
-                    })
+                    font: options?.textFont ?? previousText?.getFont(),
+                    overflow: options?.textOverflow ?? previousText?.getOverflow(),
+                    offsetY: options?.textOffsetY ?? previousText?.getOffsetY(),
+                    fill: textFillColor !== undefined ? new Fill({ color: textFillColor }) : undefined,
+                    stroke: textStrokeColor !== undefined || textStrokeWidth !== undefined
+                        ? new Stroke({ color: textStrokeColor, width: textStrokeWidth })
+                        : undefined
                 }));
             }
         }

package/docs/Polygon.md

@@ -37,6 +37,8 @@ const polygon = new Polygon(map: Map);
 | `textFont` | `string` | 字体样式 |
 | `textFillColor` | `string` | 文本颜色 |
 | `textStrokeColor` | `string` | 文本描边颜色 |
+| `textStrokeWidth` | `number` | 文本描边宽度 |
+| `textOverflow` | `boolean` | 是否允许文字溢出面范围。设为 `true` 时，文字不会因为当前缩放下放不进面内而被 OpenLayers 隐藏 |
 | **其他** | | |
 | `mask` | `boolean` | 是否作为蒙版（配合 `setOutLayer` 使用） |
 
@@ -112,6 +114,8 @@ updateFeatureColor(
 | `colorObj` | `Object` | 颜色映射对象 `{ '区域名': '颜色值' }` |
 | `options` | `FeatureColorUpdateOptions` | 包含 textKey 等配置以匹配要素 |
 
+未在 `options` 中指定的样式会沿用要素当前样式，例如 `strokeColor`、`strokeWidth`、`textFont`、`textFillColor`、`textStrokeColor`、`textStrokeWidth`、`textOverflow` 等。只传颜色映射时不会重置原有文字样式。
+
 ### addImageLayer
 
 添加静态图片图层（如叠加平面图、卫星图）。
@@ -183,6 +187,7 @@ polygonModule.addPolygon(polygonData, {
   textFillColor: '#fff',
   textStrokeColor: 'blue',
   textStrokeWidth: 2,
+  textOverflow: true, // 允许文字溢出面范围，避免随缩放尺寸不足被隐藏
   fitView: true
 });
 ```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "3.1.1",
+  "version": "3.1.2",
   "type": "module",
   "license": "MIT",
   "main": "index.js",

package/types/base.d.ts

@@ -44,4 +44,9 @@ export interface TextOptions {
     textStrokeColor?: string;
     textStrokeWidth?: number;
     textOffsetY?: number;
+    /**
+     * 多边形或沿线文本是否允许溢出要素范围。
+     * 设置为 true 时，OpenLayers 不会因为当前缩放下文字放不进面/线而隐藏文本。
+     */
+    textOverflow?: boolean;
 }

package/types/common.d.ts

@@ -50,6 +50,7 @@ export type OptionsType = {
     textStrokeColor?: string;
     textStrokeWidth?: number;
     textOffsetY?: number;
+    textOverflow?: boolean;
     textKey?: string;
     img?: string;
     scale?: number;