my-openlayer 2.0.0 → 2.1.0

package/core/SelectHandler.d.ts

@@ -0,0 +1,138 @@
+import Map from "ol/Map";
+import { FeatureLike } from "ol/Feature";
+import { SelectOptions, SelectMode } 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 地图实例 */
+    private readonly map;
+    /** 事件管理器实例 */
+    private readonly eventManager;
+    /** 错误处理器实例 */
+    private readonly errorHandler;
+    /** Select 交互实例 */
+    private selectInteraction?;
+    /** 当前选择模式 */
+    private currentMode?;
+    /** 当前配置选项 */
+    private currentOptions?;
+    /** 是否已启用选择 */
+    private isEnabled;
+    /** 默认选中样式 - 点要素 */
+    private readonly defaultPointStyle;
+    /** 默认选中样式 - 线要素 */
+    private readonly defaultLineStyle;
+    /** 默认选中样式 - 面要素 */
+    private readonly defaultPolygonStyle;
+    /**
+     * 构造函数
+     * @param map OpenLayers地图实例
+     */
+    constructor(map: Map);
+    /**
+     * 启用要素选择
+     * @param mode 选择模式：'click'（点击）、'hover'（悬停）、'box'（框选）、'ctrl'（Ctrl+点击）
+     * @param options 选择配置选项
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    enableSelect(mode?: SelectMode, options?: SelectOptions): this;
+    /**
+     * 禁用要素选择
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    disableSelect(): this;
+    /**
+     * 获取当前选中的要素
+     * @returns 选中的要素数组
+     */
+    getSelectedFeatures(): FeatureLike[];
+    /**
+     * 清除所有选择
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    clearSelection(): this;
+    /**
+     * 通过要素ID选择要素
+     * @param featureIds 要素ID数组
+     * @param layerName 图层名称（可选）
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    selectByIds(featureIds: string[], layerName?: string): this;
+    /**
+     * 通过属性选择要素
+     * @param propertyName 属性名称
+     * @param propertyValue 属性值
+     * @param layerName 图层名称（可选）
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    selectByProperty(propertyName: string, propertyValue: any, layerName?: string): this;
+    /**
+     * 判断选择是否已启用
+     * @returns 是否已启用
+     */
+    isSelectEnabled(): boolean;
+    /**
+     * 获取当前选择模式
+     * @returns 当前选择模式
+     */
+    getCurrentMode(): SelectMode | undefined;
+    /**
+     * 销毁选择处理器，清理所有资源
+     */
+    destroy(): void;
+    /**
+     * 合并选项配置
+     * @private
+     */
+    private mergeOptions;
+    /**
+     * 创建 Select 交互
+     * @private
+     */
+    private createSelectInteraction;
+    /**
+     * 获取选择条件
+     * @private
+     */
+    private getSelectCondition;
+    /**
+     * 创建图层过滤器
+     * @private
+     */
+    private createLayerFilter;
+    /**
+     * 创建选择样式
+     * @private
+     */
+    private createSelectStyle;
+    /**
+     * 附加事件监听器
+     * @private
+     */
+    private attachEventListeners;
+}

package/core/SelectHandler.js

