my-openlayer 2.3.2 → 2.4.0

package/MyOl.d.ts

@@ -33,7 +33,7 @@ export default class MyOl {
      * @param id 地图容器 DOM 元素 ID
      * @param options 地图初始化配置
      */
-    constructor(id: string, options?: Partial<MapInitType>);
+    constructor(id: string | HTMLElement, options?: Partial<MapInitType>);
     /**
      * 验证构造函数参数
      * @private

package/MyOl.js

@@ -69,16 +69,19 @@ class MyOl {
      * @private
      */
     validateConstructorParams(id, options) {
-        if (!id || typeof id !== 'string') {
+        if (!id) {
+            throw new Error('地图容器 ID 或 HTMLElement 不能为空');
+        }
+        if (typeof id === 'string' && id.trim() === '') {
             throw new Error('地图容器 ID 必须是非空字符串');
         }
         if (!options || typeof options !== 'object') {
             throw new Error('地图配置选项不能为空');
         }
         // 检查 DOM 元素是否存在
-        const element = document.getElementById(id);
+        const element = typeof id === 'string' ? document.getElementById(id) : id;
         if (!element) {
-            throw new Error(`找不到 ID 为 '${id}' 的 DOM 元素`);
+            throw new Error(typeof id === 'string' ? `找不到 ID 为 '${id}' 的 DOM 元素` : '提供的 DOM 元素无效');
         }
     }
     /**

package/core/ConfigManager.d.ts

@@ -44,9 +44,6 @@ export declare class ConfigManager {
     static readonly DEFAULT_POLYGON_OPTIONS: {
         zIndex: number;
         visible: boolean;
-        strokeColor: string;
-        strokeWidth: number;
-        fillColor: string;
         textFont: string;
         textFillColor: string;
         textStrokeColor: string;

package/core/ConfigManager.js

@@ -88,9 +88,6 @@ ConfigManager.DEFAULT_LINE_OPTIONS = {
 ConfigManager.DEFAULT_POLYGON_OPTIONS = {
     zIndex: 11,
     visible: true,
-    strokeColor: '#EBEEF5',
-    strokeWidth: 2,
-    fillColor: 'rgba(255, 255, 255, 0)',
     textFont: '14px Calibri,sans-serif',
     textFillColor: '#FFF',
     textStrokeColor: '#409EFF',

package/core/Polygon.d.ts

@@ -50,11 +50,11 @@ export default class Polygon {
      */
     addPolygonByUrl(url: string, options?: PolygonOptions): VectorLayer<VectorSource>;
     /**
-     * 设置要素样式
-     * @param features 要素数组
-     * @param options 样式配置选项
+     * 创建样式或样式函数
+     * @param options 配置选项
+     * @returns 样式或样式函数
      */
-    private setFeatureStyles;
+    private createStyle;
     /**
      * 获取要素文本
      * @param feature 要素对象

package/core/Polygon.js

@@ -92,10 +92,9 @@ export default class Polygon {
                 layerName: mergedOptions.layerName
             },
             source: new VectorSource({ features }),
+            style: this.createStyle(mergedOptions),
             zIndex: mergedOptions.zIndex
         });
-        // 设置要素样式
-        this.setFeatureStyles(features, mergedOptions);
         layer.setVisible(mergedOptions.visible);
         this.map.addLayer(layer);
         // 如果需要适应视图
@@ -130,13 +129,9 @@ export default class Polygon {
                 layerName: mergedOptions.layerName
             },
             source,
+            style: this.createStyle(mergedOptions),
             zIndex: mergedOptions.zIndex
         });
-        // 在数据加载后设置样式
-        source.once('featuresloadend', () => {
-            const loadedFeatures = source.getFeatures();
-            this.setFeatureStyles(loadedFeatures, mergedOptions);
-        });
         layer.setVisible(mergedOptions.visible);
         this.map.addLayer(layer);
         // 如果需要适应视图
@@ -148,51 +143,78 @@ export default class Polygon {
         return layer;
     }
     /**
-     * 设置要素样式
-     * @param features 要素数组
-     * @param options 样式配置选项
+     * 创建样式或样式函数
+     * @param options 配置选项
+     * @returns 样式或样式函数
      */
-    setFeatureStyles(features, options) {
-        features.forEach(feature => {
-            feature.set('type', options.layerName);
-            feature.set('layerName', options.layerName);
-            // 如果传入了自定义样式，直接使用
-            if (options.style) {
-                if (typeof options.style === 'function') {
-                    feature.setStyle(options.style(feature));
-                }
-                else {
-                    feature.setStyle(options.style);
+    //************* 创建样式功能块 *************//
+    createStyle(options) {
+        // 如果传入了自定义样式，直接使用
+        if (options.style) {
+            return options.style;
+        }
+        const withDefaultStroke = options.withDefaultStroke ?? true;
+        const withDefaultFill = options.withDefaultFill ?? true;
+        const strokeColor = options.strokeColor ?? (withDefaultStroke ? '#EBEEF5' : undefined);
+        const strokeWidth = options.strokeWidth ?? 2;
+        const staticFillColor = options.fillColor ?? (withDefaultFill ? 'rgba(255, 255, 255, 0)' : undefined);
+        const stroke = strokeColor ? new Stroke({
+            color: strokeColor,
+            width: strokeWidth,
+            lineDash: options.lineDash,
+            lineDashOffset: options.lineDashOffset
+        }) : undefined;
+        // 预先创建基础样式（如果不需要基于feature动态计算fillColor）
+        let baseStyle;
+        if (!options.fillColorCallBack) {
+            const fill = staticFillColor ? new Fill({ color: staticFillColor }) : undefined;
+            if (stroke || fill) {
+                baseStyle = new Style({
+                    stroke,
+                    fill
+                });
+            }
+        }
+        // 如果没有动态部分（没有回调且不显示文本），直接返回基础样式
+        if (baseStyle && !options.textVisible) {
+            return baseStyle;
+        }
+        // 返回样式函数
+        return (feature, resolution) => {
+            const styles = [];
+            // 1. 处理几何样式
+            if (baseStyle) {
+                styles.push(baseStyle);
+            }
+            else {
+                const fillColor = options.fillColorCallBack ? options.fillColorCallBack(feature) : staticFillColor;
+                const fill = fillColor ? new Fill({ color: fillColor }) : undefined;
+                if (stroke || fill) {
+                    styles.push(new Style({
+                        stroke,
+                        fill
+                    }));
                 }
-                return;
             }
-            const fillColor = options.fillColorCallBack ? options.fillColorCallBack(feature) : options.fillColor;
-            const featureStyle = new Style({
-                stroke: new Stroke({
-                    color: options.strokeColor,
-                    width: options.strokeWidth,
-                    lineDash: options.lineDash,
-                    lineDashOffset: options.lineDashOffset
-                }),
-                fill: new Fill({ color: fillColor })
-            });
-            // 添加文本样式
+            // 2. 处理文本样式
             if (options.textVisible) {
                 const text = this.getFeatureText(feature, options);
                 if (text) {
-                    featureStyle.setText(new Text({
-                        text,
-                        font: options.textFont,
-                        fill: new Fill({ color: options.textFillColor }),
-                        stroke: new Stroke({
-                            color: options.textStrokeColor,
-                            width: options.textStrokeWidth
+                    styles.push(new Style({
+                        text: new Text({
+                            text,
+                            font: options.textFont,
+                            fill: new Fill({ color: options.textFillColor }),
+                            stroke: new Stroke({
+                                color: options.textStrokeColor,
+                                width: options.textStrokeWidth
+                            })
                         })
                     }));
                 }
             }
-            feature.setStyle(featureStyle);
-        });
+            return styles;
+        };
     }
     /**
      * 获取要素文本
@@ -237,9 +259,6 @@ export default class Polygon {
             throw new Error(`Layer '${layerName}' is not a vector layer`);
         }
         const mergedOptions = {
-            strokeColor: '#EBEEF5',
-            strokeWidth: 2,
-            fillColor: 'rgba(255, 255, 255, 0.3)',
             textFont: '14px Calibri,sans-serif',
             textFillColor: '#FFF',
             textStrokeWidth: 2,
@@ -262,13 +281,21 @@ export default class Polygon {
      */
     updateSingleFeatureColor(feature, colorObj, options) {
         const name = options?.textKey ? feature.get(options.textKey) : '';
-        const newColor = colorObj?.[name] || options?.fillColor;
+        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;
+        const stroke = strokeColor ? new Stroke({
+            color: strokeColor,
+            width: strokeWidth
+        }) : undefined;
+        const fill = newColor ? new Fill({ color: newColor }) : undefined;
         const featureStyle = new Style({
-            stroke: new Stroke({
-                color: options?.strokeColor,
-                width: options?.strokeWidth
-            }),
-            fill: new Fill({ color: newColor })
+            stroke,
+            fill
         });
         // 添加文本样式
         if (options?.textVisible) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "2.3.2",
+  "version": "2.4.0",
   "type": "module",
   "main": "index.js",
   "types": "index.d.ts",

package/types.d.ts

@@ -114,6 +114,10 @@ export interface StyleOptions {
     fillColor?: string;
     /** 填充颜色回调函数 */
     fillColorCallBack?: (feature: Feature) => string;
+    /** 是否使用默认描边 */
+    withDefaultStroke?: boolean;
+    /** 是否使用默认填充 */
+    withDefaultFill?: boolean;
 }
 /**
  * 文本选项接口 - 文本标注相关配置