my-openlayer 2.0.1 → 2.1.1

package/MyOl.d.ts

@@ -5,6 +5,7 @@ import Point from "./core/Point";
 import Line from "./core/Line";
 import MapBaseLayers from "./core/MapBaseLayers";
 import MapTools from "./core/MapTools";
+import SelectHandler from "./core/SelectHandler";
 import { ErrorHandler } from './utils/ErrorHandler';
 import { EventManager } from './core/EventManager';
 import { ConfigManager } from './core/ConfigManager';
@@ -20,6 +21,7 @@ export default class MyOl {
     private _mapTools?;
     private _point?;
     private _line?;
+    private _selectHandler?;
     private readonly errorHandler;
     private _eventManager?;
     private readonly configManager;
@@ -83,6 +85,11 @@ export default class MyOl {
      * @returns Line 线要素操作实例
      */
     getLine(): Line;
+    /**
+     * 获取要素选择处理器模块
+     * @returns SelectHandler 要素选择处理器实例
+     */
+    getSelectHandler(): SelectHandler;
     /**
      * 获取地图工具模块
      * @returns MapTools 地图工具实例

package/MyOl.js

@@ -12,6 +12,7 @@ import Point from "./core/Point";
 import Line from "./core/Line";
 import MapBaseLayers from "./core/MapBaseLayers";
 import MapTools from "./core/MapTools";
+import SelectHandler from "./core/SelectHandler";
 import { ErrorHandler, MyOpenLayersError, ErrorType } from './utils/ErrorHandler';
 import { EventManager } from './core/EventManager';
 import { ConfigManager } from './core/ConfigManager';
@@ -240,6 +241,23 @@ class MyOl {
             throw error;
         }
     }
+    /**
+     * 获取要素选择处理器模块
+     * @returns SelectHandler 要素选择处理器实例
+     */
+    getSelectHandler() {
+        try {
+            if (!this._selectHandler) {
+                this._selectHandler = new SelectHandler(this.map);
+                console.debug('要素选择模块已加载');
+            }
+            return this._selectHandler;
+        }
+        catch (error) {
+            this.errorHandler.handleError(new MyOpenLayersError('要素选择模块初始化失败', ErrorType.COMPONENT_ERROR, { error }));
+            throw error;
+        }
+    }
     /**
      * 获取地图工具模块
      * @returns MapTools 地图工具实例
@@ -358,6 +376,7 @@ class MyOl {
             this._polygon = undefined;
             this._mapTools = undefined;
             this._baseLayers = undefined;
+            this._selectHandler = undefined;
             // 销毁地图
             this.map.setTarget(undefined);
             console.debug('地图实例已销毁', { map: this.map });

package/core/Line.d.ts

@@ -52,33 +52,33 @@ export default class Line {
      */
     constructor(map: Map);
     /**
-     * 添加线要素（使用GeoJSON数据）
+     * 添加线要素
      * @param data GeoJSON格式的线数据
      * @param options 配置项
      * @returns 创建的矢量图层
      */
     addLine(data: MapJSONData, options?: LineOptions): VectorLayer<VectorSource>;
     /**
-     * 添加线要素（从URL加载）
+     * 从URL添加线要素
      * @param url 数据URL
      * @param options 配置项
      * @returns 创建的矢量图层
      */
-    addLine(url: string, options?: LineOptions): VectorLayer<VectorSource>;
+    addLineByUrl(url: string, options?: LineOptions): VectorLayer<VectorSource>;
     /**
-     * 添加分级河流图层（使用GeoJSON数据）
+     * 添加分级河流图层，根据缩放级别显示不同级别的河流
      * @param fyRiverJson 河流 GeoJSON 数据
      * @param options 河流图层配置选项
      * @throws {Error} 当数据格式无效时抛出错误
      */
     addRiverLayersByZoom(fyRiverJson: MapJSONData, options?: RiverLayerOptions): void;
     /**
-     * 添加分级河流图层（从URL加载）
+     * 从URL添加分级河流图层，根据缩放级别显示不同级别的河流
      * @param url 河流数据URL
      * @param options 河流图层配置选项
      * @throws {Error} 当数据格式无效时抛出错误
      */
-    addRiverLayersByZoom(url: string, options?: RiverLayerOptions): void;
+    addRiverLayersByZoomByUrl(url: string, options?: RiverLayerOptions): void;
     /**
      * 显示或隐藏河流图层
      * @param show 是否显示河流图层
@@ -90,19 +90,19 @@ export default class Line {
      */
     showRiverLayerByZoom(): void;
     /**
-     * 添加按级别显示不同宽度的河流图层（使用GeoJSON数据）
+     * 添加按级别显示不同宽度的河流图层
      * @param data 河流 GeoJSON 数据
      * @param options 河流图层配置选项
      * @returns 创建的河流图层
      */
     addRiverWidthByLevel(data: MapJSONData, options?: RiverLayerOptions): VectorLayer<VectorSource>;
     /**
-     * 添加按级别显示不同宽度的河流图层（从URL加载）
+     * 从URL添加按级别显示不同宽度的河流图层
      * @param url 河流数据URL
      * @param options 河流图层配置选项
      * @returns 创建的河流图层
      */
-    addRiverWidthByLevel(url: string, options?: RiverLayerOptions): VectorLayer<VectorSource>;
+    addRiverWidthByLevelByUrl(url: string, options?: RiverLayerOptions): VectorLayer<VectorSource>;
     /**
      * 移除线图层
      * @param layerName 图层名称

package/core/Line.js

@@ -43,10 +43,7 @@ export default class Line {
         this.eventManager = new EventManager(map);
     }
     addLine(data, options = {}) {
-        const isUrl = typeof data === 'string';
-        if (!isUrl) {
-            ValidationUtils.validateGeoJSONData(data);
-        }
+        ValidationUtils.validateGeoJSONData(data);
         const defaultOptions = {
             type: 'line',
             strokeColor: 'rgba(3, 122, 255, 1)',
@@ -56,15 +53,62 @@ export default class Line {
             layerName: options.layerName || 'lineLayer'
         };
         const mergedOptions = { ...defaultOptions, ...options };
-        // 根据数据类型创建 VectorSource
-        const source = isUrl
-            ? new VectorSource({
-                url: data,
-                format: new GeoJSON(options.projectionOptOptions)
-            })
-            : new VectorSource({
-                features: new GeoJSON().readFeatures(data, options.projectionOptOptions)
-            });
+        const features = new GeoJSON().readFeatures(data, options.projectionOptOptions);
+        const layer = new VectorLayer({
+            properties: {
+                name: mergedOptions.layerName,
+                layerName: mergedOptions.layerName
+            },
+            source: new VectorSource({ features }),
+            style: (feature) => {
+                if (feature instanceof Feature) {
+                    feature.set('type', mergedOptions.type);
+                    feature.set('layerName', mergedOptions.type);
+                }
+                // 如果传入了自定义样式，直接使用
+                if (mergedOptions.style) {
+                    if (typeof mergedOptions.style === 'function') {
+                        return mergedOptions.style(feature);
+                    }
+                    else {
+                        return mergedOptions.style;
+                    }
+                }
+                return new Style({
+                    stroke: new Stroke({
+                        color: mergedOptions.strokeColor,
+                        width: mergedOptions.strokeWidth,
+                        lineDash: mergedOptions.lineDash,
+                        lineDashOffset: mergedOptions.lineDashOffset
+                    })
+                });
+            },
+            zIndex: mergedOptions.zIndex
+        });
+        layer.setVisible(mergedOptions.visible);
+        this.map.addLayer(layer);
+        return layer;
+    }
+    /**
+     * 从URL添加线要素
+     * @param url 数据URL
+     * @param options 配置项
+     * @returns 创建的矢量图层
+     */
+    addLineByUrl(url, options = {}) {
+        const defaultOptions = {
+            type: 'line',
+            strokeColor: 'rgba(3, 122, 255, 1)',
+            strokeWidth: 2,
+            visible: true,
+            zIndex: 15,
+            layerName: options.layerName || 'lineLayer'
+        };
+        const mergedOptions = { ...defaultOptions, ...options };
+        const source = new VectorSource({
+            url,
+            format: new GeoJSON(options.projectionOptOptions)
+        });
         const layer = new VectorLayer({
             properties: {
                 name: mergedOptions.layerName,
@@ -101,10 +145,7 @@ export default class Line {
         return layer;
     }
     addRiverLayersByZoom(fyRiverJson, options = {}) {
-        const isUrl = typeof fyRiverJson === 'string';
-        if (!isUrl) {
-            ValidationUtils.validateGeoJSONData(fyRiverJson);
-        }
+        ValidationUtils.validateGeoJSONData(fyRiverJson);
         const defaultOptions = {
             type: 'river',
             levelCount: 5,
@@ -126,44 +167,106 @@ export default class Line {
         this.riverLayerList = [];
         // 创建分级河流图层
         for (let level = 1; level <= mergedOptions.levelCount; level++) {
-            const vectorSource = isUrl
-                ? new VectorSource({
-                    url: fyRiverJson,
-                    format: new GeoJSON(),
-                    loader: function (extent, resolution, projection, success, failure) {
-                        fetch(fyRiverJson)
-                            .then(response => response.json())
-                            .then(data => {
-                            const geojson = new GeoJSON();
-                            data.features.forEach((feature) => {
-                                if (feature.properties && feature.properties.level === level) {
-                                    try {
-                                        const olFeature = geojson.readFeature(feature);
-                                        if (Array.isArray(olFeature)) {
-                                            vectorSource.addFeatures(olFeature);
-                                        }
-                                        else {
-                                            vectorSource.addFeature(olFeature);
-                                        }
-                                    }
-                                    catch (error) {
-                                        console.warn(`Failed to load river feature at level ${level}:`, error);
-                                    }
+            const vectorSource = new VectorSource({
+                format: new GeoJSON(),
+                loader: () => {
+                    const geojson = new GeoJSON();
+                    fyRiverJson.features.forEach((feature) => {
+                        if (feature.properties && feature.properties.level === level) {
+                            try {
+                                const olFeature = geojson.readFeature(feature);
+                                if (Array.isArray(olFeature)) {
+                                    vectorSource.addFeatures(olFeature);
                                 }
-                            });
-                            success?.(vectorSource.getFeatures());
-                        })
-                            .catch(error => {
-                            console.error('Error loading river data:', error);
-                            failure?.();
-                        });
+                                else {
+                                    vectorSource.addFeature(olFeature);
+                                }
+                            }
+                            catch (error) {
+                                console.warn(`Failed to load river feature at level ${level}:`, error);
+                            }
+                        }
+                    });
+                }
+            });
+            const riverLayer = new VectorLayer({
+                properties: {
+                    name: mergedOptions.layerName,
+                    layerName: mergedOptions.layerName,
+                    riverLevel: level
+                },
+                source: vectorSource,
+                style: (feature) => {
+                    if (feature instanceof Feature) {
+                        feature.set('type', mergedOptions.layerName);
+                        feature.set('layerName', mergedOptions.layerName);
+                    }
+                    // 如果传入了自定义样式，直接使用
+                    if (mergedOptions.style) {
+                        if (typeof mergedOptions.style === 'function') {
+                            return mergedOptions.style(feature);
+                        }
+                        else {
+                            return mergedOptions.style;
+                        }
                     }
-                })
-                : new VectorSource({
-                    format: new GeoJSON(),
-                    loader: () => {
+                    return new Style({
+                        stroke: new Stroke({
+                            color: mergedOptions.strokeColor,
+                            width: mergedOptions.strokeWidth
+                        })
+                    });
+                },
+                zIndex: mergedOptions.zIndex
+            });
+            riverLayer.setVisible(false);
+            this.riverLayerList.push(riverLayer);
+            this.map.addLayer(riverLayer);
+        }
+        // 设置缩放事件监听
+        this.eventManager.on('moveend', () => {
+            this.showRiverLayerByZoom();
+        });
+        // 初始显示
+        this.showRiverLayerByZoom();
+    }
+    /**
+     * 从URL添加分级河流图层，根据缩放级别显示不同级别的河流
+     * @param url 河流数据URL
+     * @param options 河流图层配置选项
+     * @throws {Error} 当数据格式无效时抛出错误
+     */
+    addRiverLayersByZoomByUrl(url, options = {}) {
+        const defaultOptions = {
+            type: 'river',
+            levelCount: 5,
+            zoomOffset: 8,
+            strokeColor: 'rgb(0,113,255)',
+            strokeWidth: 3,
+            visible: true,
+            zIndex: 15,
+            layerName: 'riverLayer',
+            removeExisting: options.removeExisting ?? false,
+            levelWidthMap: this.defaultLevelWidthMap
+        };
+        const mergedOptions = { ...defaultOptions, ...options };
+        // 清除现有河流图层
+        if (mergedOptions.removeExisting) {
+            this.clearRiverLayers();
+        }
+        this.riverLayerShow = mergedOptions.visible;
+        this.riverLayerList = [];
+        // 创建分级河流图层
+        for (let level = 1; level <= mergedOptions.levelCount; level++) {
+            const vectorSource = new VectorSource({
+                url,
+                format: new GeoJSON(),
+                loader: function (extent, resolution, projection, success, failure) {
+                    fetch(url)
+                        .then(response => response.json())
+                        .then(data => {
                         const geojson = new GeoJSON();
-                        fyRiverJson.features.forEach((feature) => {
+                        data.features.forEach((feature) => {
                             if (feature.properties && feature.properties.level === level) {
                                 try {
                                     const olFeature = geojson.readFeature(feature);
@@ -179,8 +282,14 @@ export default class Line {
                                 }
                             }
                         });
-                    }
-                });
+                        success?.(vectorSource.getFeatures());
+                    })
+                        .catch(error => {
+                        console.error('Error loading river data:', error);
+                        failure?.();
+                    });
+                }
+            });
             const riverLayer = new VectorLayer({
                 properties: {
                     name: mergedOptions.layerName,
@@ -251,10 +360,64 @@ export default class Line {
         });
     }
     addRiverWidthByLevel(data, options = {}) {
-        const isUrl = typeof data === 'string';
-        if (!isUrl) {
-            ValidationUtils.validateGeoJSONData(data);
+        ValidationUtils.validateGeoJSONData(data);
+        // 合并默认配置
+        const mergedOptions = {
+            type: 'river',
+            layerName: 'river',
+            strokeColor: 'rgba(3, 122, 255, 1)',
+            strokeWidth: 2,
+            visible: true,
+            zIndex: 15,
+            levelWidthMap: this.defaultLevelWidthMap,
+            removeExisting: options.removeExisting ?? false,
+            ...options
+        };
+        // 移除同名图层（如果存在）
+        if (mergedOptions.removeExisting && mergedOptions.layerName) {
+            MapTools.removeLayer(this.map, mergedOptions.layerName);
         }
+        // 解析 GeoJSON 数据
+        const features = new GeoJSON().readFeatures(data, options.projectionOptOptions);
+        // 创建河流图层
+        const riverLayer = new VectorLayer({
+            properties: {
+                name: mergedOptions.layerName,
+                layerName: mergedOptions.layerName
+            },
+            source: new VectorSource({ features }),
+            style: (feature) => {
+                // 如果传入了自定义样式，直接使用
+                if (mergedOptions.style) {
+                    if (typeof mergedOptions.style === 'function') {
+                        return mergedOptions.style(feature);
+                    }
+                    else {
+                        return mergedOptions.style;
+                    }
+                }
+                const level = feature.get('level');
+                const levelWidth = mergedOptions.levelWidthMap[Number(level)] || 1;
+                return new Style({
+                    stroke: new Stroke({
+                        color: mergedOptions.strokeColor,
+                        width: levelWidth
+                    })
+                });
+            },
+            zIndex: mergedOptions.zIndex
+        });
+        riverLayer.setVisible(mergedOptions.visible);
+        this.map.addLayer(riverLayer);
+        return riverLayer;
+    }
+    /**
+     * 从URL添加按级别显示不同宽度的河流图层
+     * @param url 河流数据URL
+     * @param options 河流图层配置选项
+     * @returns 创建的河流图层
+     */
+    addRiverWidthByLevelByUrl(url, options = {}) {
         // 合并默认配置
         const mergedOptions = {
             type: 'river',
@@ -271,15 +434,10 @@ export default class Line {
         if (mergedOptions.removeExisting && mergedOptions.layerName) {
             MapTools.removeLayer(this.map, mergedOptions.layerName);
         }
-        // 根据数据类型创建 VectorSource
-        const source = isUrl
-            ? new VectorSource({
-                url: data,
-                format: new GeoJSON(options.projectionOptOptions)
-            })
-            : new VectorSource({
-                features: new GeoJSON().readFeatures(data, options.projectionOptOptions)
-            });
+        const source = new VectorSource({
+            url,
+            format: new GeoJSON(options.projectionOptOptions)
+        });
         // 创建河流图层
         const riverLayer = new VectorLayer({
             properties: {

package/core/Polygon.d.ts

@@ -25,7 +25,7 @@ export default class Polygon {
      */
     getLevColor(lev: string | number): string;
     /**
-     * 添加地图边框图层（使用GeoJSON数据）
+     * 添加地图边框图层
      * @param data 图层数据，必须是有效的 GeoJSON 格式
      * @param options 图层配置选项
      * @returns 创建的图层实例
@@ -33,15 +33,15 @@ export default class Polygon {
      */
     addBorderPolygon(data: MapJSONData, options?: PolygonOptions): VectorLayer<VectorSource>;
     /**
-     * 添加地图边框图层（从URL加载）
+     * 从URL添加地图边框图层
      * @param url 数据URL
      * @param options 图层配置选项
      * @returns 创建的图层实例
      * @throws 当数据格式无效时抛出错误
      */
-    addBorderPolygon(url: string, options?: PolygonOptions): VectorLayer<VectorSource>;
+    addBorderPolygonByUrl(url: string, options?: PolygonOptions): VectorLayer<VectorSource>;
     /**
-     * 添加多边形图层（使用GeoJSON数据）
+     * 添加多边形图层
      * @param dataJSON GeoJSON 数据
      * @param options 图层配置选项
      * @returns 创建的矢量图层
@@ -49,13 +49,13 @@ export default class Polygon {
      */
     addPolygon(dataJSON: MapJSONData, options?: PolygonOptions): VectorLayer<VectorSource>;
     /**
-     * 添加多边形图层（从URL加载）
+     * 从URL添加多边形图层
      * @param url 数据URL
      * @param options 图层配置选项
      * @returns 创建的矢量图层
      * @throws 当数据格式无效时抛出错误
      */
-    addPolygon(url: string, options?: PolygonOptions): VectorLayer<VectorSource>;
+    addPolygonByUrl(url: string, options?: PolygonOptions): VectorLayer<VectorSource>;
     /**
      * 设置要素样式
      * @param features 要素数组

package/core/Polygon.js

@@ -40,30 +40,50 @@ export default class Polygon {
         const key = lev.toString();
         return this.colorMap[key] || 'rgba(128, 128, 128, 0.6)';
     }
+    /**
+     * 添加地图边框图层
+     * @param data 图层数据，必须是有效的 GeoJSON 格式
+     * @param options 图层配置选项
+     * @returns 创建的图层实例
+     * @throws 当数据格式无效时抛出错误
+     */
     addBorderPolygon(data, options) {
-        const isUrl = typeof data === 'string';
-        if (!isUrl) {
-            ValidationUtils.validateGeoJSONData(data);
-        }
+        ValidationUtils.validateGeoJSONData(data);
         const mergedOptions = {
-            layerName: 'border',
             fillColor: 'rgba(255, 255, 255, 0)',
             ...options
         };
-        // 使用类型断言来调用重载方法
-        const layer = isUrl
-            ? this.addPolygon(data, mergedOptions)
-            : this.addPolygon(data, mergedOptions);
-        if (mergedOptions.mask && !isUrl) {
+        const layer = this.addPolygon(data, mergedOptions);
+        if (mergedOptions.mask) {
             this.setOutLayer(data);
         }
         return layer;
     }
+    /**
+     * 从URL添加地图边框图层
+     * @param url 数据URL
+     * @param options 图层配置选项
+     * @returns 创建的图层实例
+     * @throws 当数据格式无效时抛出错误
+     */
+    addBorderPolygonByUrl(url, options) {
+        const mergedOptions = {
+            layerName: 'border',
+            fillColor: 'rgba(255, 255, 255, 0)',
+            ...options
+        };
+        const layer = this.addPolygonByUrl(url, mergedOptions);
+        return layer;
+    }
+    /**
+     * 添加多边形图层
+     * @param dataJSON GeoJSON 数据
+     * @param options 图层配置选项
+     * @returns 创建的矢量图层
+     * @throws 当数据格式无效时抛出错误
+     */
     addPolygon(dataJSON, options) {
-        const isUrl = typeof dataJSON === 'string';
-        if (!isUrl) {
-            ValidationUtils.validateGeoJSONData(dataJSON);
-        }
+        ValidationUtils.validateGeoJSONData(dataJSON);
         const mergedOptions = {
             zIndex: 11,
             visible: true,
@@ -81,48 +101,75 @@ export default class Polygon {
             new MapTools(this.map).removeLayer(mergedOptions.layerName);
         }
         let features;
-        // 根据数据类型创建 VectorSource
-        const source = isUrl
-            ? new VectorSource({
-                url: dataJSON,
-                format: new GeoJSON(mergedOptions.projectionOptOptions ?? {})
-            })
-            : (() => {
-                try {
-                    features = new GeoJSON().readFeatures(dataJSON, mergedOptions.projectionOptOptions ?? {});
-                }
-                catch (error) {
-                    throw new Error(`Failed to parse GeoJSON data: ${error}`);
-                }
-                return new VectorSource({ features });
-            })();
+        try {
+            features = new GeoJSON().readFeatures(dataJSON, mergedOptions.projectionOptOptions ?? {});
+        }
+        catch (error) {
+            throw new Error(`Failed to parse GeoJSON data: ${error}`);
+        }
         const layer = new VectorLayer({
             properties: {
                 name: mergedOptions.layerName,
                 layerName: mergedOptions.layerName
             },
-            source,
+            source: new VectorSource({ features }),
             zIndex: mergedOptions.zIndex
         });
-        // 如果不是URL，设置要素样式
-        if (!isUrl) {
-            this.setFeatureStyles(features, mergedOptions);
-        }
-        else {
-            // 如果是URL，需要在数据加载后设置样式
-            source.once('featuresloadend', () => {
-                const loadedFeatures = source.getFeatures();
-                this.setFeatureStyles(loadedFeatures, mergedOptions);
-            });
-        }
+        // 设置要素样式
+        this.setFeatureStyles(features, mergedOptions);
         layer.setVisible(mergedOptions.visible);
         this.map.addLayer(layer);
         // 如果需要适应视图
-        if (mergedOptions.fitView && !isUrl) {
+        if (mergedOptions.fitView) {
             this.fitViewToLayer(layer);
         }
-        else if (mergedOptions.fitView && isUrl) {
-            // 如果是URL，需要在数据加载后适应视图
+        return layer;
+    }
+    /**
+     * 从URL添加多边形图层
+     * @param url 数据URL
+     * @param options 图层配置选项
+     * @returns 创建的矢量图层
+     * @throws 当数据格式无效时抛出错误
+     */
+    addPolygonByUrl(url, options) {
+        const mergedOptions = {
+            zIndex: 11,
+            visible: true,
+            strokeColor: '#EBEEF5',
+            strokeWidth: 2,
+            fillColor: 'rgba(255, 255, 255, 0)',
+            textFont: '14px Calibri,sans-serif',
+            textFillColor: '#FFF',
+            textStrokeColor: '#409EFF',
+            textStrokeWidth: 2,
+            ...options
+        };
+        // 如果指定了图层名称，先移除同名图层
+        if (mergedOptions.layerName) {
+            new MapTools(this.map).removeLayer(mergedOptions.layerName);
+        }
+        const source = new VectorSource({
+            url,
+            format: new GeoJSON(mergedOptions.projectionOptOptions ?? {})
+        });
+        const layer = new VectorLayer({
+            properties: {
+                name: mergedOptions.layerName,
+                layerName: mergedOptions.layerName
+            },
+            source,
+            zIndex: mergedOptions.zIndex
+        });
+        // 在数据加载后设置样式
+        source.once('featuresloadend', () => {
+            const loadedFeatures = source.getFeatures();
+            this.setFeatureStyles(loadedFeatures, mergedOptions);
+        });
+        layer.setVisible(mergedOptions.visible);
+        this.map.addLayer(layer);
+        // 如果需要适应视图
+        if (mergedOptions.fitView) {
             source.once('featuresloadend', () => {
                 this.fitViewToLayer(layer);
             });

package/core/SelectHandler.d.ts

@@ -0,0 +1,147 @@
+import Map from "ol/Map";
+import { FeatureLike } from "ol/Feature";
+import { Style } from "ol/style";
+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 图层名称（可选）
+     * @param selectStyle 选中样式（可选，仅作用于此次选择）
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    selectByIds(featureIds: string[], layerName?: string, selectStyle?: Style | Style[] | ((feature: FeatureLike) => Style | Style[])): this;
+    /**
+     * 通过属性选择要素
+     * @param propertyName 属性名称
+     * @param propertyValue 属性值
+     * @param layerName 图层名称（可选）
+     * @param selectStyle 选中样式（可选，仅作用于此次选择）
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    selectByProperty(propertyName: string, propertyValue: any, layerName?: string, selectStyle?: Style | Style[] | ((feature: FeatureLike) => Style | Style[])): 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;
+    /**
+     * 更新选择样式
+     * @param selectStyle 新的选择样式
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    updateSelectStyle(selectStyle: Style | Style[] | ((feature: FeatureLike) => Style | Style[])): this;
+    /**
+     * 附加事件监听器
+     * @private
+     */
+    private attachEventListeners;
+}

package/core/SelectHandler.js

@@ -0,0 +1,445 @@
+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();
+        // 默认启用点击选择模式，支持多选
+        this.enableSelect('click', { multi: true });
+    }
+    /**
+     * 启用要素选择
+     * @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 图层名称（可选）
+     * @param selectStyle 选中样式（可选，仅作用于此次选择）
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    selectByIds(featureIds, layerName, selectStyle) {
+        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) {
+                            // 如果传入了自定义样式，仅为该要素设置样式
+                            if (selectStyle) {
+                                if (typeof selectStyle === 'function') {
+                                    feature.setStyle(selectStyle(feature));
+                                }
+                                else {
+                                    feature.setStyle(selectStyle);
+                                }
+                            }
+                            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 图层名称（可选）
+     * @param selectStyle 选中样式（可选，仅作用于此次选择）
+     * @returns SelectHandler 实例（支持链式调用）
+     */
+    selectByProperty(propertyName, propertyValue, layerName, selectStyle) {
+        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) {
+                            // 如果传入了自定义样式，仅为该要素设置样式
+                            if (selectStyle) {
+                                if (typeof selectStyle === 'function') {
+                                    feature.setStyle(selectStyle(feature));
+                                }
+                                else {
+                                    feature.setStyle(selectStyle);
+                                }
+                            }
+                            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;
+            }
+        };
+    }
+    /**
+     * 更新选择样式
+     * @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
+     */
+    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/index.d.ts

@@ -7,6 +7,7 @@ export { default as MapBaseLayers } from './core/MapBaseLayers';
 export { default as MapTools } from './core/MapTools';
 export { default as MeasureHandler } from './core/MeasureHandler';
 export { default as VueTemplatePoint } from './core/VueTemplatePoint';
+export { default as SelectHandler } from './core/SelectHandler';
 export { ConfigManager } from './core/ConfigManager';
 export { EventManager } from './core/EventManager';
 export type { MapEventType, EventCallback, MapEventData } from './core/EventManager';
@@ -15,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 } 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';

package/index.js

@@ -8,6 +8,7 @@ export { default as MapBaseLayers } from './core/MapBaseLayers';
 export { default as MapTools } from './core/MapTools';
 export { default as MeasureHandler } from './core/MeasureHandler';
 export { default as VueTemplatePoint } from './core/VueTemplatePoint';
+export { default as SelectHandler } from './core/SelectHandler';
 // 新增工具类
 export { ConfigManager } from './core/ConfigManager';
 export { EventManager } from './core/EventManager';

package/package.json

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

package/types.d.ts

@@ -4,6 +4,7 @@ import { WMTS } from "ol/source";
 import View from "ol/View";
 import Feature, { FeatureLike } from "ol/Feature";
 import { Style } from "ol/style";
+import MapBrowserEvent from "ol/MapBrowserEvent";
 export interface FeatureData {
     type: string;
     properties: any;
@@ -302,4 +303,38 @@ export interface VueTemplatePointInstance {
     getOptions(): Readonly<VueTemplatePointOptions>;
     isDestroyed(): boolean;
 }
+/**
+ * 选择模式类型
+ */
+export type SelectMode = 'click' | 'hover' | 'box' | 'ctrl';
+/**
+ * 选择回调事件接口
+ */
+export interface SelectCallbackEvent {
+    /** 新选中的要素数组 */
+    selected: FeatureLike[];
+    /** 取消选中的要素数组 */
+    deselected: FeatureLike[];
+    /** 地图浏览器事件 */
+    mapBrowserEvent: MapBrowserEvent<any>;
+}
+/**
+ * 要素选择配置选项
+ */
+export interface SelectOptions {
+    /** 是否支持多选，默认 false */
+    multi?: boolean;
+    /** 图层过滤器，指定可选择的图层名称列表 */
+    layerFilter?: string[];
+    /** 要素过滤器函数 */
+    featureFilter?: (feature: FeatureLike) => boolean;
+    /** 点击容差（像素），默认为 0 */
+    hitTolerance?: number;
+    /** 选中要素的样式 */
+    selectStyle?: Style | Style[] | ((feature: FeatureLike) => Style | Style[]);
+    /** 选中要素时的回调函数 */
+    onSelect?: (event: SelectCallbackEvent) => void;
+    /** 取消选中要素时的回调函数 */
+    onDeselect?: (event: SelectCallbackEvent) => void;
+}
 export {};