@@ -0,0 +1,395 @@
+import { Select } from "ol/interaction";
+import { click, pointerMove, platformModifierKeyOnly } from "ol/events/condition";
+import VectorLayer from "ol/layer/Vector";
+import { Style, Fill, Stroke, Circle as CircleStyle } from "ol/style";
+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 {
+    /**
+     * 构造函数
+     * @param map OpenLayers地图实例
+     */
+    constructor(map) {
+        /** 是否已启用选择 */
+        this.isEnabled = false;
+        /** 默认选中样式 - 点要素 */
+        this.defaultPointStyle = new Style({
+            image: new CircleStyle({
+                radius: 7,
+                fill: new Fill({ color: 'rgba(255, 0, 0, 0.6)' }),
+                stroke: new Stroke({ color: '#ff0000', width: 2 })
+            })
+        });
+        /** 默认选中样式 - 线要素 */
+        this.defaultLineStyle = new Style({
+            stroke: new Stroke({
+                color: '#ff0000',
+                width: 3
+            })
+        });
+        /** 默认选中样式 - 面要素 */
+        this.defaultPolygonStyle = new Style({
+            stroke: new Stroke({
+                color: '#ff0000',
+                width: 2
+            }),
+            fill: new Fill({
+                color: 'rgba(255, 0, 0, 0.2)'
+            })
+        });
+        ValidationUtils.validateMapInstance(map);
+        this.map = map;
+        this.eventManager = new EventManager(map);
+        this.errorHandler = ErrorHandler.getInstance();
+    }
+    /**
+     * 启用要素选择
+     * @param mode 选择模式：'click'（点击）、'hover'（悬停）、'box'（框选）、'ctrl'（Ctrl+点击）
+     * @param options 选择配置选项
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    enableSelect(mode = 'click', options) {
+        try {
+            // 如果已启用，先禁用
+            if (this.isEnabled) {
+                this.disableSelect();
+            }
+            const mergedOptions = this.mergeOptions(options);
+            this.currentMode = mode;
+            this.currentOptions = mergedOptions;
+            // 创建 Select 交互
+            this.selectInteraction = this.createSelectInteraction(mode, mergedOptions);
+            // 添加事件监听器
+            this.attachEventListeners(mergedOptions);
+            // 添加到地图
+            this.map.addInteraction(this.selectInteraction);
+            this.isEnabled = true;
+            console.debug('要素选择已启用', { mode, options: mergedOptions });
+            return this;
+        }
+        catch (error) {
+            this.errorHandler.handleError(new MyOpenLayersError(`启用要素选择失败: ${error instanceof Error ? error.message : '未知错误'}`, ErrorType.COMPONENT_ERROR, { mode, options }));
+            throw error;
+        }
+    }
+    /**
+     * 禁用要素选择
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    disableSelect() {
+        try {
+            if (this.selectInteraction) {
+                this.map.removeInteraction(this.selectInteraction);
+                this.selectInteraction = undefined;
+            }
+            this.isEnabled = false;
+            this.currentMode = undefined;
+            console.debug('要素选择已禁用');
+            return this;
+        }
+        catch (error) {
+            this.errorHandler.handleError(new MyOpenLayersError(`禁用要素选择失败: ${error instanceof Error ? error.message : '未知错误'}`, ErrorType.COMPONENT_ERROR));
+            throw error;
+        }
+    }
+    /**
+     * 获取当前选中的要素
+     * @returns 选中的要素数组
+     */
+    getSelectedFeatures() {
+        if (!this.selectInteraction) {
+            return [];
+        }
+        const features = this.selectInteraction.getFeatures();
+        return features.getArray();
+    }
+    /**
+     * 清除所有选择
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    clearSelection() {
+        if (this.selectInteraction) {
+            this.selectInteraction.getFeatures().clear();
+        }
+        return this;
+    }
+    /**
+     * 通过要素ID选择要素
+     * @param featureIds 要素ID数组
+     * @param layerName 图层名称（可选）
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    selectByIds(featureIds, layerName) {
+        try {
+            if (!this.selectInteraction) {
+                console.warn('选择交互未启用，无法选择要素');
+                return this;
+            }
+            if (!featureIds || featureIds.length === 0) {
+                console.warn('要素ID列表为空');
+                return this;
+            }
+            // 清除当前选择
+            this.clearSelection();
+            // 获取所有图层
+            const layers = this.map.getLayers().getArray();
+            for (const layer of layers) {
+                // 过滤图层
+                if (layerName && layer.get('layerName') !== 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) {
+                            this.selectInteraction.getFeatures().push(feature);
+                        }
+                    }
+                }
+            }
+            return this;
+        }
+        catch (error) {
+            this.errorHandler.handleError(new MyOpenLayersError(`通过ID选择要素失败: ${error instanceof Error ? error.message : '未知错误'}`, ErrorType.COMPONENT_ERROR, { featureIds, layerName }));
+            throw error;
+        }
+    }
+    /**
+     * 通过属性选择要素
+     * @param propertyName 属性名称
+     * @param propertyValue 属性值
+     * @param layerName 图层名称（可选）
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    selectByProperty(propertyName, propertyValue, layerName) {
+        try {
+            if (!this.selectInteraction) {
+                console.warn('选择交互未启用，无法选择要素');
+                return this;
+            }
+            if (!propertyName) {
+                throw new Error('属性名称不能为空');
+            }
+            // 清除当前选择
+            this.clearSelection();
+            // 获取所有图层
+            const layers = this.map.getLayers().getArray();
+            for (const layer of layers) {
+                // 过滤图层
+                if (layerName && layer.get('layerName') !== 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) {
+                            this.selectInteraction.getFeatures().push(feature);
+                        }
+                    }
+                }
+            }
+            return this;
+        }
+        catch (error) {
+            this.errorHandler.handleError(new MyOpenLayersError(`通过属性选择要素失败: ${error instanceof Error ? error.message : '未知错误'}`, ErrorType.COMPONENT_ERROR, { propertyName, propertyValue, layerName }));
+            throw error;
+        }
+    }
+    /**
+     * 判断选择是否已启用
+     * @returns 是否已启用
+     */
+    isSelectEnabled() {
+        return this.isEnabled;
+    }
+    /**
+     * 获取当前选择模式
+     * @returns 当前选择模式
+     */
+    getCurrentMode() {
+        return this.currentMode;
+    }
+    /**
+     * 销毁选择处理器，清理所有资源
+     */
+    destroy() {
+        try {
+            this.disableSelect();
+            console.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;
+            case 'box':
+                // 框选需要额外的 DragBox 交互，这里暂不实现
+                return click;
+            default:
+                return click;
+        }
+    }
+    /**
+     * 创建图层过滤器
+     * @private
+     */
+    createLayerFilter(layerNames) {
+        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;
+            }
+            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;
+            }
+        };
+    }
+    /**
+     * 附加事件监听器
+     * @private
+     */
+    attachEventListeners(options) {
+        if (!this.selectInteraction) {
+            return;
+        }
+        // 监听选择事件
+        this.selectInteraction.on('select', (event) => {
+            const callbackEvent = {
+                selected: event.selected,
+                deselected: event.deselected,
+                mapBrowserEvent: event.mapBrowserEvent
+            };
+            // 触发选择回调
+            if (options.onSelect && event.selected.length > 0) {
+                try {
+                    options.onSelect(callbackEvent);
+                }
+                catch (error) {
+                    console.error('选择回调执行失败:', error);
+                }
+            }
+            // 触发取消选择回调
+            if (options.onDeselect && event.deselected.length > 0) {
+                try {
+                    options.onDeselect(callbackEvent);
+                }
+                catch (error) {
+                    console.error('取消选择回调执行失败:', error);
+                }
+            }
+        });
+    }
+}

