my-openlayer 0.1.18 → 1.0.1

package/dist/core/DomPoint.js

@@ -1,36 +1,388 @@
-// import { createApp } from "vue";
-import Overlay from "ol/Overlay";
+import Overlay from 'ol/Overlay';
+import { DomPointState } from '../types';
+import { ErrorHandler, ErrorType } from '../utils/ErrorHandler';
+import { ValidationUtils } from '../utils/ValidationUtils';
+/**
+ * DOM点位管理类
+ * 用于在地图上添加和管理DOM元素覆盖物
+ */
 export default class DomPoint {
+    /**
+     * 构造函数
+     * @param map OpenLayers地图实例
+     * @param options 配置选项
+     * @throws 当参数无效时抛出错误
+     */
     constructor(map, options) {
-        this.map = map;
-        const { Vue, Template, lgtd, lttd, props, } = options;
-        this.dom = document.createElement('div');
-        this.map.getViewport().appendChild(this.dom);
-        if (Vue.version.startsWith('3')) {
-            this.app = Vue.createApp(Object.assign(Template, {
-                props: { ...props }
-            }));
-            this.app.mount(this.dom);
-        }
-        else {
-            this.app = new Vue({
-                el: this.dom,
-                render: (h) => h(Template, { props })
-            });
-        }
-        this.anchor = new Overlay({
-            element: this.dom,
+        this.app = null;
+        this.state = DomPointState.CREATED;
+        this.errorHandler = ErrorHandler.getInstance();
+        try {
+            // 参数验证
+            this.validateConstructorParams(map, options);
+            this.map = map;
+            this.options = this.mergeDefaultOptions(options);
+            this.id = this.generateUniqueId();
+            this.position = [
+                this.options.longitude ?? this.options.lgtd,
+                this.options.latitude ?? this.options.lttd
+            ];
+            // 创建DOM元素
+            this.dom = this.createDomElement();
+            // 创建Vue应用实例
+            this.createVueApp();
+            // 创建覆盖层
+            this.anchor = this.createOverlay();
+            // 添加到地图
+            this.map.addOverlay(this.anchor);
+            // 设置初始状态
+            this.state = DomPointState.MOUNTED;
+            this.setVisible(this.options.visible ?? true);
+        }
+        catch (error) {
+            this.handleError('Failed to create DOM point', error, { map, options });
+            throw error;
+        }
+    }
+    /**
+     * 验证构造函数参数
+     * @param map 地图实例
+     * @param options 配置选项
+     * @private
+     */
+    validateConstructorParams(map, options) {
+        ValidationUtils.validateRequired(map, 'Map instance is required');
+        ValidationUtils.validateRequired(options, 'Options are required');
+        const { Vue, Template, longitude, latitude } = 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');
+        }
+        ValidationUtils.validateCoordinate(longitude, latitude);
+    }
+    /**
+     * 合并默认配置选项
+     * @param options 用户配置选项
+     * @returns 合并后的配置选项
+     * @private
+     */
+    mergeDefaultOptions(options) {
+        return {
             positioning: 'center-center',
-            stopEvent: false
+            stopEvent: false,
+            visible: true,
+            zIndex: 1,
+            ...options
+        };
+    }
+    /**
+     * 生成唯一ID
+     * @returns 唯一标识符
+     * @private
+     */
+    generateUniqueId() {
+        return `dom-point-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    /**
+     * 创建DOM元素
+     * @returns DOM元素
+     * @private
+     */
+    createDomElement() {
+        const element = document.createElement('div');
+        element.id = this.id;
+        if (this.options.className) {
+            element.className = this.options.className;
+        }
+        if (this.options.zIndex) {
+            element.style.zIndex = this.options.zIndex.toString();
+        }
+        return element;
+    }
+    /**
+     * 创建Vue应用实例
+     * @private
+     */
+    createVueApp() {
+        const { Vue, Template, props } = this.options;
+        try {
+            if (this.isVue3(Vue)) {
+                // Vue 3
+                this.app = Vue.createApp({
+                    ...Template,
+                    props: props || {}
+                });
+                this.app.mount(this.dom);
+            }
+            else {
+                // Vue 2
+                this.app = new Vue({
+                    el: this.dom,
+                    render: (h) => h(Template, { props: props || {} })
+                });
+            }
+        }
+        catch (error) {
+            throw new Error(`Failed to create Vue app: ${error}`);
+        }
+    }
+    /**
+     * 判断是否为Vue 3
+     * @param Vue Vue构造函数
+     * @returns 是否为Vue 3
+     * @private
+     */
+    isVue3(Vue) {
+        return !!(Vue.version && Vue.version.startsWith('3')) || !!Vue.createApp;
+    }
+    /**
+     * 创建覆盖层
+     * @returns 覆盖层实例
+     * @private
+     */
+    createOverlay() {
+        const overlay = new Overlay({
+            element: this.dom,
+            positioning: this.options.positioning || 'center-center',
+            stopEvent: this.options.stopEvent || false
         });
-        this.anchor.setPosition([lgtd, lttd]);
-        this.map.addOverlay(this.anchor);
+        overlay.setPosition(this.position);
+        return overlay;
     }
+    /**
+     * 错误处理
+     * @param message 错误消息
+     * @param error 原始错误
+     * @param context 错误上下文
+     * @private
+     */
+    handleError(message, error, context) {
+        this.errorHandler.createAndHandleError(`${message}: ${error}`, ErrorType.COMPONENT_ERROR, { ...context, domPointId: this.id });
+    }
+    /**
+     * 设置可见性
+     * @param visible 是否可见
+     * @throws 当操作失败时抛出错误
+     */
     setVisible(visible) {
-        this.dom.style.visibility = visible ? 'visible' : 'hidden';
+        if (this.state === DomPointState.DESTROYED) {
+            throw new Error('Cannot set visibility on destroyed DOM point');
+        }
+        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;
+        }
+        catch (error) {
+            this.handleError('Failed to set visibility', error, { visible });
+            throw error;
+        }
+    }
+    /**
+     * 获取当前可见性状态
+     * @returns 是否可见
+     */
+    isVisible() {
+        return this.state === DomPointState.VISIBLE;
+    }
+    /**
+     * 更新位置
+     * @param longitude 新经度
+     * @param latitude 新纬度
+     * @throws 当操作失败时抛出错误
+     */
+    updatePosition(longitude, latitude) {
+        if (this.state === DomPointState.DESTROYED) {
+            throw new Error('Cannot update position on destroyed DOM point');
+        }
+        ValidationUtils.validateCoordinate(longitude, latitude);
+        try {
+            this.position = [longitude, latitude];
+            this.anchor.setPosition(this.position);
+        }
+        catch (error) {
+            this.handleError('Failed to update position', error, { longitude, latitude });
+            throw error;
+        }
+    }
+    /**
+     * 获取当前位置
+     * @returns 当前坐标位置
+     */
+    getPosition() {
+        return [...this.position];
+    }
+    /**
+     * 更新组件属性
+     * @param newProps 新的属性对象
+     * @throws 当操作失败时抛出错误
+     */
+    updateProps(newProps) {
+        if (this.state === DomPointState.DESTROYED) {
+            throw new Error('Cannot update props on destroyed DOM point');
+        }
+        try {
+            // 重新创建Vue应用实例
+            this.destroyVueApp();
+            this.options.props = { ...this.options.props, ...newProps };
+            this.createVueApp();
+        }
+        catch (error) {
+            this.handleError('Failed to update props', error, { newProps });
+            throw error;
+        }
+    }
+    /**
+     * 设置CSS样式
+     * @param styles 样式对象
+     * @throws 当操作失败时抛出错误
+     */
+    setStyle(styles) {
+        if (this.state === DomPointState.DESTROYED) {
+            throw new Error('Cannot set style on destroyed DOM point');
+        }
+        try {
+            Object.assign(this.dom.style, styles);
+        }
+        catch (error) {
+            this.handleError('Failed to set style', error, { styles });
+            throw error;
+        }
     }
+    /**
+     * 添加CSS类名
+     * @param className 要添加的类名
+     * @throws 当操作失败时抛出错误
+     */
+    addClass(className) {
+        if (this.state === DomPointState.DESTROYED) {
+            throw new Error('Cannot add class on destroyed DOM point');
+        }
+        ValidationUtils.validateNonEmptyString(className, 'Valid class name is required');
+        try {
+            this.dom.classList.add(className);
+        }
+        catch (error) {
+            this.handleError('Failed to add class', error, { className });
+            throw error;
+        }
+    }
+    /**
+     * 移除CSS类名
+     * @param className 要移除的类名
+     * @throws 当操作失败时抛出错误
+     */
+    removeClass(className) {
+        if (this.state === DomPointState.DESTROYED) {
+            throw new Error('Cannot remove class on destroyed DOM point');
+        }
+        ValidationUtils.validateNonEmptyString(className, 'Valid class name is required');
+        try {
+            this.dom.classList.remove(className);
+        }
+        catch (error) {
+            this.handleError('Failed to remove class', error, { className });
+            throw error;
+        }
+    }
+    /**
+     * 销毁Vue应用实例
+     * @private
+     */
+    destroyVueApp() {
+        if (this.app) {
+            try {
+                if ('unmount' in this.app) {
+                    // Vue 3
+                    this.app.unmount();
+                }
+                else if ('$destroy' in this.app) {
+                    // Vue 2
+                    this.app.$destroy();
+                }
+            }
+            catch (error) {
+                console.warn('Error destroying Vue app:', error);
+            }
+            finally {
+                this.app = null;
+            }
+        }
+    }
+    /**
+     * 移除点位
+     * @throws 当移除失败时抛出错误
+     */
     remove() {
-        this.app.unmount();
-        this.map.removeOverlay(this.anchor);
+        if (this.state === DomPointState.DESTROYED) {
+            console.warn('DOM point already destroyed');
+            return;
+        }
+        try {
+            // 销毁Vue应用实例
+            this.destroyVueApp();
+            // 从地图移除覆盖层
+            this.map.removeOverlay(this.anchor);
+            // 清理DOM元素
+            if (this.dom && this.dom.parentNode) {
+                this.dom.parentNode.removeChild(this.dom);
+            }
+            // 更新状态
+            this.state = DomPointState.DESTROYED;
+        }
+        catch (error) {
+            this.handleError('Failed to remove DOM point', error);
+            throw error;
+        }
+    }
+    /**
+     * 获取覆盖层
+     * @returns 覆盖层实例
+     */
+    getOverlay() {
+        return this.anchor;
+    }
+    /**
+     * 获取点位ID
+     * @returns 点位唯一标识符
+     */
+    getId() {
+        return this.id;
+    }
+    /**
+     * 获取DOM元素
+     * @returns DOM元素
+     */
+    getDomElement() {
+        return this.dom;
+    }
+    /**
+     * 获取当前状态
+     * @returns 当前状态
+     */
+    getState() {
+        return this.state;
+    }
+    /**
+     * 获取配置选项
+     * @returns 配置选项的副本
+     */
+    getOptions() {
+        return Object.freeze({ ...this.options });
+    }
+    /**
+     * 检查是否已销毁
+     * @returns 是否已销毁
+     */
+    isDestroyed() {
+        return this.state === DomPointState.DESTROYED;
+    }
+    /**
+     * 获取地图实例
+     * @returns 地图实例
+     */
+    getMap() {
+        return this.map;
     }
 }

package/dist/core/EventManager.d.ts

@@ -0,0 +1,131 @@
+import { Map as OLMap } from 'ol';
+import { Pixel } from 'ol/pixel';
+import { FeatureLike } from 'ol/Feature';
+/**
+ * 事件类型定义
+ */
+export type MapEventType = 'click' | 'dblclick' | 'hover' | 'moveend' | 'zoomend' | 'pointermove';
+/**
+ * 事件回调函数类型
+ */
+export type EventCallback = (event: MapEventData) => void;
+/**
+ * 地图事件数据接口
+ */
+export interface MapEventData {
+    type: MapEventType;
+    originalEvent?: Event;
+    coordinate?: number[];
+    pixel?: Pixel;
+    features?: FeatureLike[];
+    feature?: FeatureLike;
+    zoom?: number;
+    [key: string]: any;
+}
+/**
+ * 事件管理器类
+ * 用于统一管理地图事件的注册、触发和移除
+ */
+export declare class EventManager {
+    private readonly map;
+    private listeners;
+    private eventCounters;
+    /**
+     * 构造函数
+     * @param map OpenLayers地图实例
+     */
+    constructor(map: OLMap);
+    /**
+     * 初始化事件计数器
+     */
+    private initializeEventCounters;
+    /**
+     * 注册事件监听器
+     * @param type 事件类型
+     * @param callback 回调函数
+     * @param options 选项
+     * @returns 事件监听器ID
+     */
+    on(type: MapEventType, callback: EventCallback, options?: {
+        once?: boolean;
+        filter?: (event: MapEventData) => boolean;
+    }): string;
+    /**
+     * 移除事件监听器
+     * @param id 监听器ID
+     */
+    off(id: string): boolean;
+    /**
+     * 移除指定类型的所有事件监听器
+     * @param type 事件类型
+     */
+    offAll(type: MapEventType): void;
+    /**
+     * 清除所有事件监听器
+     */
+    clear(): void;
+    /**
+     * 获取指定类型的监听器数量
+     * @param type 事件类型
+     */
+    getListenerCount(type: MapEventType): number;
+    /**
+     * 生成监听器ID
+     * @param type 事件类型
+     */
+    private generateListenerId;
+    /**
+     * 附加地图事件
+     * @param type 事件类型
+     */
+    private attachMapEvent;
+    /**
+     * 分离地图事件（如果不再需要）
+     * @param type 事件类型
+     */
+    private detachMapEventIfNeeded;
+    /**
+     * 处理点击事件
+     * @param event 地图浏览器事件
+     */
+    private handleClickEvent;
+    /**
+     * 处理双击事件
+     * @param event 地图浏览器事件
+     */
+    private handleDblClickEvent;
+    /**
+     * 处理指针移动事件
+     * @param event 地图浏览器事件
+     */
+    private handlePointerMoveEvent;
+    /**
+     * 处理移动结束事件
+     */
+    private handleMoveEndEvent;
+    /**
+     * 处理缩放结束事件
+     */
+    private handleZoomEndEvent;
+    /**
+     * 创建事件数据
+     * @param type 事件类型
+     * @param event 原始事件
+     */
+    private createEventData;
+    /**
+     * 触发监听器
+     * @param type 事件类型
+     * @param eventData 事件数据
+     */
+    private triggerListeners;
+    /**
+     * 获取监听器信息（用于调试）
+     */
+    getListenersInfo(): Array<{
+        id: string;
+        type: MapEventType;
+        hasFilter: boolean;
+        isOnce: boolean;
+    }>;
+}