my-openlayer 0.1.18 → 1.0.1

package/dist/core/Point.d.ts

@@ -1,10 +1,48 @@
 import Map from "ol/Map";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
-import { MapJSONData, OptionsType, PointData } from '../types';
+import { MapJSONData, PointOptions, ClusterOptions, PointData } from '../types';
 export default class Point {
     private map;
     constructor(map: Map);
+    /**
+     * 创建文本样式
+     * @private
+     * @param options 选项
+     * @param text 文本内容
+     * @returns 文本样式
+     */
+    private createTextStyle;
+    /**
+     * 创建图标样式
+     * @private
+     * @param options 选项
+     * @returns 图标样式
+     */
+    private createIconStyle;
+    /**
+     * 创建点样式
+     * @private
+     * @param options 选项
+     * @param item 数据项
+     * @returns 样式对象
+     */
+    private createPointStyle;
+    /**
+     * 创建集群样式
+     * @private
+     * @param options 选项
+     * @param name 名称
+     * @returns 样式对象
+     */
+    private createClusterStyle;
+    /**
+     * 配置图层属性
+     * @private
+     * @param layer 图层
+     * @param options 选项
+     */
+    private configureLayer;
     /**
      *
      * @param pointData
@@ -15,8 +53,8 @@ export default class Point {
      *   hasImg: Boolean 是否显示图标
      * }
      */
-    addPoint(pointData: PointData[], options: OptionsType): VectorLayer<VectorSource<import("ol/geom").Geometry>>;
-    addClusterPoint(pointData: PointData[], options: OptionsType): void;
+    addPoint(pointData: PointData[], options: PointOptions): VectorLayer<VectorSource> | null;
+    addClusterPoint(pointData: PointData[], options: ClusterOptions): VectorLayer<VectorSource> | null;
     setTwinkleLayerFromPolygon(twinkleList: any[], className: string, key: string, json: MapJSONData): void;
     /**
      * 设置闪烁点
@@ -33,11 +71,19 @@ export default class Point {
      * @param zoom 缩放级别
      * @param duration 动画时长
      */
-    locationAction(lgtd: number, lttd: number, zoom?: number, duration?: number): false | undefined;
+    locationAction(lgtd: number, lttd: number, zoom?: number, duration?: number): boolean;
     /**
      * 设置dom元素为点位
      */
-    setDomPoint(id: string, lgtd: number, lttd: number): void;
+    setDomPoint(id: string, lgtd: number, lttd: number): boolean;
+    /**
+     * 设置vue组件为点位
+     * @param pointInfoList 点位信息列表
+     * @param template vue组件模板
+     * @param Vue Vue实例
+     * @returns 返回控制对象，包含显示、隐藏、移除方法
+     * @throws 当参数无效时抛出错误
+     */
     setDomPointVue(pointInfoList: any[], template: any, Vue: any): {
         setVisible: (visible: boolean) => void;
         remove: () => void;

package/dist/core/Point.js

@@ -3,18 +3,99 @@ import Overlay from 'ol/Overlay';
 import Feature from "ol/Feature";
 import { Point as olPoint } from "ol/geom";
 import { Text, Style, Fill, Stroke, Icon } from "ol/style";
-// import {Style, Icon, Text} from "ol/style";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
 import { Cluster } from 'ol/source';
-import * as turf from 'turf';
+import * as turf from '@turf/turf';
 import GeoJSON from "ol/format/GeoJSON";
-import DomPoint from "./DomPoint";
+import DomPoint from './DomPoint';
 import MapTools from "./MapTools";
+import { ValidationUtils } from '../utils/ValidationUtils';
 export default class Point {
     constructor(map) {
         this.map = map;
     }
+    /**
+     * 创建文本样式
+     * @private
+     * @param options 选项
+     * @param text 文本内容
+     * @returns 文本样式
+     */
+    createTextStyle(options, text) {
+        return new Text({
+            text: text,
+            font: options.textFont || '12px Calibri,sans-serif',
+            fill: new Fill({
+                color: options.textFillColor || '#FFF'
+            }),
+            stroke: new Stroke({
+                color: options.textStrokeColor || '#000',
+                width: options.textStrokeWidth || 3
+            }),
+            offsetY: options.textOffsetY || 20,
+        });
+    }
+    /**
+     * 创建图标样式
+     * @private
+     * @param options 选项
+     * @returns 图标样式
+     */
+    createIconStyle(options) {
+        const iconOptions = {
+            src: options.img,
+            scale: options.scale ?? 1,
+        };
+        if (options.iconColor) {
+            iconOptions.color = options.iconColor;
+        }
+        return new Icon(iconOptions);
+    }
+    /**
+     * 创建点样式
+     * @private
+     * @param options 选项
+     * @param item 数据项
+     * @returns 样式对象
+     */
+    createPointStyle(options, item) {
+        const style = {};
+        if (options.nameKey && item) {
+            style.text = this.createTextStyle(options, item[options.nameKey]);
+        }
+        if (options.hasImg || options.hasImg === undefined) {
+            style.image = this.createIconStyle(options);
+        }
+        return new Style(style);
+    }
+    /**
+     * 创建集群样式
+     * @private
+     * @param options 选项
+     * @param name 名称
+     * @returns 样式对象
+     */
+    createClusterStyle(options, name) {
+        const style = {};
+        if (options.nameKey) {
+            style.text = this.createTextStyle(options, name);
+        }
+        if (options.hasImg || options.hasImg === undefined) {
+            style.image = this.createIconStyle(options);
+        }
+        return new Style(style);
+    }
+    /**
+     * 配置图层属性
+     * @private
+     * @param layer 图层
+     * @param options 选项
+     */
+    configureLayer(layer, options) {
+        layer.setVisible(options.visible === undefined ? true : options.visible);
+        this.map.addLayer(layer);
+    }
     /**
      *
      * @param pointData
@@ -26,41 +107,20 @@ export default class Point {
      * }
      */
     addPoint(pointData, options) {
+        if (!ValidationUtils.validatePointData(pointData)) {
+            return null;
+        }
         const pointFeatureList = [];
         pointData.forEach((item) => {
+            if (!ValidationUtils.validateCoordinates(item)) {
+                return;
+            }
             const pointFeature = new Feature({
-                // clickLocation: options.clickLocation,
-                // all: JSON.stringify(item),
-                rawData: item, //保存原始数据
+                rawData: item,
                 type: options.layerName,
                 geometry: new olPoint([item.lgtd, item.lttd])
             });
-            const style = {};
-            if (options.nameKey) {
-                style.text = new Text({
-                    text: item[options.nameKey],
-                    font: options.textFont || '12px Calibri,sans-serif',
-                    fill: new Fill({
-                        color: options.textFillColor || '#FFF'
-                    }),
-                    stroke: new Stroke({
-                        color: options.textStrokeColor || '#000',
-                        width: options.textStrokeWidth || 3
-                    }),
-                    offsetY: options.textOffsetY || 20,
-                });
-            }
-            if (options.hasImg || options.hasImg === undefined) {
-                const iconOptions = {
-                    src: options.img,
-                    scale: options.scale ?? 1,
-                };
-                if (options.iconColor) {
-                    iconOptions.color = options.iconColor;
-                }
-                style.image = new Icon(iconOptions);
-            }
-            pointFeature.setStyle(new Style(style));
+            pointFeature.setStyle(this.createPointStyle(options, item));
             pointFeatureList.push(pointFeature);
         });
         const PointVectorLayer = new VectorLayer({
@@ -70,13 +130,18 @@ export default class Point {
             }),
             zIndex: options.zIndex || 21,
         });
-        PointVectorLayer.setVisible(options.visible === undefined ? true : options.visible);
-        this.map.addLayer(PointVectorLayer);
+        this.configureLayer(PointVectorLayer, options);
         return PointVectorLayer;
     }
     addClusterPoint(pointData, options) {
+        if (!ValidationUtils.validatePointData(pointData)) {
+            return null;
+        }
         const pointFeatureList = [];
         pointData.forEach(item => {
+            if (!ValidationUtils.validateCoordinates(item)) {
+                return;
+            }
             const pointFeature = new Feature({
                 geometry: new olPoint([item.lgtd, item.lttd]),
                 name: options.nameKey ? item[options.nameKey] : '',
@@ -87,45 +152,21 @@ export default class Point {
             features: pointFeatureList,
         });
         const clusterSource = new Cluster({
-            distance: 40, // The distance for clustering in pixels
+            distance: options.distance || 40, // The distance for clustering in pixels
+            minDistance: options.minDistance || 0,
             source: source,
         });
         const clusterLayer = new VectorLayer({
             layerName: options.layerName,
             source: clusterSource,
-            style: function (feature) {
+            style: (feature) => {
                 const name = feature.get('features')[0].get(options.nameKey);
-                const style = {};
-                if (options.nameKey) {
-                    style.text = new Text({
-                        text: name,
-                        font: options.textFont || '12px Calibri,sans-serif',
-                        fill: new Fill({
-                            color: options.textFillColor || '#FFF'
-                        }),
-                        stroke: new Stroke({
-                            color: options.textStrokeColor || '#000',
-                            width: options.textStrokeWidth || 3
-                        }),
-                        offsetY: options.textOffsetY || 20,
-                    });
-                }
-                if (options.hasImg || options.hasImg === undefined) {
-                    const iconOptions = {
-                        src: options.img,
-                        scale: options.scale ?? 1,
-                    };
-                    if (options.iconColor) {
-                        iconOptions.color = options.iconColor;
-                    }
-                    style.image = new Icon(iconOptions);
-                }
-                return new Style(style);
+                return this.createClusterStyle(options, name);
             },
             zIndex: options.zIndex || 21,
         });
-        clusterLayer.setVisible(options.visible === undefined ? true : options.visible);
-        this.map.addLayer(clusterLayer);
+        this.configureLayer(clusterLayer, options);
+        return clusterLayer;
     }
     // 在流域中心添加闪烁点位
     setTwinkleLayerFromPolygon(twinkleList, className, key, json) {
@@ -233,58 +274,101 @@ export default class Point {
      * @param duration 动画时长
      */
     locationAction(lgtd, lttd, zoom = 20, duration = 3000) {
-        if (!(lgtd && lttd)) {
-            console.error('[地图定位]', '经纬度不能为空');
+        if (!ValidationUtils.validateLngLat(lgtd, lttd)) {
+            return false;
+        }
+        try {
+            this.map.getView().animate({ center: [lgtd, lttd], zoom, duration });
+            return true;
+        }
+        catch (error) {
+            console.error('[地图定位]', '定位失败:', error);
             return false;
         }
-        this.map.getView().animate({ center: [lgtd, lttd], zoom, duration });
     }
     /**
      * 设置dom元素为点位
      */
     setDomPoint(id, lgtd, lttd) {
+        if (!id) {
+            console.error('Element ID is required');
+            return false;
+        }
+        if (!ValidationUtils.validateLngLat(lgtd, lttd)) {
+            return false;
+        }
         const el = document.getElementById(id);
-        if (el) {
+        if (!el) {
+            console.error(`Element with id '${id}' not found`);
+            return false;
+        }
+        try {
             const anchor = new Overlay({
                 id: id,
                 element: el,
                 positioning: 'center-center',
                 stopEvent: false
-                // autoPan: true,
-                // autoPanAnimation: {
-                //   duration: 250
-                // },
             });
             anchor.setPosition([lgtd, lttd]);
             this.map.addOverlay(anchor);
+            return true;
+        }
+        catch (error) {
+            console.error('Failed to set DOM point:', error);
+            return false;
         }
     }
+    /**
+     * 设置vue组件为点位
+     * @param pointInfoList 点位信息列表
+     * @param template vue组件模板
+     * @param Vue Vue实例
+     * @returns 返回控制对象，包含显示、隐藏、移除方法
+     * @throws 当参数无效时抛出错误
+     */
     setDomPointVue(pointInfoList, template, Vue) {
-        const layer = pointInfoList.map((pointInfo) => {
-            return new DomPoint(this.map, {
-                Vue,
-                Template: template,
-                lgtd: pointInfo.lgtd,
-                lttd: pointInfo.lttd,
-                props: {
-                    stationInfo: {
-                        type: Object,
-                        default: pointInfo
-                    }
-                },
-            });
-        });
-        return {
-            setVisible: (visible) => {
-                layer.forEach((item) => {
-                    item.setVisible(visible);
-                });
-            },
-            remove: () => {
-                layer.forEach((item) => {
-                    item.remove();
+        if (!pointInfoList || !Array.isArray(pointInfoList) || pointInfoList.length === 0) {
+            throw new Error('Valid point info list is required');
+        }
+        if (!template) {
+            throw new Error('Vue template is required');
+        }
+        if (!Vue) {
+            throw new Error('Vue instance is required');
+        }
+        try {
+            const layer = pointInfoList.map((pointInfo) => {
+                if (!ValidationUtils.validateLngLat(pointInfo.lgtd, pointInfo.lttd)) {
+                    throw new Error('Valid longitude and latitude are required for each point');
+                }
+                return new DomPoint(this.map, {
+                    Vue,
+                    Template: template,
+                    lgtd: pointInfo.lgtd,
+                    lttd: pointInfo.lttd,
+                    props: {
+                        stationInfo: {
+                            type: Object,
+                            default: pointInfo
+                        }
+                    },
                 });
-            }
-        };
+            });
+            return {
+                setVisible: (visible) => {
+                    layer.forEach((item) => {
+                        item.setVisible(visible);
+                    });
+                },
+                remove: () => {
+                    layer.forEach((item) => {
+                        item.remove();
+                    });
+                }
+            };
+        }
+        catch (error) {
+            throw new Error(`Failed to create DOM points: ${error}`);
+        }
     }
 }

package/dist/core/Polygon.d.ts

@@ -1,39 +1,78 @@
 import Map from "ol/Map";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
-import { Image as ImageLayer } from "ol/layer";
-import { Geometry } from "ol/geom";
-import { OptionsType, MapJSONData, PointData, HeatMapOptions } from '../types';
+import { Image as ImageLayer, Heatmap } from "ol/layer";
+import { PolygonOptions, MapJSONData, PointData, HeatMapOptions, ImageLayerData, MaskLayerOptions, FeatureColorUpdateOptions } from '../types';
+/**
+ * Polygon 类用于处理地图上的面要素操作
+ * 包括添加多边形、边框、图片图层、热力图等功能
+ */
 export default class Polygon {
-    map: Map;
+    private map;
     private colorMap;
     [key: string]: any;
+    /**
+     * 构造函数
+     * @param map OpenLayers 地图实例
+     */
     constructor(map: Map);
     /**
      * 获取等级颜色
-     * @param lev
+     * @param lev 等级值，支持字符串或数字
+     * @returns 对应等级的颜色值，如果等级不存在则返回默认颜色
      */
     getLevColor(lev: string | number): string;
     /**
-     * 添加 地图 边框 图层
-     * @param data 图层数据
-     * @param options 图层配置
+     * 添加地图边框图层
+     * @param data 图层数据，必须是有效的 GeoJSON 格式
+     * @param options 图层配置选项
+     * @returns 创建的图层实例
+     * @throws 当数据格式无效时抛出错误
+     */
+    addBorderPolygon(data: MapJSONData, options?: PolygonOptions): VectorLayer<VectorSource>;
+    /**
+     * 添加多边形图层
+     * @param dataJSON GeoJSON 数据
+     * @param options 图层配置选项
+     * @returns 创建的矢量图层
+     * @throws 当数据格式无效时抛出错误
+     */
+    addPolygon(dataJSON: MapJSONData, options?: PolygonOptions): VectorLayer<VectorSource>;
+    /**
+     * 设置要素样式
+     * @param features 要素数组
+     * @param options 样式配置选项
+     */
+    private setFeatureStyles;
+    /**
+     * 获取要素文本
+     * @param feature 要素对象
+     * @param options 配置选项
+     * @returns 文本内容
+     */
+    private getFeatureText;
+    /**
+     * 适应图层视图
+     * @param layer 图层对象
      */
-    addBorderPolygon(data: MapJSONData, options?: OptionsType): void;
-    addPolygon(dataJSON: MapJSONData, options?: OptionsType): VectorLayer<VectorSource<Geometry>>;
+    private fitViewToLayer;
     /**
      * 根据数据数组更新某个面颜色
      * @param layerName 图层名称
-     * @param colorObj 数据 不传或者传{}则重置所有颜色
-     *   colorObj:{
-     *     对应geojson文件中的索引字段[propName]: 'rgba(255, 0, 0, 0.6)', // 颜色
-     *     ...
-     *   }
+     * @param colorObj 颜色映射对象，键为要素属性值，值为颜色字符串
      * @param options 配置项
+     * @throws 当图层不存在时抛出错误
      */
     updateFeatureColor(layerName: string, colorObj?: {
         [propName: string]: string;
-    }, options?: OptionsType): void;
+    }, options?: FeatureColorUpdateOptions): void;
+    /**
+     * 更新单个要素的颜色
+     * @param feature 要素对象
+     * @param colorObj 颜色映射对象
+     * @param options 配置选项
+     */
+    private updateSingleFeatureColor;
     /**
      * 设置外围蒙版图层
      *
@@ -51,12 +90,25 @@ export default class Polygon {
     }): void;
     /**
      * 添加图片图层
-     * @param layerName 图层名称
-     * @param img 图片地址
-     * @param extent 图片范围（对角线坐标） [minx, miny, maxx, maxy]
-     * @param options 图层配置
+     * @param imageData 图片数据，包含url和extent
+     * @param options 配置项
+     * @returns 创建的图片图层
+     * @throws 当数据格式无效时抛出错误
+     */
+    addImageLayer(imageData: ImageLayerData, options?: PolygonOptions): ImageLayer<any>;
+    /**
+     * 添加热力图图层
+     * @param pointData 点数据数组
+     * @param options 热力图配置
+     */
+    addHeatmap(pointData: PointData[], options?: HeatMapOptions): Heatmap;
+    /**
+     * 添加遮罩图层
+     * @param data GeoJSON格式的遮罩数据
+     * @param options 配置项
+     * @returns 创建的遮罩图层
+     * @throws 当数据格式无效时抛出错误
      */
-    addImage(layerName: string, img?: string, extent?: number[], options?: OptionsType): import("ol/layer/Base").default | VectorLayer<VectorSource<Geometry>> | ImageLayer<import("ol/source").Image>;
-    addHeatmap(layerName: string, pointData: PointData[], options: HeatMapOptions): void;
+    addMaskLayer(data: any, options?: MaskLayerOptions): VectorLayer<VectorSource>;
     removePolygonLayer(layerName: string): void;
 }