npm - my-openlayer - Versions diffs - 2.4.3 → 2.4.4 - Mend

my-openlayer 2.4.3 → 2.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,55 @@
 # Changelog
+## [2.4.4] - 2026-01-27
+### ✨ Features
+- **SelectHandler:** 重构选择交互以支持独立样式渲染和多选隔离
+- 重构Polygon样式处理并添加示例组件
+- **core:** 添加基于GeoJSON数据的地图定位功能
+- **core:** 添加地图定位功能并重构点位相关方法
+- **Point:** 添加闪烁点功能及示例
+- **core:** 为Polygon添加layerName选项并调整图层添加逻辑
+- **Point:** 添加setOneVisibleByProp方法控制点显示
+- **Polygon:** 优化遮罩功能支持多几何图形处理
+- **测量工具:** 添加测量距离和面积功能及工具栏样式
+- **地图:** 添加自定义投影配置支持
+- **日志管理:** 实现统一日志开关与级别控制
+- **SelectHandler:** 新增要素选择处理器模块
+- upgrade OpenLayers to v10.6.1 and update project to v2.0.0
+- update MapBaseLayers to handle optional token and improve annotation layer management
+- 重新添加已清理的App.vue文件，移除了所有敏感token信息
+- 重构Vue模板点位功能并优化事件管理
+- **Polygon:** 改进图像图层处理逻辑并添加更新功能
+- 添加验证工具类并重构现有验证逻辑
+- **地图工具:** 重构地图工具类并增强错误处理
+- 重构类型系统并增强核心功能
+### 🐛 Bug Fixes
+- **core:** 改进Vue依赖检测逻辑并更新版本号
+- **VueTemplatePoint:** 修复Vue3环境下pointData的类型定义
+- **core:** 修正Line类中layerName属性设置错误
+- resolve TypeScript build error in MapBaseLayers.ts
+### ⚡ Performance
+- **Polygon:** 优化GeoJSON解析性能，直接注入layerName
+### ♻️ Refactor
+- **MapBaseLayers:** 重构图层管理逻辑，优化代码结构和可维护性
+- **ConfigManager:** 集中管理默认配置并移除无用接口
+- **样式处理:** 统一处理自定义样式逻辑并修复代码格式
+- 将nameKey重命名为textKey以提高语义清晰度
+- 更新依赖项并优化类型导出结构
+- **core:** 重构DomPoint和MapBaseLayers类，优化代码结构和功能
+### 📝 Documentation
+- 添加详细模块文档并更新发布配置
+- update README with branch strategy and add migration guide
 ## [2.4.3] - 2026-01-27
 ### ✨ Features

package/README.md CHANGED Viewed