package/core/VueTemplatePoint.d.ts

@@ -1,51 +1,51 @@
-import { Map as OLMap } from 'ol';
-import { VueTemplatePointInstance } from '../types';
-/**
- * Vue模板点位管理类
- * 用于在地图上添加和管理Vue组件覆盖物
- */
-export default class VueTemplatePoint {
-    private readonly map;
-    private readonly errorHandler;
-    private vuePoints;
-    /**
-     * 构造函数
-     * @param map OpenLayers地图实例
-     */
-    constructor(map: OLMap);
-    /**
-     * 添加Vue模板点位
-     * @param pointDataList 点位数据列表
-     * @param template Vue模板
-     * @param options 可选配置项
-     * @returns 点位控制器
-     */
-    addVueTemplatePoint(pointDataList: any[], template: any, options?: {
-        positioning?: 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center-left' | 'center-center' | 'center-right' | 'top-left' | 'top-center' | 'top-right';
-        stopEvent?: boolean;
-    }): {
-        setVisible: (visible: boolean) => void;
-        remove: () => void;
-        getPoints: () => VueTemplatePointInstance[];
-    };
-    /**
-     * 根据ID获取点位实例
-     * @param id 点位ID
-     * @returns 点位实例或undefined
-     */
-    getPointById(id: string): VueTemplatePointInstance | undefined;
-    /**
-     * 获取所有点位实例
-     * @returns 所有点位实例数组
-     */
-    getAllPoints(): VueTemplatePointInstance[];
-    /**
-     * 移除所有点位
-     */
-    removeAllPoints(): void;
-    /**
-     * 获取点位数量
-     * @returns 点位数量
-     */
-    getPointCount(): number;
-}
+import { Map as OLMap } from 'ol';
+import { VueTemplatePointInstance } from '../types';
+/**
+ * Vue模板点位管理类
+ * 用于在地图上添加和管理Vue组件覆盖物
+ */
+export default class VueTemplatePoint {
+    private readonly map;
+    private readonly errorHandler;
+    private vuePoints;
+    /**
+     * 构造函数
+     * @param map OpenLayers地图实例
+     */
+    constructor(map: OLMap);
+    /**
+     * 添加Vue模板点位
+     * @param pointDataList 点位数据列表
+     * @param template Vue模板
+     * @param options 可选配置项
+     * @returns 点位控制器
+     */
+    addVueTemplatePoint(pointDataList: any[], template: any, options?: {
+        positioning?: 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center-left' | 'center-center' | 'center-right' | 'top-left' | 'top-center' | 'top-right';
+        stopEvent?: boolean;
+    }): {
+        setVisible: (visible: boolean) => void;
+        remove: () => void;
+        getPoints: () => VueTemplatePointInstance[];
+    };
+    /**
+     * 根据ID获取点位实例
+     * @param id 点位ID
+     * @returns 点位实例或undefined
+     */
+    getPointById(id: string): VueTemplatePointInstance | undefined;
+    /**
+     * 获取所有点位实例
+     * @returns 所有点位实例数组
+     */
+    getAllPoints(): VueTemplatePointInstance[];
+    /**
+     * 移除所有点位
+     */
+    removeAllPoints(): void;
+    /**
+     * 获取点位数量
+     * @returns 点位数量
+     */
+    getPointCount(): number;
+}