my-openlayer 1.0.0 → 1.0.2

package/dist/core/ConfigManager.d.ts

@@ -66,31 +66,6 @@ export declare class ConfigManager {
         textStrokeColor: string;
         textStrokeWidth: number;
     };
-    /**
-     * 验证坐标是否有效
-     * @param longitude 经度
-     * @param latitude 纬度
-     * @returns 是否有效
-     */
-    static isValidCoordinate(longitude: number, latitude: number): boolean;
-    /**
-     * 验证颜色字符串是否有效
-     * @param color 颜色字符串
-     * @returns 是否有效
-     */
-    static isValidColor(color: string): boolean;
-    /**
-     * 验证图层名称是否有效
-     * @param layerName 图层名称
-     * @returns 是否有效
-     */
-    static isValidLayerName(layerName: string): boolean;
-    /**
-     * 验证范围是否有效
-     * @param extent 范围数组 [minX, minY, maxX, maxY]
-     * @returns 是否有效
-     */
-    static isValidExtent(extent: number[]): boolean;
     /**
      * 合并配置选项
      * @param defaultOptions 默认配置

package/dist/core/ConfigManager.js

@@ -3,58 +3,6 @@
  * 用于统一管理默认配置和验证
  */
 export class ConfigManager {
-    /**
-     * 验证坐标是否有效
-     * @param longitude 经度
-     * @param latitude 纬度
-     * @returns 是否有效
-     */
-    static isValidCoordinate(longitude, latitude) {
-        return (typeof longitude === 'number' &&
-            typeof latitude === 'number' &&
-            !isNaN(longitude) &&
-            !isNaN(latitude) &&
-            longitude >= -180 &&
-            longitude <= 180 &&
-            latitude >= -90 &&
-            latitude <= 90);
-    }
-    /**
-     * 验证颜色字符串是否有效
-     * @param color 颜色字符串
-     * @returns 是否有效
-     */
-    static isValidColor(color) {
-        if (!color || typeof color !== 'string') {
-            return false;
-        }
-        // 简单的颜色格式验证
-        const colorRegex = /^(#[0-9A-Fa-f]{3,8}|rgba?\([^)]+\)|[a-zA-Z]+)$/;
-        return colorRegex.test(color);
-    }
-    /**
-     * 验证图层名称是否有效
-     * @param layerName 图层名称
-     * @returns 是否有效
-     */
-    static isValidLayerName(layerName) {
-        return (typeof layerName === 'string' &&
-            layerName.length > 0 &&
-            layerName.trim().length > 0);
-    }
-    /**
-     * 验证范围是否有效
-     * @param extent 范围数组 [minX, minY, maxX, maxY]
-     * @returns 是否有效
-     */
-    static isValidExtent(extent) {
-        return (Array.isArray(extent) &&
-            extent.length === 4 &&
-            extent.every(coord => typeof coord === 'number' && !isNaN(coord)) &&
-            extent[0] < extent[2] && // minX < maxX
-            extent[1] < extent[3] // minY < maxY
-        );
-    }
     /**
      * 合并配置选项
      * @param defaultOptions 默认配置

package/dist/core/DomPoint.js

@@ -1,6 +1,7 @@
 import Overlay from 'ol/Overlay';
 import { DomPointState } from '../types';
 import { ErrorHandler, ErrorType } from '../utils/ErrorHandler';
+import { ValidationUtils } from '../utils/ValidationUtils';
 /**
  * DOM点位管理类
  * 用于在地图上添加和管理DOM元素覆盖物
@@ -50,28 +51,15 @@ export default class DomPoint {
      * @private
      */
     validateConstructorParams(map, options) {
-        if (!map) {
-            throw new Error('Map instance is required');
-        }
-        if (!options) {
-            throw new Error('Options are required');
-        }
+        ValidationUtils.validateRequired(map, 'Map instance is required');
+        ValidationUtils.validateRequired(options, 'Options are required');
         const { Vue, Template, longitude, latitude } = options;
-        if (!Vue || !Template) {
-            throw new Error('Vue and Template are required in options');
-        }
+        ValidationUtils.validateRequired(Vue, 'Vue is required in options');
+        ValidationUtils.validateRequired(Template, 'Template is required in options');
         if (typeof longitude !== 'number' || typeof latitude !== 'number') {
             throw new Error('Longitude and latitude must be numbers');
         }
-        if (isNaN(longitude) || isNaN(latitude)) {
-            throw new Error('Valid longitude and latitude are required');
-        }
-        if (longitude < -180 || longitude > 180) {
-            throw new Error('Longitude must be between -180 and 180');
-        }
-        if (latitude < -90 || latitude > 90) {
-            throw new Error('Latitude must be between -90 and 90');
-        }
+        ValidationUtils.validateCoordinate(longitude, latitude);
     }
     /**
      * 合并默认配置选项
@@ -181,9 +169,7 @@ export default class DomPoint {
         if (this.state === DomPointState.DESTROYED) {
             throw new Error('Cannot set visibility on destroyed DOM point');
         }
-        if (typeof visible !== 'boolean') {
-            throw new Error('Visible parameter must be a boolean');
-        }
+        ValidationUtils.validateType(visible, 'boolean', 'Visible parameter must be a boolean');
         try {
             this.dom.style.visibility = visible ? 'visible' : 'hidden';
             this.state = visible ? DomPointState.VISIBLE : DomPointState.HIDDEN;
@@ -210,12 +196,7 @@ export default class DomPoint {
         if (this.state === DomPointState.DESTROYED) {
             throw new Error('Cannot update position on destroyed DOM point');
         }
-        if (typeof longitude !== 'number' || typeof latitude !== 'number') {
-            throw new Error('Longitude and latitude must be numbers');
-        }
-        if (isNaN(longitude) || isNaN(latitude)) {
-            throw new Error('Valid longitude and latitude are required');
-        }
+        ValidationUtils.validateCoordinate(longitude, latitude);
         try {
             this.position = [longitude, latitude];
             this.anchor.setPosition(this.position);
@@ -278,9 +259,7 @@ export default class DomPoint {
         if (this.state === DomPointState.DESTROYED) {
             throw new Error('Cannot add class on destroyed DOM point');
         }
-        if (!className || typeof className !== 'string') {
-            throw new Error('Valid class name is required');
-        }
+        ValidationUtils.validateNonEmptyString(className, 'Valid class name is required');
         try {
             this.dom.classList.add(className);
         }
@@ -298,9 +277,7 @@ export default class DomPoint {
         if (this.state === DomPointState.DESTROYED) {
             throw new Error('Cannot remove class on destroyed DOM point');
         }
-        if (!className || typeof className !== 'string') {
-            throw new Error('Valid class name is required');
-        }
+        ValidationUtils.validateNonEmptyString(className, 'Valid class name is required');
         try {
             this.dom.classList.remove(className);
         }

package/dist/core/Line.d.ts

@@ -1,21 +1,52 @@
 import Map from "ol/Map";
 import VectorSource from "ol/source/Vector";
 import VectorLayer from "ol/layer/Vector";
-import { Style } from "ol/style";
 import { LineOptions, MapJSONData } from "../types";
+/**
+ * 河流级别宽度映射配置
+ */
+interface RiverLevelWidthMap {
+    [level: number]: number;
+}
+/**
+ * 河流图层配置选项
+ */
+interface RiverLayerOptions extends LineOptions {
+    /** 河流级别数量，默认为5 */
+    levelCount?: number;
+    /** 缩放级别偏移量，默认为8 */
+    zoomOffset?: number;
+    /** 河流级别宽度映射 */
+    levelWidthMap?: RiverLevelWidthMap;
+    /** 是否删除同名图层 */
+    removeExisting?: boolean;
+}
 /**
  * 线要素管理类
- * 用于在地图上添加和管理线要素
+ * 用于在地图上添加和管理线要素，包括普通线要素、河流图层等
+ *
+ * @example
+ * ```typescript
+ * const lineManager = new Line(map);
+ * const layer = lineManager.addLine(geoJsonData, {
+ *   type: 'road',
+ *   strokeColor: '#ff0000',
+ *   strokeWidth: 3
+ * });
+ * ```
  */
 export default class Line {
+    /** OpenLayers 地图实例 */
     private readonly map;
-    riverLayerList: any[];
-    riverLayerShow: boolean;
-    [propertyName: string]: any;
+    /** 河流图层列表 */
+    private riverLayerList;
+    /** 河流图层显示状态 */
+    private riverLayerShow;
+    /** 默认河流级别宽度映射 */
+    private readonly defaultLevelWidthMap;
     /**
      * 构造函数
      * @param map OpenLayers地图实例
-     * @throws 当地图实例无效时抛出错误
      */
     constructor(map: Map);
     /**
@@ -23,14 +54,54 @@ export default class Line {
      * @param data GeoJSON格式的线数据
      * @param options 配置项
      * @returns 创建的矢量图层
-     * @throws 当数据格式无效时抛出错误
      */
-    addLine(data: MapJSONData, options: LineOptions): VectorLayer<VectorSource>;
-    addRiverLayersByZoom(fyRiverJson: MapJSONData, options?: LineOptions): void;
+    addLine(data: MapJSONData, options?: LineOptions): VectorLayer<VectorSource>;
+    /**
+     * 添加分级河流图层，根据缩放级别显示不同级别的河流
+     * @param fyRiverJson 河流 GeoJSON 数据
+     * @param options 河流图层配置选项
+     * @throws {Error} 当数据格式无效时抛出错误
+     */
+    addRiverLayersByZoom(fyRiverJson: MapJSONData, options?: RiverLayerOptions): void;
+    /**
+     * 显示或隐藏河流图层
+     * @param show 是否显示河流图层
+     */
     showRiverLayer(show: boolean): void;
+    /**
+     * 根据缩放级别显示对应的河流图层
+     * 缩放级别越高，显示的河流级别越详细
+     */
     showRiverLayerByZoom(): void;
-    addRiverWidthByLev(arr?: any): void;
-    setFeatureAttr(feature: {
-        get: (arg0: string) => any;
-    }): Style;
+    /**
+     * 添加按级别显示不同宽度的河流图层
+     * @param data 河流 GeoJSON 数据
+     * @param options 河流图层配置选项
+     * @returns 创建的河流图层
+     */
+    addRiverWidthByLevel(data: MapJSONData, options?: RiverLayerOptions): VectorLayer<VectorSource>;
+    /**
+     * 移除线图层
+     * @param layerName 图层名称
+     */
+    removeLineLayer(layerName: string): void;
+    /**
+     * 清除所有河流图层
+     */
+    clearRiverLayers(): void;
+    /**
+     * 获取河流图层显示状态
+     * @returns 河流图层是否显示
+     */
+    getRiverLayerVisibility(): boolean;
+    /**
+     * 获取河流图层列表
+     * @returns 河流图层数组的副本
+     */
+    getRiverLayers(): VectorLayer<VectorSource>[];
+    /**
+     * 销毁线管理器，清理所有资源
+     */
+    destroy(): void;
 }
+export {};

package/dist/core/Line.js

@@ -2,23 +2,42 @@ import VectorSource from "ol/source/Vector";
 import GeoJSON from "ol/format/GeoJSON";
 import VectorLayer from "ol/layer/Vector";
 import { Stroke, Style } from "ol/style";
+import { Feature } from "ol";
 import MapTools from "./MapTools";
+import { ValidationUtils } from "../utils/ValidationUtils";
 /**
  * 线要素管理类
- * 用于在地图上添加和管理线要素
+ * 用于在地图上添加和管理线要素，包括普通线要素、河流图层等
+ *
+ * @example
+ * ```typescript
+ * const lineManager = new Line(map);
+ * const layer = lineManager.addLine(geoJsonData, {
+ *   type: 'road',
+ *   strokeColor: '#ff0000',
+ *   strokeWidth: 3
+ * });
+ * ```
  */
 export default class Line {
     /**
      * 构造函数
      * @param map OpenLayers地图实例
-     * @throws 当地图实例无效时抛出错误
      */
     constructor(map) {
+        /** 河流图层列表 */
         this.riverLayerList = [];
+        /** 河流图层显示状态 */
         this.riverLayerShow = false;
-        if (!map) {
-            throw new Error('Map instance is required');
-        }
+        /** 默认河流级别宽度映射 */
+        this.defaultLevelWidthMap = {
+            1: 2,
+            2: 1,
+            3: 0.5,
+            4: 0.5,
+            5: 0.5
+        };
+        ValidationUtils.validateMapInstance(map);
         this.map = map;
     }
     /**
@@ -26,104 +45,144 @@ export default class Line {
      * @param data GeoJSON格式的线数据
      * @param options 配置项
      * @returns 创建的矢量图层
-     * @throws 当数据格式无效时抛出错误
      */
-    addLine(data, options) {
-        if (!data) {
-            throw new Error('Line data is required');
-        }
-        if (!options || !options.type) {
-            throw new Error('Options with type is required');
-        }
-        let features;
-        try {
-            features = new GeoJSON().readFeatures(data);
-        }
-        catch (error) {
-            throw new Error(`Invalid GeoJSON data: ${error}`);
-        }
-        if (!features || features.length === 0) {
-            console.warn('No features found in line data');
-        }
+    addLine(data, options = {}) {
+        ValidationUtils.validateGeoJSONData(data);
+        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 features = new GeoJSON().readFeatures(data, options.projectionOptOptions);
         const layer = new VectorLayer({
-            name: options.layerName,
-            layerName: options.layerName,
-            source: new VectorSource({
-                features: features
-            }),
-            style: function (feature) {
-                feature.set('type', options.type);
-                feature.set('layerName', options.type);
+            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);
+                }
                 return new Style({
                     stroke: new Stroke({
-                        color: options.strokeColor || 'rgba(3, 122, 255, 1)',
-                        width: options.strokeWidth || 2,
-                        lineDash: options?.lineDash,
-                        lineDashOffset: options?.lineDashOffset
-                    }),
+                        color: mergedOptions.strokeColor,
+                        width: mergedOptions.strokeWidth,
+                        lineDash: mergedOptions.lineDash,
+                        lineDashOffset: mergedOptions.lineDashOffset
+                    })
                 });
             },
-            zIndex: options.zIndex ?? 15,
+            zIndex: mergedOptions.zIndex
         });
-        layer.setVisible(options.visible === undefined ? true : options.visible);
-        this[options.type + 'Layer'] = layer;
+        layer.setVisible(mergedOptions.visible);
         this.map.addLayer(layer);
         return layer;
     }
