my-openlayer 1.0.9 → 1.0.11

package/core/VueTemPoint.js

@@ -1,432 +0,0 @@
-import Overlay from 'ol/Overlay';
-import { VueTemPointState } from '../types';
-import { ErrorHandler, ErrorType } from '../utils/ErrorHandler';
-import { ValidationUtils } from '../utils/ValidationUtils';
-// 动态导入Vue
-let Vue = null;
-let isVue3 = false;
-// 检测Vue版本并导入
-async function detectAndImportVue() {
-    try {
-        // 尝试动态导入Vue
-        const vueModule = await import('vue');
-        Vue = vueModule.default || vueModule;
-        // 检测Vue版本
-        if (Vue && (Vue.version?.startsWith('3') || Vue.createApp)) {
-            isVue3 = true;
-        }
-        else {
-            isVue3 = false;
-        }
-    }
-    catch (e) {
-        console.warn('Vue not found. Please ensure Vue is installed in your project.');
-        Vue = null;
-    }
-}
-// 同步版本的Vue检测（用于兼容性）
-function detectVueSync() {
-    try {
-        // 尝试从全局对象获取Vue
-        if (typeof window !== 'undefined' && window.Vue) {
-            Vue = window.Vue;
-            isVue3 = !!(Vue.version?.startsWith('3') || Vue.createApp);
-            return;
-        }
-        // 如果在Node.js环境中，尝试require
-        if (typeof window === 'undefined') {
-            try {
-                // 使用eval来避免TypeScript编译时的require检查
-                const requireFunc = eval('require');
-                Vue = requireFunc('vue');
-                isVue3 = !!(Vue.version?.startsWith('3') || Vue.createApp);
-            }
-            catch (e) {
-                console.warn('Vue not found. Please ensure Vue is installed in your project.');
-                Vue = null;
-            }
-        }
-    }
-    catch (e) {
-        console.warn('Failed to detect Vue:', e);
-    }
-}
-// 初始化Vue导入
-detectVueSync();
-if (!Vue) {
-    detectAndImportVue();
-}
-/**
- * DOM点位管理类
- * 用于在地图上添加和管理DOM元素覆盖物
- */
-export default class VueTemPoint {
-    /**
-     * 构造函数
-     * @param map OpenLayers地图实例
-     * @param options 配置选项
-     * @throws 当参数无效时抛出错误
-     */
-    constructor(map, options) {
-        this.app = null;
-        this.state = VueTemPointState.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.lgtd, this.options.lttd];
-            // 创建DOM元素
-            this.dom = this.createDomElement();
-            // 创建Vue应用实例
-            this.createVueApp();
-            // 创建覆盖层
-            this.anchor = this.createOverlay();
-            // 添加到地图
-            this.map.addOverlay(this.anchor);
-            // 设置初始状态
-            this.state = VueTemPointState.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 { Template, lgtd, lttd } = options;
-        ValidationUtils.validateRequired(Template, 'Template is required in options');
-        if (typeof lgtd !== 'number' || typeof lttd !== 'number') {
-            throw new Error('Longitude and lttd must be numbers');
-        }
-        ValidationUtils.validateCoordinate(lgtd, lttd);
-    }
-    /**
-     * 合并默认配置选项
-     * @param options 用户配置选项
-     * @returns 合并后的配置选项
-     * @private
-     */
-    mergeDefaultOptions(options) {
-        return {
-            positioning: 'center-center',
-            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 { Template, props } = this.options;
-        if (!Vue) {
-            throw new Error('Vue is not available. Please ensure Vue is installed in your project.');
-        }
-        try {
-            if (isVue3) {
-                // 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}`);
-        }
-    }
-    /**
-     * 创建覆盖层
-     * @returns 覆盖层实例
-     * @private
-     */
-    createOverlay() {
-        const overlay = new Overlay({
-            element: this.dom,
-            positioning: this.options.positioning || 'center-center',
-            stopEvent: this.options.stopEvent || false
-        });
-        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) {
-        if (this.state === VueTemPointState.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 ? VueTemPointState.VISIBLE : VueTemPointState.HIDDEN;
-        }
-        catch (error) {
-            this.handleError('Failed to set visibility', error, { visible });
-            throw error;
-        }
-    }
-    /**
-     * 获取当前可见性状态
-     * @returns 是否可见
-     */
-    isVisible() {
-        return this.state === VueTemPointState.VISIBLE;
-    }
-    /**
-     * 更新位置
-     * @param lgtd 新经度
-     * @param lttd 新纬度
-     * @throws 当操作失败时抛出错误
-     */
-    updatePosition(lgtd, lttd) {
-        if (this.state === VueTemPointState.DESTROYED) {
-            throw new Error('Cannot update position on destroyed DOM point');
-        }
-        ValidationUtils.validateCoordinate(lgtd, lttd);
-        try {
-            this.position = [lgtd, lttd];
-            this.anchor.setPosition(this.position);
-        }
-        catch (error) {
-            this.handleError('Failed to update position', error, { lgtd, lttd });
-            throw error;
-        }
-    }
-    /**
-     * 获取当前位置
-     * @returns 当前坐标位置
-     */
-    getPosition() {
-        return [...this.position];
-    }
-    /**
-     * 更新组件属性
-     * @param newProps 新的属性对象
-     * @throws 当操作失败时抛出错误
-     */
-    updateProps(newProps) {
-        if (this.state === VueTemPointState.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 === VueTemPointState.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 === VueTemPointState.DESTROYED) {
-            throw new Error('Cannot add class to 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 === VueTemPointState.DESTROYED) {
-            throw new Error('Cannot remove class from 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 (isVue3) {
-                    // Vue 3: 使用 unmount
-                    this.app.unmount();
-                }
-                else {
-                    // Vue 2: 使用 $destroy
-                    this.app.$destroy();
-                }
-            }
-            catch (error) {
-                this.handleError('Failed to destroy Vue app', error);
-            }
-            finally {
-                this.app = null;
-            }
-        }
-    }
-    /**
-     * 移除点位
-     * @throws 当移除失败时抛出错误
-     */
-    remove() {
-        if (this.state === VueTemPointState.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 = VueTemPointState.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 === VueTemPointState.DESTROYED;
-    }
-    /**
-     * 获取地图实例
-     * @returns 地图实例
-     */
-    getMap() {
-        return this.map;
-    }
-}