my-openlayer 1.0.14 → 2.0.0

package/core/VueTemplatePoint.js

@@ -1,529 +1,529 @@
-import Overlay from 'ol/Overlay';
-import { VueTemplatePointState } 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();
-}
-/**
- * Vue模板点位管理类
- * 用于在地图上添加和管理Vue组件覆盖物
- */
-export default class VueTemplatePoint {
-    /**
-     * 构造函数
-     * @param map OpenLayers地图实例
-     */
-    constructor(map) {
-        this.vuePoints = new Map();
-        ValidationUtils.validateRequired(map, 'Map instance is required');
-        this.map = map;
-        this.errorHandler = ErrorHandler.getInstance();
-    }
-    /**
-     * 添加Vue模板点位
-     * @param pointDataList 点位数据列表
-     * @param template Vue模板
-     * @param options 可选配置项
-     * @returns 点位控制器
-     */
-    addVueTemplatePoint(pointDataList, template, options) {
-        if (!pointDataList || !Array.isArray(pointDataList) || pointDataList.length === 0) {
-            throw new Error('Valid point info list is required');
-        }
-        if (!template) {
-            throw new Error('Vue template is required');
-        }
-        try {
-            const instances = [];
-            pointDataList.forEach((pointData) => {
-                if (!ValidationUtils.validateLngLat(pointData.lgtd, pointData.lttd)) {
-                    throw new Error('Valid longitude and latitude are required for each point');
-                }
-                const pointOptions = {
-                    Template: template,
-                    lgtd: pointData.lgtd,
-                    lttd: pointData.lttd,
-                    props: {
-                        pointData: {
-                            type: Object,
-                            default: pointData
-                        }
-                    },
-                    positioning: options?.positioning,
-                    stopEvent: options?.stopEvent,
-                };
-                const instance = new VueTemplatePointInstanceImpl(this.map, pointOptions, this.errorHandler);
-                instances.push(instance);
-                this.vuePoints.set(instance.id, instance);
-            });
-            return {
-                setVisible: (visible) => {
-                    instances.forEach((instance) => {
-                        instance.setVisible(visible);
-                    });
-                },
-                remove: () => {
-                    instances.forEach((instance) => {
-                        instance.remove();
-                        this.vuePoints.delete(instance.id);
-                    });
-                },
-                getPoints: () => instances
-            };
-        }
-        catch (error) {
-            throw new Error(`Failed to create Vue template points: ${error}`);
-        }
-    }
-    /**
-     * 根据ID获取点位实例
-     * @param id 点位ID
-     * @returns 点位实例或undefined
-     */
-    getPointById(id) {
-        return this.vuePoints.get(id);
-    }
-    /**
-     * 获取所有点位实例
-     * @returns 所有点位实例数组
-     */
-    getAllPoints() {
-        return Array.from(this.vuePoints.values());
-    }
-    /**
-     * 移除所有点位
-     */
-    removeAllPoints() {
-        this.vuePoints.forEach((instance) => {
-            instance.remove();
-        });
-        this.vuePoints.clear();
-    }
-    /**
-     * 获取点位数量
-     * @returns 点位数量
-     */
-    getPointCount() {
-        return this.vuePoints.size;
-    }
-}
-/**
- * Vue模板点位实例实现类
- * @internal
- */
-class VueTemplatePointInstanceImpl {
-    constructor(map, options, errorHandler) {
-        this.app = null;
-        this.state = VueTemplatePointState.CREATED;
-        this.map = map;
-        this.errorHandler = errorHandler;
-        this.options = this.mergeDefaultOptions(options);
-        this.id = this.generateUniqueId();
-        this.position = [this.options.lgtd, this.options.lttd];
-        try {
-            // 参数验证
-            this.validateConstructorParams(map, options);
-            // 创建DOM元素
-            this.dom = this.createDomElement();
-            // 创建Vue应用实例
-            this.createVueApp();
-            // 创建覆盖层
-            this.anchor = this.createOverlay();
-            // 添加到地图
-            this.map.addOverlay(this.anchor);
-            // 设置初始状态
-            this.state = VueTemplatePointState.MOUNTED;
-            this.setVisible(this.options.visible ?? true);
-        }
-        catch (error) {
-            this.handleError('Failed to create Vue template 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 === VueTemplatePointState.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 ? VueTemplatePointState.VISIBLE : VueTemplatePointState.HIDDEN;
-        }
-        catch (error) {
-            this.handleError('Failed to set visibility', error, { visible });
-            throw error;
-        }
-    }
-    /**
-     * 获取当前可见性状态
-     * @returns 是否可见
-     */
-    isVisible() {
-        return this.state === VueTemplatePointState.VISIBLE;
-    }
-    /**
-     * 更新位置
-     * @param lgtd 新经度
-     * @param lttd 新纬度
-     * @throws 当操作失败时抛出错误
-     */
-    updatePosition(lgtd, lttd) {
-        if (this.state === VueTemplatePointState.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 === VueTemplatePointState.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 === VueTemplatePointState.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 === VueTemplatePointState.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 === VueTemplatePointState.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 === VueTemplatePointState.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 = VueTemplatePointState.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 === VueTemplatePointState.DESTROYED;
-    }
-    /**
-     * 获取地图实例
-     * @returns 地图实例
-     */
-    getMap() {
-        return this.map;
-    }
-}
+import Overlay from 'ol/Overlay';
+import { VueTemplatePointState } 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();
+}
+/**
+ * Vue模板点位管理类
+ * 用于在地图上添加和管理Vue组件覆盖物
+ */
+export default class VueTemplatePoint {
+    /**
+     * 构造函数
+     * @param map OpenLayers地图实例
+     */
+    constructor(map) {
+        this.vuePoints = new Map();
+        ValidationUtils.validateRequired(map, 'Map instance is required');
+        this.map = map;
+        this.errorHandler = ErrorHandler.getInstance();
+    }
+    /**
+     * 添加Vue模板点位
+     * @param pointDataList 点位数据列表
+     * @param template Vue模板
+     * @param options 可选配置项
+     * @returns 点位控制器
+     */
+    addVueTemplatePoint(pointDataList, template, options) {
+        if (!pointDataList || !Array.isArray(pointDataList) || pointDataList.length === 0) {
+            throw new Error('Valid point info list is required');
+        }
+        if (!template) {
+            throw new Error('Vue template is required');
+        }
+        try {
+            const instances = [];
+            pointDataList.forEach((pointData) => {
+                if (!ValidationUtils.validateLngLat(pointData.lgtd, pointData.lttd)) {
+                    throw new Error('Valid longitude and latitude are required for each point');
+                }
+                const pointOptions = {
+                    Template: template,
+                    lgtd: pointData.lgtd,
+                    lttd: pointData.lttd,
+                    props: {
+                        pointData: {
+                            type: Object,
+                            default: pointData
+                        }
+                    },
+                    positioning: options?.positioning,
+                    stopEvent: options?.stopEvent,
+                };
+                const instance = new VueTemplatePointInstanceImpl(this.map, pointOptions, this.errorHandler);
+                instances.push(instance);
+                this.vuePoints.set(instance.id, instance);
+            });
+            return {
+                setVisible: (visible) => {
+                    instances.forEach((instance) => {
+                        instance.setVisible(visible);
+                    });
+                },
+                remove: () => {
+                    instances.forEach((instance) => {
+                        instance.remove();
+                        this.vuePoints.delete(instance.id);
+                    });
+                },
+                getPoints: () => instances
+            };
+        }
+        catch (error) {
+            throw new Error(`Failed to create Vue template points: ${error}`);
+        }
+    }
+    /**
+     * 根据ID获取点位实例
+     * @param id 点位ID
+     * @returns 点位实例或undefined
+     */
+    getPointById(id) {
+        return this.vuePoints.get(id);
+    }
+    /**
+     * 获取所有点位实例
+     * @returns 所有点位实例数组
+     */
+    getAllPoints() {
+        return Array.from(this.vuePoints.values());
+    }
+    /**
+     * 移除所有点位
+     */
+    removeAllPoints() {
+        this.vuePoints.forEach((instance) => {
+            instance.remove();
+        });
+        this.vuePoints.clear();
+    }
+    /**
+     * 获取点位数量
+     * @returns 点位数量
+     */
+    getPointCount() {
+        return this.vuePoints.size;
+    }
+}
+/**
+ * Vue模板点位实例实现类
+ * @internal
+ */
+class VueTemplatePointInstanceImpl {
+    constructor(map, options, errorHandler) {
+        this.app = null;
+        this.state = VueTemplatePointState.CREATED;
+        this.map = map;
+        this.errorHandler = errorHandler;
+        this.options = this.mergeDefaultOptions(options);
+        this.id = this.generateUniqueId();
+        this.position = [this.options.lgtd, this.options.lttd];
+        try {
+            // 参数验证
+            this.validateConstructorParams(map, options);
+            // 创建DOM元素
+            this.dom = this.createDomElement();
+            // 创建Vue应用实例
+            this.createVueApp();
+            // 创建覆盖层
+            this.anchor = this.createOverlay();
+            // 添加到地图
+            this.map.addOverlay(this.anchor);
+            // 设置初始状态
+            this.state = VueTemplatePointState.MOUNTED;
+            this.setVisible(this.options.visible ?? true);
+        }
+        catch (error) {
+            this.handleError('Failed to create Vue template 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 === VueTemplatePointState.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 ? VueTemplatePointState.VISIBLE : VueTemplatePointState.HIDDEN;
+        }
+        catch (error) {
+            this.handleError('Failed to set visibility', error, { visible });
+            throw error;
+        }
+    }
+    /**
+     * 获取当前可见性状态
+     * @returns 是否可见
+     */
+    isVisible() {
+        return this.state === VueTemplatePointState.VISIBLE;
+    }
+    /**
+     * 更新位置
+     * @param lgtd 新经度
+     * @param lttd 新纬度
+     * @throws 当操作失败时抛出错误
+     */
+    updatePosition(lgtd, lttd) {
+        if (this.state === VueTemplatePointState.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 === VueTemplatePointState.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 === VueTemplatePointState.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 === VueTemplatePointState.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 === VueTemplatePointState.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 === VueTemplatePointState.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 = VueTemplatePointState.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 === VueTemplatePointState.DESTROYED;
+    }
+    /**
+     * 获取地图实例
+     * @returns 地图实例
+     */
+    getMap() {
+        return this.map;
+    }
+}