-    // 添加水系并按照zoom显示不同级别
-    addRiverLayersByZoom(fyRiverJson, options = { type: 'river' }) {
-        this.riverLayerShow = !!options.visible;
+    /**
+     * 添加分级河流图层，根据缩放级别显示不同级别的河流
+     * @param fyRiverJson 河流 GeoJSON 数据
+     * @param options 河流图层配置选项
+     * @throws {Error} 当数据格式无效时抛出错误
+     */
+    addRiverLayersByZoom(fyRiverJson, options = {}) {
+        ValidationUtils.validateGeoJSONData(fyRiverJson);
+        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 i = 1; i <= 5; i++) {
+        // 创建分级河流图层
+        for (let level = 1; level <= mergedOptions.levelCount; level++) {
             const vectorSource = new VectorSource({
                 format: new GeoJSON(),
-                loader: function () {
+                loader: () => {
                     const geojson = new GeoJSON();
                     fyRiverJson.features.forEach((feature) => {
-                        if (feature.properties.level === i) {
-                            const olFeature = geojson.readFeature(feature);
-                            vectorSource.addFeature(olFeature);
+                        if (feature.properties && feature.properties.level === level) {
+                            try {
+                                const olFeature = geojson.readFeature(feature);
+                                vectorSource.addFeature(olFeature);
+                            }
+                            catch (error) {
+                                console.warn(`Failed to load river feature at level ${level}:`, error);
+                            }
                         }
                     });
-                },
-                // 其他配置
+                }
             });
             const riverLayer = new VectorLayer({
-                name: 'river',
-                layerName: 'river',
+                properties: {
+                    name: mergedOptions.layerName,
+                    layerName: mergedOptions.layerName,
+                    riverLevel: level
+                },
                 source: vectorSource,
-                style: function (feature) {
-                    feature.set('type', options.layerName);
-                    feature.set('layerName', options.layerName);
+                style: (feature) => {
+                    if (feature instanceof Feature) {
+                        feature.set('type', mergedOptions.layerName);
+                        feature.set('layerName', mergedOptions.layerName);
+                    }
                     return new Style({
                         stroke: new Stroke({
-                            color: options.strokeColor || 'rgb(0,113,255)',
-                            width: options.strokeWidth || 3
+                            color: mergedOptions.strokeColor,
+                            width: mergedOptions.strokeWidth
                         })
                     });
                 },
-                zIndex: options.zIndex ?? 15
+                zIndex: mergedOptions.zIndex
             });
             riverLayer.setVisible(false);
             this.riverLayerList.push(riverLayer);
             this.map.addLayer(riverLayer);
         }
-        this.showRiverLayerByZoom();
+        // 设置缩放事件监听
         MapTools.mapOnEvent(this.map, 'moveend', () => {
             this.showRiverLayerByZoom();
         });
+        // 初始显示
+        this.showRiverLayerByZoom();
     }
+    /**
+     * 显示或隐藏河流图层
+     * @param show 是否显示河流图层
+     */
     showRiverLayer(show) {
         this.riverLayerShow = show;
-        this.riverNamePointLayer.setVisible(show);
         this.showRiverLayerByZoom();
     }
-    //分级根据zoom显示河流
+    /**
+     * 根据缩放级别显示对应的河流图层
+     * 缩放级别越高，显示的河流级别越详细
+     */
     showRiverLayerByZoom() {
         const zoom = this.map.getView().getZoom();
+        if (!zoom) {
+            return;
+        }
         this.riverLayerList.forEach((layer, index) => {
-            // 一共分5级，加1因为level从1开始
-            if (zoom && zoom > index + 1 + 8) {
+            // 计算显示阈值：级别索引 + 1（因为level从1开始）+ 缩放偏移量（默认8）
+            const displayThreshold = index + 1 + 8;
+            if (zoom > displayThreshold) {
                 layer.setVisible(this.riverLayerShow);
             }
             else {
@@ -131,27 +190,92 @@ export default class Line {
             }
         });
     }
-    // 添加全部级别河流根据级别显示不同宽度
-    addRiverWidthByLev(arr = {}) {
-        const riverLayer = new VectorLayer({
-            name: 'river',
+    /**
+     * 添加按级别显示不同宽度的河流图层
+     * @param data 河流 GeoJSON 数据
+     * @param options 河流图层配置选项
+     * @returns 创建的河流图层
+     */
+    addRiverWidthByLevel(data, options = {}) {
+        ValidationUtils.validateGeoJSONData(data);
+        // 合并默认配置
+        const mergedOptions = {
+            type: 'river',
             layerName: 'river',
-            source: new VectorSource({
-                features: (new GeoJSON()).readFeatures(arr)
-            }),
-            style: (feature) => this.setFeatureAttr(feature),
-            zIndex: 15
+            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) => {
+                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;
     }
-    setFeatureAttr(feature) {
-        const level = feature.get('level');
-        const levelWidth = { 1: 2, 2: 1, 3: 0.5, 4: 0.5, 5: 0.5 };
-        return new Style({
-            stroke: new Stroke({
-                color: 'rgba(3, 122, 255, 1)',
-                width: levelWidth[Number(level)]
-            }),
+    /**
+     * 移除线图层
+     * @param layerName 图层名称
+     */
+    removeLineLayer(layerName) {
+        ValidationUtils.validateLayerName(layerName);
+        MapTools.removeLayer(this.map, layerName);
+    }
+    /**
+     * 清除所有河流图层
+     */
+    clearRiverLayers() {
+        this.riverLayerList.forEach(layer => {
+            this.map.removeLayer(layer);
         });
+        this.riverLayerList = [];
+        this.riverLayerShow = false;
+    }
+    /**
+     * 获取河流图层显示状态
+     * @returns 河流图层是否显示
+     */
+    getRiverLayerVisibility() {
+        return this.riverLayerShow;
+    }
+    /**
+     * 获取河流图层列表
+     * @returns 河流图层数组的副本
+     */
+    getRiverLayers() {
+        return [...this.riverLayerList];
+    }
+    /**
+     * 销毁线管理器，清理所有资源
+     */
+    destroy() {
+        // 清除所有河流图层
+        this.clearRiverLayers();
     }
 }