my-openlayer 2.1.0 → 2.1.2

package/core/SelectHandler.d.ts

@@ -1,6 +1,7 @@
 import Map from "ol/Map";
 import { FeatureLike } from "ol/Feature";
-import { SelectOptions, SelectMode } from "../types";
+import { Style } from "ol/style";
+import { SelectOptions, SelectMode, ProgrammaticSelectOptions } from "../types";
 /**
  * 要素选择处理器类
  * 用于在地图上选择和高亮显示要素，支持单选、多选等多种选择模式
@@ -56,7 +57,7 @@ export default class SelectHandler {
     constructor(map: Map);
     /**
      * 启用要素选择
-     * @param mode 选择模式：'click'（点击）、'hover'（悬停）、'box'（框选）、'ctrl'（Ctrl+点击）
+     * @param mode 选择模式：'click'（点击）、'hover'（悬停）、'ctrl'（Ctrl+点击）
      * @param options 选择配置选项
      * @returns SelectHandler 实例（支持链式调用）
      */
@@ -79,18 +80,18 @@ export default class SelectHandler {
     /**
      * 通过要素ID选择要素
      * @param featureIds 要素ID数组
-     * @param layerName 图层名称（可选）
+     * @param options 编程式选择配置选项
      * @returns SelectHandler 实例（支持链式调用）
      */
-    selectByIds(featureIds: string[], layerName?: string): this;
+    selectByIds(featureIds: string[], options?: ProgrammaticSelectOptions): this;
     /**
      * 通过属性选择要素
      * @param propertyName 属性名称
      * @param propertyValue 属性值
-     * @param layerName 图层名称（可选）
+     * @param options 编程式选择配置选项
      * @returns SelectHandler 实例（支持链式调用）
      */
-    selectByProperty(propertyName: string, propertyValue: any, layerName?: string): this;
+    selectByProperty(propertyName: string, propertyValue: any, options?: ProgrammaticSelectOptions): this;
     /**
      * 判断选择是否已启用
      * @returns 是否已启用
@@ -101,6 +102,14 @@ export default class SelectHandler {
      * @returns 当前选择模式
      */
     getCurrentMode(): SelectMode | undefined;
+    /**
+     * 定位至要素
+     * @private
+     * @param features 要素数组
+     * @param duration 动画持续时间（毫秒），默认500
+     * @param padding 边距（像素），默认100
+     */
+    private fitToFeatures;
     /**
      * 销毁选择处理器，清理所有资源
      */
@@ -130,6 +139,12 @@ export default class SelectHandler {
      * @private
      */
     private createSelectStyle;
+    /**
+     * 更新选择样式
+     * @param selectStyle 新的选择样式
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    updateSelectStyle(selectStyle: Style | Style[] | ((feature: FeatureLike) => Style | Style[])): this;
     /**
      * 附加事件监听器
      * @private

package/core/SelectHandler.js

@@ -69,10 +69,12 @@ export default class SelectHandler {
         this.map = map;
         this.eventManager = new EventManager(map);
         this.errorHandler = ErrorHandler.getInstance();
+        // 默认启用点击选择模式，支持多选
+        this.enableSelect('click', { multi: true });
     }
     /**
      * 启用要素选择
-     * @param mode 选择模式：'click'（点击）、'hover'（悬停）、'box'（框选）、'ctrl'（Ctrl+点击）
+     * @param mode 选择模式：'click'（点击）、'hover'（悬停）、'ctrl'（Ctrl+点击）
      * @param options 选择配置选项
      * @returns SelectHandler 实例（支持链式调用）
      */
@@ -144,10 +146,10 @@ export default class SelectHandler {
     /**
      * 通过要素ID选择要素
      * @param featureIds 要素ID数组
-     * @param layerName 图层名称（可选）
+     * @param options 编程式选择配置选项
      * @returns SelectHandler 实例（支持链式调用）
      */
-    selectByIds(featureIds, layerName) {
+    selectByIds(featureIds, options) {
         try {
             if (!this.selectInteraction) {
                 console.warn('选择交互未启用，无法选择要素');
@@ -159,11 +161,13 @@ export default class SelectHandler {
             }
             // 清除当前选择
             this.clearSelection();
+            // 临时存储选中的要素
+            const selectedFeatures = [];
             // 获取所有图层
             const layers = this.map.getLayers().getArray();
             for (const layer of layers) {
                 // 过滤图层
-                if (layerName && layer.get('layerName') !== layerName) {
+                if (options?.layerName && layer.get('layerName') !== options.layerName) {
                     continue;
                 }
                 if (layer instanceof VectorLayer) {
@@ -174,15 +178,31 @@ export default class SelectHandler {
                     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);
+            }
             return this;
         }
         catch (error) {
-            this.errorHandler.handleError(new MyOpenLayersError(`通过ID选择要素失败: ${error instanceof Error ? error.message : '未知错误'}`, ErrorType.COMPONENT_ERROR, { featureIds, layerName }));
+            this.errorHandler.handleError(new MyOpenLayersError(`通过ID选择要素失败: ${error instanceof Error ? error.message : '未知错误'}`, ErrorType.COMPONENT_ERROR, { featureIds, options }));
             throw error;
         }
     }
@@ -190,10 +210,10 @@ export default class SelectHandler {
      * 通过属性选择要素
      * @param propertyName 属性名称
      * @param propertyValue 属性值
-     * @param layerName 图层名称（可选）
+     * @param options 编程式选择配置选项
      * @returns SelectHandler 实例（支持链式调用）
      */
-    selectByProperty(propertyName, propertyValue, layerName) {
+    selectByProperty(propertyName, propertyValue, options) {
         try {
             if (!this.selectInteraction) {
                 console.warn('选择交互未启用，无法选择要素');
@@ -204,11 +224,13 @@ export default class SelectHandler {
             }
             // 清除当前选择
             this.clearSelection();
+            // 临时存储选中的要素
+            const selectedFeatures = [];
             // 获取所有图层
             const layers = this.map.getLayers().getArray();
             for (const layer of layers) {
                 // 过滤图层
-                if (layerName && layer.get('layerName') !== layerName) {
+                if (options?.layerName && layer.get('layerName') !== options.layerName) {
                     continue;
                 }
                 if (layer instanceof VectorLayer) {
@@ -219,15 +241,31 @@ export default class SelectHandler {
                     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);
+            }
             return this;
         }
         catch (error) {
-            this.errorHandler.handleError(new MyOpenLayersError(`通过属性选择要素失败: ${error instanceof Error ? error.message : '未知错误'}`, ErrorType.COMPONENT_ERROR, { propertyName, propertyValue, layerName }));
+            this.errorHandler.handleError(new MyOpenLayersError(`通过属性选择要素失败: ${error instanceof Error ? error.message : '未知错误'}`, ErrorType.COMPONENT_ERROR, { propertyName, propertyValue, options }));
             throw error;
         }
     }
@@ -245,6 +283,49 @@ export default class SelectHandler {
     getCurrentMode() {
         return this.currentMode;
     }
+    /**
+     * 定位至要素
+     * @private
+     * @param features 要素数组
+     * @param duration 动画持续时间（毫秒），默认500
+     * @param padding 边距（像素），默认100
+     */
+    fitToFeatures(features, duration = 500, padding = 100) {
+        try {
+            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) {
+                        extent = featureExtent;
+                    }
+                    else {
+                        // 扩展范围以包含当前要素
+                        extent = [
+                            Math.min(extent[0], featureExtent[0]),
+                            Math.min(extent[1], featureExtent[1]),
+                            Math.max(extent[2], featureExtent[2]),
+                            Math.max(extent[3], featureExtent[3])
+                        ];
+                    }
+                }
+            }
+            if (extent) {
+                this.map.getView().fit(extent, {
+                    duration,
+                    padding: [padding, padding, padding, padding]
+                });
+            }
+        }
+        catch (error) {
+            console.error('定位至要素失败:', error);
+        }
+    }
     /**
      * 销毁选择处理器，清理所有资源
      */
@@ -307,9 +388,6 @@ export default class SelectHandler {
                 return pointerMove;
             case 'ctrl':
                 return platformModifierKeyOnly;
-            case 'box':
-                // 框选需要额外的 DragBox 交互，这里暂不实现
-                return click;
             default:
                 return click;
         }
@@ -357,6 +435,34 @@ export default class SelectHandler {
             }
         };
     }
+    /**
+     * 更新选择样式
+     * @param selectStyle 新的选择样式
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    updateSelectStyle(selectStyle) {
+        if (!this.selectInteraction) {
+            console.warn('选择交互未启用，无法更新样式');
+            return this;
+        }
+        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;
+        }
+    }
     /**
      * 附加事件监听器
      * @private

package/index.d.ts

@@ -16,4 +16,4 @@ export { ValidationUtils } from './utils/ValidationUtils';
 export type { BaseOptions, StyleOptions, TextOptions } from './types';
 export type { PointOptions, LineOptions, PolygonOptions } from './types';
 export type { OptionsType } from './types';
-export type { MapInitType, MapLayersOptions, HeatMapOptions, ImageLayerData, MaskLayerOptions, ColorMap, FeatureColorUpdateOptions, PointData, LineData, ClusterOptions, MeasureHandlerType, VueTemplatePointOptions, MapJSONData, FeatureData, AnnotationType, TiandituType, MapLayers, AnnotationLayerOptions, SelectOptions, SelectMode, SelectCallbackEvent } from './types';
+export type { MapInitType, MapLayersOptions, HeatMapOptions, ImageLayerData, MaskLayerOptions, ColorMap, FeatureColorUpdateOptions, PointData, LineData, ClusterOptions, MeasureHandlerType, VueTemplatePointOptions, MapJSONData, FeatureData, AnnotationType, TiandituType, MapLayers, AnnotationLayerOptions, SelectOptions, SelectMode, SelectCallbackEvent, ProgrammaticSelectOptions } from './types';

package/package.json

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

package/types.d.ts

@@ -306,7 +306,7 @@ export interface VueTemplatePointInstance {
 /**
  * 选择模式类型
  */
-export type SelectMode = 'click' | 'hover' | 'box' | 'ctrl';
+export type SelectMode = 'click' | 'hover' | 'ctrl';
 /**
  * 选择回调事件接口
  */
@@ -337,4 +337,19 @@ export interface SelectOptions {
     /** 取消选中要素时的回调函数 */
     onDeselect?: (event: SelectCallbackEvent) => void;
 }
+/**
+ * 编程式选择选项接口
+ */
+export interface ProgrammaticSelectOptions {
+    /** 图层名称，指定在哪个图层中选择要素 */
+    layerName?: string;
+    /** 自定义选中样式（仅作用于此次选择） */
+    selectStyle?: Style | Style[] | ((feature: FeatureLike) => Style | Style[]);
+    /** 是否定位至选中要素，默认 false */
+    fitView?: boolean;
+    /** 定位动画持续时间（毫秒），默认 500 */
+    fitDuration?: number;
+    /** 定位时的边距（像素），默认 100 */
+    fitPadding?: number;
+}
 export {};