@@ -109,7 +109,7 @@ point.addPoint([{ lgtd: 119.81, lttd: 29.969, name: '示例点' }], {
 - **[RiverLayerManager](docs/RiverLayerManager.md)**: 河流图层管理。
 ### 交互与工具
-- **[SelectHandler](docs/SelectHandler.md)**: 要素选择交互。
+- **[SelectHandler](docs/SelectHandler.md)**: 要素选择交互（支持独立样式渲染、多选隔离）。
 - **[MeasureHandler](docs/MeasureHandler.md)**: 测量工具。
 - **[MapTools](docs/MapTools.md)**: 通用地图工具。
 - **[ValidationUtils](docs/ValidationUtils.md)**: 验证工具。

package/core/SelectHandler.d.ts CHANGED Viewed

@@ -1,33 +1,10 @@
-import Map from "ol/Map";
+import OlMap from "ol/Map";
 import { FeatureLike } from "ol/Feature";
 import { Style } from "ol/style";
 import { SelectOptions, SelectMode, ProgrammaticSelectOptions } from "../types";
 /**
  * 要素选择处理器类
  * 用于在地图上选择和高亮显示要素，支持单选、多选等多种选择模式
- *
- * @example
- * ```typescript
- * const selectHandler = new SelectHandler(map);
- *
- * // 启用点击选择
- * selectHandler.enableSelect('click', {
- *   layerFilter: ['pointLayer', 'polygonLayer'],
- *   multi: false,
- *   onSelect: (event) => {
- *     console.log('选中要素:', event.selected);
- *   }
- * });
- *
- * // 获取当前选中的要素
- * const selected = selectHandler.getSelectedFeatures();
- *
- * // 清除选择
- * selectHandler.clearSelection();
- *
- * // 禁用选择
- * selectHandler.disableSelect();
- * ```
  */
 export default class SelectHandler {
     /** OpenLayers 地图实例 */
@@ -36,14 +13,18 @@ export default class SelectHandler {
     private readonly eventManager;
     /** 错误处理器实例 */
     private readonly errorHandler;
-    /** Select 交互实例 */
-    private selectInteraction?;
+    /** 主 Select 交互实例（只负责交互，不负责渲染） */
+    private mainSelectInteraction?;
+    /** 额外的 Select 交互实例列表（用于编程式选择） */
+    private extraSelectInteractions;
+    /** 渲染用 Select 交互实例映射（用于交互式选择的高亮渲染） featureUID -> Select */
+    private renderInteractions;
     /** 当前选择模式 */
     private currentMode?;
-    /** 当前配置选项 */
-    private currentOptions?;
     /** 是否已启用选择 */
     private isEnabled;
+    /** 当前自定义样式函数（用于交互式选择） */
+    private currentSelectStyle?;
     /** 默认选中样式 - 点要素 */
     private readonly defaultPointStyle;
     /** 默认选中样式 - 线要素 */
@@ -54,7 +35,7 @@ export default class SelectHandler {
      * 构造函数
      * @param map OpenLayers地图实例
      */
-    constructor(map: Map);
+    constructor(map: OlMap);
     /**
      * 启用要素选择
      * @param mode 选择模式：'click'（点击）、'hover'（悬停）、'ctrl'（Ctrl+点击）
@@ -68,7 +49,7 @@ export default class SelectHandler {
      */
     disableSelect(): this;
     /**
-     * 获取当前选中的要素
+     * 获取当前选中的要素（仅返回主交互中的要素）
      * @returns 选中的要素数组
      */
     getSelectedFeatures(): FeatureLike[];
@@ -79,81 +60,45 @@ export default class SelectHandler {
     clearSelection(): this;
     /**
      * 通过要素ID选择要素
-     * @param featureIds 要素ID数组
-     * @param options 编程式选择配置选项
-     * @returns SelectHandler 实例（支持链式调用）
      */
     selectByIds(featureIds: string[], options?: ProgrammaticSelectOptions): this;
     /**
      * 通过属性选择要素
-     * @param propertyName 属性名称
-     * @param propertyValue 属性值
-     * @param options 编程式选择配置选项
-     * @returns SelectHandler 实例（支持链式调用）
      */
     selectByProperty(propertyName: string, propertyValue: any, options?: ProgrammaticSelectOptions): this;
     /**
-     * 判断选择是否已启用
-     * @returns 是否已启用
+     * 应用选择（编程式）
      */
-    isSelectEnabled(): boolean;
+    private applySelection;
     /**
-     * 获取当前选择模式
-     * @returns 当前选择模式
+     * 添加额外的交互实例（用于函数式样式结果）
      */
+    private addExtraInteraction;
+    private findFeaturesByIds;
+    private findFeaturesByProperty;
+    private ensureMainInteraction;
+    isSelectEnabled(): boolean;
     getCurrentMode(): SelectMode | undefined;
-    /**
-     * 定位至要素
-     * @private
-     * @param features 要素数组
-     * @param duration 动画持续时间（毫秒），默认500
-     * @param padding 边距（像素），默认100
-     */
+    updateSelectStyle(selectStyle: Style | Style[] | ((feature: FeatureLike, resolution: number) => Style | Style[])): this;
     private fitToFeatures;
-    /**
-     * 销毁选择处理器，清理所有资源
-     */
     destroy(): void;
-    /**
-     * 合并选项配置
-     * @private
-     */
-    private mergeOptions;
-    /**
-     * 创建 Select 交互
-     * @private
-     */
-    private createSelectInteraction;
-    /**
-     * 获取选择条件
-     * @private
-     */
     private getSelectCondition;
-    /**
-     * 创建图层过滤器
-     * @private
-     */
     private createLayerFilter;
     /**
-     * 创建选择样式
-     * @private
+     * 计算样式（解析函数或返回默认）
      */
-    private createSelectStyle;
+    private calculateStyle;
     /**
-     * 更新选择样式
-     * @param selectStyle 新的选择样式
-     * @returns SelectHandler 实例（支持链式调用）
+     * 为单个要素创建并添加渲染交互
      */
-    updateSelectStyle(selectStyle: Style | Style[] | ((feature: FeatureLike) => Style | Style[])): this;
+    private createRenderInteraction;
     /**
-     * 确保 Select 交互已创建
-     * 如果当前未启用选择交互，则创建一个不响应用户操作的交互实例用于编程式选择
-     * @private
+     * 移除单个要素的渲染交互
      */
-    private ensureSelectInteraction;
+    private removeRenderInteraction;
     /**
-     * 附加事件监听器
-     * @private
+     * 清理所有交互式渲染交互
      */
+    private clearRenderInteractions;
     private attachEventListeners;
 }

package/core/SelectHandler.js CHANGED Viewed

@@ -1,36 +1,16 @@
 import { Select } from "ol/interaction";
 import { click, pointerMove, platformModifierKeyOnly } from "ol/events/condition";
+import Feature from "ol/Feature";
 import VectorLayer from "ol/layer/Vector";
 import { Style, Fill, Stroke, Circle as CircleStyle } from "ol/style";
+import Collection from 'ol/Collection';
+import { getUid } from "ol/util";
 import { EventManager } from "./EventManager";
 import { ValidationUtils } from "../utils/ValidationUtils";
 import { ErrorHandler, MyOpenLayersError, ErrorType } from "../utils/ErrorHandler";
 /**
  * 要素选择处理器类
  * 用于在地图上选择和高亮显示要素，支持单选、多选等多种选择模式
- *
- * @example
- * ```typescript
- * const selectHandler = new SelectHandler(map);
- *
- * // 启用点击选择
- * selectHandler.enableSelect('click', {
- *   layerFilter: ['pointLayer', 'polygonLayer'],
- *   multi: false,
- *   onSelect: (event) => {
- *     console.log('选中要素:', event.selected);
- *   }
- * });
- *
- * // 获取当前选中的要素
- * const selected = selectHandler.getSelectedFeatures();
- *
- * // 清除选择
- * selectHandler.clearSelection();
- *
- * // 禁用选择
- * selectHandler.disableSelect();
- * ```
  */
 export default class SelectHandler {
     /**
@@ -38,6 +18,10 @@ export default class SelectHandler {
      * @param map OpenLayers地图实例
      */
     constructor(map) {
+        /** 额外的 Select 交互实例列表（用于编程式选择） */
+        this.extraSelectInteractions = [];
+        /** 渲染用 Select 交互实例映射（用于交互式选择的高亮渲染） featureUID -> Select */
+        this.renderInteractions = new Map();
         /** 是否已启用选择 */
         this.isEnabled = false;
         /** 默认选中样式 - 点要素 */
@@ -69,8 +53,6 @@ export default class SelectHandler {
         this.map = map;
         this.eventManager = new EventManager(map);
         this.errorHandler = ErrorHandler.getInstance();
-        // 默认启用点击选择模式，支持多选
-        this.enableSelect('click', { multi: true });
     }
     /**
      * 启用要素选择
@@ -84,17 +66,25 @@ export default class SelectHandler {
             if (this.isEnabled) {
                 this.disableSelect();
             }
-            const mergedOptions = this.mergeOptions(options);
-            this.currentMode = mode;
-            this.currentOptions = mergedOptions;
-            // 创建 Select 交互
-            this.selectInteraction = this.createSelectInteraction(mode, mergedOptions);
+            this.currentSelectStyle = options?.selectStyle;
+            // 创建主 Select 交互
+            // 这里的 style 设置为 null，使其只负责交互捕获，不负责渲染
+            // 渲染由独立的 renderInteractions 负责
+            this.mainSelectInteraction = new Select({
+                condition: this.getSelectCondition(mode),
+                layers: this.createLayerFilter(options?.layerFilter),
+                filter: options?.featureFilter,
+                style: null,
+                multi: options?.multi ?? false,
+                hitTolerance: options?.hitTolerance ?? 0
+            });
             // 添加事件监听器
-            this.attachEventListeners(mergedOptions);
+            this.attachEventListeners(this.mainSelectInteraction, options);
             // 添加到地图
-            this.map.addInteraction(this.selectInteraction);
+            this.map.addInteraction(this.mainSelectInteraction);
             this.isEnabled = true;
-            this.errorHandler.debug('要素选择已启用', { mode, options: mergedOptions });
+            this.currentMode = mode;
+            this.errorHandler.debug('要素选择已启用', { mode, options });
             return this;
         }
         catch (error) {
@@ -108,12 +98,15 @@ export default class SelectHandler {
      */
     disableSelect() {
         try {
-            if (this.selectInteraction) {
-                this.map.removeInteraction(this.selectInteraction);
-                this.selectInteraction = undefined;
+            if (this.mainSelectInteraction) {
+                this.map.removeInteraction(this.mainSelectInteraction);
+                this.mainSelectInteraction = undefined;
             }
+            // 清理交互式渲染实例（但不清理编程式的 extraSelectInteractions）
+            this.clearRenderInteractions();
             this.isEnabled = false;
             this.currentMode = undefined;
+            this.currentSelectStyle = undefined;
             this.errorHandler.debug('要素选择已禁用');
             return this;
         }
@@ -123,84 +116,47 @@ export default class SelectHandler {
         }
     }
     /**
-     * 获取当前选中的要素
+     * 获取当前选中的要素（仅返回主交互中的要素）
      * @returns 选中的要素数组
      */
     getSelectedFeatures() {
-        if (!this.selectInteraction) {
-            return [];
+        const features = [];
+        if (this.mainSelectInteraction) {
+            features.push(...this.mainSelectInteraction.getFeatures().getArray());
         }
-        const features = this.selectInteraction.getFeatures();
-        return features.getArray();
+        return features;
     }
     /**
      * 清除所有选择
      * @returns SelectHandler 实例（支持链式调用）
      */
     clearSelection() {
-        if (this.selectInteraction) {
-            this.selectInteraction.getFeatures().clear();
+        // 1. 清除主交互的选择
+        if (this.mainSelectInteraction) {
+            this.mainSelectInteraction.getFeatures().clear();
         }
+        // 2. 清理交互式渲染实例
+        this.clearRenderInteractions();
+        // 3. 移除并销毁所有额外交互（编程式选择）
+        this.extraSelectInteractions.forEach(interaction => {
+            this.map.removeInteraction(interaction);
+        });
+        this.extraSelectInteractions = [];
         return this;
     }
     /**
      * 通过要素ID选择要素
-     * @param featureIds 要素ID数组
-     * @param options 编程式选择配置选项
-     * @returns SelectHandler 实例（支持链式调用）
      */
     selectByIds(featureIds, options) {
         try {
-            // 确保交互实例存在
-            this.ensureSelectInteraction();
-            if (!this.selectInteraction) {
-                // 理论上 ensureSelectInteraction 后不应为空，这里做双重保险
-                return this;
-            }
             if (!featureIds || featureIds.length === 0) {
                 this.errorHandler.warn('要素ID列表为空');
                 return this;
             }
-            // 清除当前选择
-            this.clearSelection();
-            // 临时存储选中的要素
-            const selectedFeatures = [];
-            // 获取所有图层
-            const layers = this.map.getLayers().getArray();
-            for (const layer of layers) {
-                // 过滤图层
-                if (options?.layerName && layer.get('layerName') !== options.layerName) {
-                    continue;
-                }
-                if (layer instanceof VectorLayer) {
-                    const source = layer.getSource();
-                    if (!source)
-                        continue;
-                    // 查找并选择要素
-                    for (const featureId of featureIds) {
-                        const feature = source.getFeatureById(featureId);
-                        if (feature) {
-                            selectedFeatures.push(feature);
-                            this.selectInteraction.getFeatures().push(feature);
-                        }
-                    }
-                }
-            }
-            // 如果传入了自定义样式，为选中的要素设置样式
-            if (options?.selectStyle && selectedFeatures.length > 0) {
-                for (const feature of selectedFeatures) {
-                    if (typeof options.selectStyle === 'function') {
-                        feature.setStyle(options.selectStyle(feature));
-                    }
-                    else {
-                        feature.setStyle(options.selectStyle);
-                    }
-                }
-            }
-            // 定位至选中要素
-            if (options?.fitView && selectedFeatures.length > 0) {
-                this.fitToFeatures(selectedFeatures, options.fitDuration ?? 500, options.fitPadding ?? 100);
-            }
+            const selectedFeatures = this.findFeaturesByIds(featureIds, options?.layerName);
+            if (selectedFeatures.length === 0)
+                return this;
+            this.applySelection(selectedFeatures, options);
             return this;
         }
         catch (error) {
@@ -210,62 +166,15 @@ export default class SelectHandler {
     }
     /**
      * 通过属性选择要素
-     * @param propertyName 属性名称
-     * @param propertyValue 属性值
-     * @param options 编程式选择配置选项
-     * @returns SelectHandler 实例（支持链式调用）
      */
     selectByProperty(propertyName, propertyValue, options) {
         try {
-            // 确保交互实例存在
-            this.ensureSelectInteraction();
-            if (!this.selectInteraction) {
-                // 理论上 ensureSelectInteraction 后不应为空，这里做双重保险
-                return this;
-            }
-            if (!propertyName) {
+            if (!propertyName)
                 throw new Error('属性名称不能为空');
-            }
-            // 清除当前选择
-            this.clearSelection();
-            // 临时存储选中的要素
-            const selectedFeatures = [];
-            // 获取所有图层
-            const layers = this.map.getLayers().getArray();
-            for (const layer of layers) {
-                // 过滤图层
-                if (options?.layerName && layer.get('layerName') !== options.layerName) {
-                    continue;
-                }
-                if (layer instanceof VectorLayer) {
-                    const source = layer.getSource();
-                    if (!source)
-                        continue;
-                    // 查找并选择要素
-                    const features = source.getFeatures();
-                    for (const feature of features) {
-                        if (feature.get(propertyName) === propertyValue) {
-                            selectedFeatures.push(feature);
-                            this.selectInteraction.getFeatures().push(feature);
-                        }
-                    }
-                }
-            }
-            // 如果传入了自定义样式，为选中的要素设置样式
-            if (options?.selectStyle && selectedFeatures.length > 0) {
-                for (const feature of selectedFeatures) {
-                    if (typeof options.selectStyle === 'function') {
-                        feature.setStyle(options.selectStyle(feature));
-                    }
-                    else {
-                        feature.setStyle(options.selectStyle);
-                    }
-                }
-            }
-            // 定位至选中要素
-            if (options?.fitView && selectedFeatures.length > 0) {
-                this.fitToFeatures(selectedFeatures, options.fitDuration ?? 500, options.fitPadding ?? 100);
-            }
+            const selectedFeatures = this.findFeaturesByProperty(propertyName, propertyValue, options?.layerName);
+            if (selectedFeatures.length === 0)
+                return this;
+            this.applySelection(selectedFeatures, options);
             return this;
         }
         catch (error) {
@@ -274,42 +183,139 @@ export default class SelectHandler {
         }
     }
     /**
-     * 判断选择是否已启用
-     * @returns 是否已启用
+     * 应用选择（编程式）
      */
-    isSelectEnabled() {
-        return this.isEnabled;
+    applySelection(features, options) {
+        if (options?.selectStyle) {
+            if (typeof options.selectStyle === 'function') {
+                features.forEach(feature => {
+                    const resolution = this.map.getView().getResolution() || 1;
+                    const style = options.selectStyle(feature, resolution);
+                    this.addExtraInteraction(feature, style);
+                });
+            }
+            else {
+                const customSelect = new Select({
+                    condition: () => false,
+                    style: options.selectStyle,
+                    features: new Collection(features),
+                    hitTolerance: 0
+                });
+                this.map.addInteraction(customSelect);
+                this.extraSelectInteractions.push(customSelect);
+            }
+        }
+        else {
+            // 使用默认样式，添加到主交互
+            this.ensureMainInteraction();
+            this.mainSelectInteraction.getFeatures().extend(features);
+            // 手动触发渲染交互的创建（因为 mainSelectInteraction 不自动渲染，且直接 extend 可能不会触发 select 事件）
+            // 注意：Select 交互的 'select' 事件通常在用户交互时触发，手动 extend 集合不会触发该事件
+            features.forEach(feature => {
+                this.createRenderInteraction(feature);
+            });
+        }
+        if (options?.fitView) {
+            this.fitToFeatures(features, options.fitDuration ?? 500, options.fitPadding ?? 100);
+        }
     }
     /**
-     * 获取当前选择模式
-     * @returns 当前选择模式
+     * 添加额外的交互实例（用于函数式样式结果）
      */
+    addExtraInteraction(feature, style) {
+        const customSelect = new Select({
+            condition: () => false,
+            style: style,
+            features: new Collection([feature]),
+            hitTolerance: 0
+        });
+        this.map.addInteraction(customSelect);
+        this.extraSelectInteractions.push(customSelect);
+    }
+    // ... 查找方法保持不变 ...
+    findFeaturesByIds(featureIds, layerName) {
+        const selectedFeatures = [];
+        const layers = this.map.getLayers().getArray();
+        for (const layer of layers) {
+            if (layerName && layer.get('layerName') !== layerName)
+                continue;
+            if (!(layer instanceof VectorLayer))
+                continue;
+            const source = layer.getSource();
+            if (!source)
+                continue;
+            for (const featureId of featureIds) {
+                const feature = source.getFeatureById(featureId);
+                if (feature && feature instanceof Feature)
+                    selectedFeatures.push(feature);
+            }
+        }
+        return selectedFeatures;
+    }
+    findFeaturesByProperty(key, value, layerName) {
+        const selectedFeatures = [];
+        const layers = this.map.getLayers().getArray();
+        for (const layer of layers) {
+            if (layerName && layer.get('layerName') !== layerName)
+                continue;
+            if (!(layer instanceof VectorLayer))
+                continue;
+            const source = layer.getSource();
+            if (!source)
+                continue;
+            const features = source.getFeatures();
+            for (const feature of features) {
+                if (feature.get(key) === value)
+                    selectedFeatures.push(feature);
+            }
+        }
+        return selectedFeatures;
+    }
+    ensureMainInteraction() {
+        if (!this.mainSelectInteraction) {
+            this.mainSelectInteraction = new Select({
+                condition: () => false,
+                style: null // 主交互不直接渲染，依靠事件监听创建渲染实例
+            });
+            // 也要监听它的事件来处理默认样式的渲染
+            this.attachEventListeners(this.mainSelectInteraction, {});
+            this.map.addInteraction(this.mainSelectInteraction);
+        }
+    }
+    isSelectEnabled() {
+        return this.isEnabled;
+    }
     getCurrentMode() {
         return this.currentMode;
     }
-    /**
-     * 定位至要素
-     * @private
-     * @param features 要素数组
-     * @param duration 动画持续时间（毫秒），默认500
-     * @param padding 边距（像素），默认100
-     */
+    updateSelectStyle(selectStyle) {
+        if (!this.mainSelectInteraction) {
+            this.errorHandler.warn('主选择交互未启用，无法更新样式');
+            return this;
+        }
+        this.currentSelectStyle = selectStyle;
+        // 强制刷新：重新生成所有选中要素的渲染实例
+        const features = this.mainSelectInteraction.getFeatures().getArray();
+        // 清除旧的渲染
+        this.clearRenderInteractions();
+        // 重新创建渲染
+        features.forEach(feature => {
+            this.createRenderInteraction(feature);
+        });
+        return this;
+    }
     fitToFeatures(features, duration = 500, padding = 100) {
         try {
-            if (!features || features.length === 0) {
+            if (!features || features.length === 0)
                 return;
-            }
-            // 创建一个包含所有要素的范围
             let extent;
             for (const feature of features) {
                 const geometry = feature.getGeometry();
                 if (geometry) {
                     const featureExtent = geometry.getExtent();
-                    if (!extent) {
+                    if (!extent)
                         extent = featureExtent;
-                    }
                     else {
-                        // 扩展范围以包含当前要素
                         extent = [
                             Math.min(extent[0], featureExtent[0]),
                             Math.min(extent[1], featureExtent[1]),
@@ -322,7 +328,8 @@ export default class SelectHandler {
             if (extent) {
                 this.map.getView().fit(extent, {
                     duration,
-                    padding: [padding, padding, padding, padding]
+                    padding: [padding, padding, padding, padding],
+                    maxZoom: 18
                 });
             }
         }
@@ -330,195 +337,130 @@ export default class SelectHandler {
             this.errorHandler.error('定位至要素失败:', error);
         }
     }
-    /**
-     * 销毁选择处理器，清理所有资源
-     */
     destroy() {
         try {
             this.disableSelect();
+            this.clearSelection();
             this.errorHandler.debug('选择处理器已销毁');
         }
         catch (error) {
             this.errorHandler.handleError(new MyOpenLayersError(`销毁选择处理器失败: ${error instanceof Error ? error.message : '未知错误'}`, ErrorType.COMPONENT_ERROR));
         }
     }
-    /**
-     * 合并选项配置
-     * @private
-     */
-    mergeOptions(options) {
-        return {
-            multi: false,
-            layerFilter: undefined,
-            featureFilter: undefined,
-            hitTolerance: 0,
-            selectStyle: undefined,
-            onSelect: undefined,
-            onDeselect: undefined,
-            ...options
-        };
-    }
-    /**
-     * 创建 Select 交互
-     * @private
-     */
-    createSelectInteraction(mode, options) {
-        // 确定选择条件
-        const condition = this.getSelectCondition(mode);
-        // 创建图层过滤器
-        const layerFilter = this.createLayerFilter(options.layerFilter);
-        // 创建要素过滤器
-        const filter = options.featureFilter;
-        // 创建选择样式
-        const style = this.createSelectStyle(options.selectStyle);
-        return new Select({
-            condition,
-            layers: layerFilter,
-            filter,
-            style,
-            multi: options.multi,
-            hitTolerance: options.hitTolerance
-        });
-    }
-    /**
-     * 获取选择条件
-     * @private
-     */
     getSelectCondition(mode) {
         switch (mode) {
-            case 'click':
-                return click;
-            case 'hover':
-                return pointerMove;
-            case 'ctrl':
-                return platformModifierKeyOnly;
-            default:
-                return click;
+            case 'click': return click;
+            case 'hover': return pointerMove;
+            case 'ctrl': return platformModifierKeyOnly;
+            default: return click;
         }
     }
-    /**
-     * 创建图层过滤器
-     * @private
-     */
     createLayerFilter(layerNames) {
-        if (!layerNames || layerNames.length === 0) {
+        if (!layerNames || layerNames.length === 0)
             return undefined;
-        }
         return (layer) => {
             const layerName = layer.get('layerName') || layer.get('name');
             return layerNames.includes(layerName);
         };
     }
     /**
-     * 创建选择样式
-     * @private
+     * 计算样式（解析函数或返回默认）
      */
-    createSelectStyle(customStyle) {
-        if (customStyle) {
-            return customStyle;
-        }
-        // 返回根据几何类型的默认样式
-        return (feature) => {
-            const geometry = feature.getGeometry();
-            if (!geometry) {
-                return this.defaultPointStyle;
+    calculateStyle(feature, resolution) {
+        const styleSource = this.currentSelectStyle;
+        if (styleSource) {
+            if (typeof styleSource === 'function') {
+                return styleSource(feature, resolution);
             }
-            const geometryType = geometry.getType();
-            switch (geometryType) {
-                case 'Point':
-                case 'MultiPoint':
-                    return this.defaultPointStyle;
-                case 'LineString':
-                case 'MultiLineString':
-                    return this.defaultLineStyle;
-                case 'Polygon':
-                case 'MultiPolygon':
-                    return this.defaultPolygonStyle;
-                default:
-                    return this.defaultPointStyle;
-            }
-        };
-    }
-    /**
-     * 更新选择样式
-     * @param selectStyle 新的选择样式
-     * @returns SelectHandler 实例（支持链式调用）
-     */
-    updateSelectStyle(selectStyle) {
-        if (!this.selectInteraction) {
-            this.errorHandler.warn('选择交互未启用，无法更新样式');
-            return this;
+            return styleSource;
         }
-        try {
-            // 更新选择交互的样式
-            this.selectInteraction.getStyle = () => {
-                if (typeof selectStyle === 'function') {
-                    return selectStyle;
-                }
-                return selectStyle;
-            };
-            // 触发样式更新
-            const features = this.selectInteraction.getFeatures();
-            features.changed();
-            return this;
-        }
-        catch (error) {
-            this.errorHandler.handleError(new MyOpenLayersError(`更新选择样式失败: ${error instanceof Error ? error.message : '未知错误'}`, ErrorType.COMPONENT_ERROR, { selectStyle }));
-            throw error;
+        // 默认样式逻辑
+        const geometry = feature.getGeometry();
+        if (!geometry)
+            return this.defaultPointStyle;
+        const geometryType = geometry.getType();
+        switch (geometryType) {
+            case 'Point':
+            case 'MultiPoint': return this.defaultPointStyle;
+            case 'LineString':
+            case 'MultiLineString': return this.defaultLineStyle;
+            case 'Polygon':
+            case 'MultiPolygon': return this.defaultPolygonStyle;
+            default: return this.defaultPointStyle;
         }
     }
     /**
-     * 确保 Select 交互已创建
-     * 如果当前未启用选择交互，则创建一个不响应用户操作的交互实例用于编程式选择
-     * @private
+     * 为单个要素创建并添加渲染交互
      */
-    ensureSelectInteraction() {
-        if (this.selectInteraction) {
-            return;
-        }
-        // 创建一个不响应任何用户操作的 Select 交互
-        // condition 返回 false 表示不响应任何事件
-        this.selectInteraction = new Select({
+    createRenderInteraction(feature) {
+        const uid = getUid(feature);
+        if (this.renderInteractions.has(uid))
+            return; // 已存在
+        const resolution = this.map.getView().getResolution() || 1;
+        const style = this.calculateStyle(feature, resolution);
+        const renderSelect = new Select({
             condition: () => false,
-            style: this.createSelectStyle()
+            style: style,
+            features: new Collection([feature]),
+            hitTolerance: 0
         });
-        this.map.addInteraction(this.selectInteraction);
-        this.isEnabled = true;
-        // 注意：这里我们不设置 currentMode，因为这是一种特殊的编程式模式
-        // 也不需要 attachEventListeners，因为这种交互不会触发用户事件
-        this.errorHandler.debug('已自动创建编程式选择交互实例');
+        this.map.addInteraction(renderSelect);
+        this.renderInteractions.set(uid, renderSelect);
     }
     /**
-     * 附加事件监听器
-     * @private
+     * 移除单个要素的渲染交互
      */
-    attachEventListeners(options) {
-        if (!this.selectInteraction) {
-            return;
+    removeRenderInteraction(feature) {
+        const uid = getUid(feature);
+        const interaction = this.renderInteractions.get(uid);
+        if (interaction) {
+            this.map.removeInteraction(interaction);
+            this.renderInteractions.delete(uid);
         }
-        // 监听选择事件
-        this.selectInteraction.on('select', (event) => {
+    }
+    /**
+     * 清理所有交互式渲染交互
+     */
+    clearRenderInteractions() {
+        this.renderInteractions.forEach(interaction => {
+            this.map.removeInteraction(interaction);
+        });
+        this.renderInteractions.clear();
+    }
+    attachEventListeners(interaction, options) {
+        interaction.on('select', (event) => {
+            // 1. 处理渲染：选中时创建渲染实例
+            event.selected.forEach(feature => {
+                if (feature instanceof Feature) {
+                    this.createRenderInteraction(feature);
+                }
+            });
+            // 2. 处理渲染：取消选中时销毁渲染实例
+            event.deselected.forEach(feature => {
+                if (feature instanceof Feature) {
+                    this.removeRenderInteraction(feature);
+                }
+            });
+            // 3. 触发回调
             const callbackEvent = {
                 selected: event.selected,
                 deselected: event.deselected,
                 mapBrowserEvent: event.mapBrowserEvent
             };
-            // 触发选择回调
-            if (options.onSelect && event.selected.length > 0) {
+            if (options?.onSelect && event.selected.length > 0) {
                 try {
                     options.onSelect(callbackEvent);
                 }
-                catch (error) {
-                    this.errorHandler.error('选择回调执行失败:', error);
+                catch (e) {
+                    this.errorHandler.error('选择回调失败:', e);
                 }
             }
-            // 触发取消选择回调
-            if (options.onDeselect && event.deselected.length > 0) {
+            if (options?.onDeselect && event.deselected.length > 0) {
                 try {
                     options.onDeselect(callbackEvent);
                 }
-                catch (error) {
-                    this.errorHandler.error('取消选择回调执行失败:', error);
+                catch (e) {
+                    this.errorHandler.error('取消选择回调失败:', e);
                 }
             }
         });

package/docs/SelectHandler.md CHANGED Viewed

@@ -2,6 +2,13 @@
 `SelectHandler` 负责地图要素的交互选择，支持点击、悬停等多种模式，以及编程式选择。
+## 核心特性
+- **独立渲染机制**：采用独立的 Select 实例渲染选中要素，确保样式完全隔离，互不干扰。
+- **静态样式固化**：在选中瞬间计算并固化样式，支持基于原始样式的复杂计算（如 `feature.getStyle()`），彻底避免递归调用风险。
+- **多选隔离**：支持不同要素同时应用完全不同的高亮样式。
+- **自动清理**：自动管理渲染实例的生命周期，防止内存泄漏。
 ## 方法
 ### 交互选择
@@ -13,24 +20,26 @@
     - `layerFilter`: 图层过滤器（图层名称数组）。
     - `onSelect`: 选中回调。
     - `onDeselect`: 取消选中回调。
-    - `selectStyle`: 选中时的样式。
+    - `selectStyle`: 选中时的样式。支持 `Style` 对象、数组或函数 `(feature, resolution) => Style`。**推荐使用函数**以实现基于原始样式的动态高亮。
-- **disableSelect()**: 禁用选择交互。
+- **disableSelect()**: 禁用选择交互（停止响应用户操作，并清理交互式高亮）。
 - **isSelectEnabled()**: 检查是否已启用。
 ### 编程式选择
 - **selectByIds(featureIds: string[], options?)**: 根据 ID 选中要素。
 - **selectByProperty(propertyName: string, propertyValue: any, options?)**: 根据属性值选中要素。
-- **clearSelection()**: 清除当前所有选中状态。
-- **getSelectedFeatures()**: 获取当前选中的要素列表。
+- **clearSelection()**: 清除当前所有选中状态（包括交互式和编程式）。
+- **getSelectedFeatures()**: 获取当前选中的要素列表（仅包含交互式选择的要素）。
 ## 使用示例
+### 1. 基础用法
 ```typescript
 const selectHandler = map.getSelectHandler();
-// 1. 启用点击选择
+// 启用点击选择
 selectHandler.enableSelect('click', {
   multi: false, // 单选
   layerFilter: ['target-layer'], // 仅选择特定图层的要素
@@ -41,7 +50,7 @@ selectHandler.enableSelect('click', {
   onDeselect: (event) => {
     console.log('取消选中:', event.deselected);
   },
-  // 自定义选中样式
+  // 自定义选中样式（简单对象）
   selectStyle: new Style({
     image: new Circle({
       radius: 8,
@@ -50,10 +59,68 @@ selectHandler.enableSelect('click', {
     })
   })
 });
+```
+### 2. 高级用法：基于原始样式的动态高亮
+利用函数式 `selectStyle`，可以在选中时动态获取要素的原始样式，并在此基础上修改（例如只改边框颜色，保留填充）。由于采用了**样式固化**机制，这种写法是安全的。
+```typescript
+selectHandler.enableSelect('click', {
+  selectStyle: (feature, resolution) => {
+    // 获取要素的原始样式
+    // 注意：feature.getStyle() 可能返回 Style 对象、数组或函数，需要自行处理归一化
+    const originStyleLike = feature.getStyle();
+    let originStyle = originStyleLike;
+    // 如果原始样式是函数，执行它获取 Style 对象
+    if (typeof originStyleLike === 'function') {
+      originStyle = originStyleLike(feature, resolution);
+    }
+    // 归一化为数组
+    const styles = Array.isArray(originStyle) ? originStyle : [originStyle];
+    // 克隆并修改样式（例如：将边框改为青色）
+    return styles.map(s => {
+      const clone = s.clone();
+      const stroke = clone.getStroke();
+      if (stroke) {
+        stroke.setColor('#00FFFF');
+        stroke.setWidth(3);
+      } else {
+        // 如果没有边框，添加一个
+        clone.setStroke(new Stroke({ color: '#00FFFF', width: 3 }));
+      }
+      return clone;
+    });
+  }
+});
+```
-// 2. 编程式选择（例如在列表中点击条目，高亮地图要素）
-selectHandler.selectByProperty('id', 'feature-123');
+### 3. 编程式选择（带独立样式）
+编程式选择支持传入特定的样式，该样式将独立于主交互样式生效，且支持多要素使用不同样式。
+```typescript
+// 选中 ID 为 'feature-1' 的要素，并用红色高亮
+selectHandler.selectByIds(['feature-1'], {
+  selectStyle: new Style({ stroke: new Stroke({ color: 'red', width: 4 }) }),
+  fitView: true // 自动定位
+});
+// 同时选中 ID 为 'feature-2' 的要素，但用蓝色高亮（互不冲突）
+selectHandler.selectByIds(['feature-2'], {
+  selectStyle: new Style({ stroke: new Stroke({ color: 'blue', width: 4 }) })
+});
+```
+### 4. 禁用与清理
+```typescript
+// 禁用用户交互（停止响应点击，但保留编程式高亮）
+selectHandler.disableSelect();
-// 3. 禁用选择
-// selectHandler.disableSelect();
+// 清除所有选择（包括交互式和编程式的高亮）
+selectHandler.clearSelection();
 ```

package/package.json CHANGED Viewed

@@ -1,8 +1,9 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "2.4.3",
+  "version": "2.4.4",
   "type": "module",
+  "license": "MIT",
   "main": "index.js",
   "types": "index.d.ts",
   "keywords": [
@@ -12,6 +13,14 @@
     "map",
     "vue"
   ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cuteyuchen/my-openlayer.git"
+  },
+  "bugs": {
+    "url": "https://github.com/cuteyuchen/my-openlayer/issues"
+  },
+  "homepage": "https://github.com/cuteyuchen/my-openlayer#readme",
   "files": [
     "**/*",
     "LICENSE",