my-openlayer 1.0.3 → 1.0.5

package/MyOl.d.ts

@@ -8,7 +8,7 @@ import MapTools from "./core/MapTools";
 import { ErrorHandler } from './utils/ErrorHandler';
 import { EventManager } from './core/EventManager';
 import { ConfigManager } from './core/ConfigManager';
-import { MapInitType, EventType } from './types';
+import { MapInitType } from './types';
 /**
  * MyOl 地图核心类
  * 提供完整的地图操作功能，包括点、线、面要素管理，底图切换，工具操作等
@@ -21,7 +21,7 @@ export default class MyOl {
     private _point?;
     private _line?;
     private readonly errorHandler;
-    private readonly eventManager;
+    private _eventManager?;
     private readonly configManager;
     private readonly options;
     static readonly DefaultOptions: MapInitType;
@@ -101,13 +101,6 @@ export default class MyOl {
      * @param duration 动画持续时间（毫秒）
      */
     locationAction(longitude: number, latitude: number, zoom?: number, duration?: number): void;
-    /**
-     * 监听地图事件
-     * @param eventType 事件类型
-     * @param callback 回调函数
-     * @param clickType 点击类型（可选）
-     */
-    mapOnEvent(eventType: EventType, callback: (feature?: any, e?: any) => void, clickType?: 'point' | 'line' | 'polygon'): void;
     /**
      * 获取错误处理器实例
      * @returns ErrorHandler 错误处理器

package/MyOl.js

@@ -46,9 +46,10 @@ class MyOl {
                 layers: layers,
                 controls: this.createControls()
             });
-            // 初始化事件管理器（需要地图实例）
-            this.eventManager = new EventManager(this.map);
-            // 初始化事件监听
+            if (layers.length === 0 || this.options.annotation) {
+                this.getMapBaseLayers();
+            }
+            // 初始化基础事件监听（地图错误等）
             this.initializeEventListeners();
         }
         catch (error) {
@@ -108,13 +109,14 @@ class MyOl {
      * @private
      */
     initializeEventListeners() {
+        const eventManager = this.getEventManager();
         // 地图加载完成事件
-        this.map.once('rendercomplete', () => {
+        eventManager.on('rendercomplete', (eventData) => {
             console.debug('地图初始化完成', { map: this.map });
-        });
+        }, { once: true });
         // 地图错误事件
-        this.map.on('error', (error) => {
-            this.errorHandler.handleError(new MyOpenLayersError('地图渲染错误', ErrorType.MAP_ERROR, { error }));
+        eventManager.on('error', (eventData) => {
+            this.errorHandler.handleError(new MyOpenLayersError('地图渲染错误', ErrorType.MAP_ERROR, { error: eventData.error }));
         });
     }
     /**
@@ -304,29 +306,6 @@ class MyOl {
             throw error;
         }
     }
-    /**
-     * 监听地图事件
-     * @param eventType 事件类型
-     * @param callback 回调函数
-     * @param clickType 点击类型（可选）
-     */
-    mapOnEvent(eventType, callback, clickType) {
-        try {
-            if (typeof callback !== 'function') {
-                throw new Error('回调函数必须是函数类型');
-            }
-            MapTools.mapOnEvent(this.map, eventType, callback, clickType);
-            // 记录事件监听
-            console.debug('地图事件监听已添加', {
-                eventType,
-                clickType
-            });
-        }
-        catch (error) {
-            this.errorHandler.handleError(new MyOpenLayersError(`添加地图事件监听失败: ${error instanceof Error ? error.message : '未知错误'}`, ErrorType.MAP_ERROR, { eventType, clickType }));
-            throw error;
-        }
-    }
     // ==========================================
     // 管理器访问方法
     // ==========================================
@@ -342,7 +321,10 @@ class MyOl {
      * @returns EventManager 事件管理器
      */
     getEventManager() {
-        return this.eventManager;
+        if (!this._eventManager) {
+            this._eventManager = new EventManager(this.map);
+        }
+        return this._eventManager;
     }
     /**
      * 获取配置管理器实例
@@ -363,8 +345,10 @@ class MyOl {
      */
     destroy() {
         try {
-            // 清理事件监听
-            this.eventManager.clear();
+            // 清理事件监听（仅在已初始化时）
+            if (this._eventManager) {
+                this._eventManager.clear();
+            }
             // 销毁功能模块
             this._point = undefined;
             this._line = undefined;

package/core/DomPoint.d.ts

@@ -54,13 +54,6 @@ export default class DomPoint {
      * @private
      */
     private createVueApp;
-    /**
-     * 判断是否为Vue 3
-     * @param Vue Vue构造函数
-     * @returns 是否为Vue 3
-     * @private
-     */
-    private isVue3;
     /**
      * 创建覆盖层
      * @returns 覆盖层实例
@@ -88,11 +81,11 @@ export default class DomPoint {
     isVisible(): boolean;
     /**
      * 更新位置
-     * @param longitude 新经度
-     * @param latitude 新纬度
+     * @param lgtd 新经度
+     * @param lttd 新纬度
      * @throws 当操作失败时抛出错误
      */
-    updatePosition(longitude: number, latitude: number): void;
+    updatePosition(lgtd: number, lttd: number): void;
     /**
      * 获取当前位置
      * @returns 当前坐标位置

package/core/DomPoint.js

@@ -2,6 +2,60 @@ import Overlay from 'ol/Overlay';
 import { DomPointState } 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元素覆盖物
@@ -23,10 +77,7 @@ export default class DomPoint {
             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
-            ];
+            this.position = [this.options.lgtd, this.options.lttd];
             // 创建DOM元素
             this.dom = this.createDomElement();
             // 创建Vue应用实例
@@ -53,13 +104,12 @@ export default class DomPoint {
     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');
+        const { Template, lgtd, lttd } = 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 (typeof lgtd !== 'number' || typeof lttd !== 'number') {
+            throw new Error('Longitude and lttd must be numbers');
         }
-        ValidationUtils.validateCoordinate(longitude, latitude);
+        ValidationUtils.validateCoordinate(lgtd, lttd);
     }
     /**
      * 合并默认配置选项
@@ -105,9 +155,12 @@ export default class DomPoint {
      * @private
      */
     createVueApp() {
-        const { Vue, Template, props } = this.options;
+        const { Template, props } = this.options;
+        if (!Vue) {
+            throw new Error('Vue is not available. Please ensure Vue is installed in your project.');
+        }
         try {
-            if (this.isVue3(Vue)) {
+            if (isVue3) {
                 // Vue 3
                 this.app = Vue.createApp({
                     ...Template,
@@ -127,15 +180,6 @@ export default class DomPoint {
             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 覆盖层实例
@@ -188,21 +232,21 @@ export default class DomPoint {
     }
     /**
      * 更新位置
-     * @param longitude 新经度
-     * @param latitude 新纬度
+     * @param lgtd 新经度
+     * @param lttd 新纬度
      * @throws 当操作失败时抛出错误
      */
-    updatePosition(longitude, latitude) {
+    updatePosition(lgtd, lttd) {
         if (this.state === DomPointState.DESTROYED) {
             throw new Error('Cannot update position on destroyed DOM point');
         }
-        ValidationUtils.validateCoordinate(longitude, latitude);
+        ValidationUtils.validateCoordinate(lgtd, lttd);
         try {
-            this.position = [longitude, latitude];
+            this.position = [lgtd, lttd];
             this.anchor.setPosition(this.position);
         }
         catch (error) {
-            this.handleError('Failed to update position', error, { longitude, latitude });
+            this.handleError('Failed to update position', error, { lgtd, lttd });
             throw error;
         }
     }
@@ -293,17 +337,17 @@ export default class DomPoint {
     destroyVueApp() {
         if (this.app) {
             try {
-                if ('unmount' in this.app) {
-                    // Vue 3
+                if (isVue3) {
+                    // Vue 3: 使用 unmount
                     this.app.unmount();
                 }
-                else if ('$destroy' in this.app) {
-                    // Vue 2
+                else {
+                    // Vue 2: 使用 $destroy
                     this.app.$destroy();
                 }
             }
             catch (error) {
-                console.warn('Error destroying Vue app:', error);
+                this.handleError('Failed to destroy Vue app', error);
             }
             finally {
                 this.app = null;

package/core/EventManager.d.ts

@@ -4,7 +4,7 @@ import { FeatureLike } from 'ol/Feature';
 /**
  * 事件类型定义
  */
-export type MapEventType = 'click' | 'dblclick' | 'hover' | 'moveend' | 'zoomend' | 'pointermove';
+export type MapEventType = 'click' | 'dblclick' | 'hover' | 'moveend' | 'zoomend' | 'pointermove' | 'rendercomplete' | 'error';
 /**
  * 事件回调函数类型
  */
@@ -30,6 +30,7 @@ export declare class EventManager {
     private readonly map;
     private listeners;
     private eventCounters;
+    private mapEventListeners;
     /**
      * 构造函数
      * @param map OpenLayers地图实例
@@ -80,10 +81,10 @@ export declare class EventManager {
      */
     private attachMapEvent;
     /**
-     * 分离地图事件（如果不再需要）
+     * 移除地图事件监听器
      * @param type 事件类型
      */
-    private detachMapEventIfNeeded;
+    private detachMapEvent;
     /**
      * 处理点击事件
      * @param event 地图浏览器事件
@@ -107,6 +108,15 @@ export declare class EventManager {
      * 处理缩放结束事件
      */
     private handleZoomEndEvent;
+    /**
+     * 处理渲染完成事件
+     */
+    private handleRenderCompleteEvent;
+    /**
+     * 处理错误事件
+     * @param error 错误对象
+     */
+    private handleErrorEvent;
     /**
      * 创建事件数据
      * @param type 事件类型

package/core/EventManager.js

@@ -11,6 +11,7 @@ export class EventManager {
     constructor(map) {
         this.listeners = new Map();
         this.eventCounters = new Map();
+        this.mapEventListeners = new Map();
         ErrorHandler.validateMap(map);
         this.map = map;
         this.initializeEventCounters();
@@ -19,7 +20,7 @@ export class EventManager {
      * 初始化事件计数器
      */
     initializeEventCounters() {
-        const eventTypes = ['click', 'dblclick', 'hover', 'moveend', 'zoomend', 'pointermove'];
+        const eventTypes = ['click', 'dblclick', 'hover', 'moveend', 'zoomend', 'pointermove', 'rendercomplete', 'error'];
         eventTypes.forEach(type => {
             this.eventCounters.set(type, 0);
         });
@@ -54,7 +55,11 @@ export class EventManager {
             return false;
         }
         this.listeners.delete(id);
-        this.detachMapEventIfNeeded(listener.type);
+        // 如果该类型没有其他监听器了，移除地图事件监听器
+        const remainingListeners = this.getListenerCount(listener.type);
+        if (remainingListeners === 0) {
+            this.detachMapEvent(listener.type);
+        }
         return true;
     }
     /**
@@ -71,15 +76,19 @@ export class EventManager {
         idsToRemove.forEach(id => {
             this.listeners.delete(id);
         });
-        this.detachMapEventIfNeeded(type);
+        // 移除对应的地图事件监听器
+        if (idsToRemove.length > 0) {
+            this.detachMapEvent(type);
+        }
     }
     /**
      * 清除所有事件监听器
      */
     clear() {
         this.listeners.clear();
-        this.eventCounters.forEach((_, type) => {
-            this.detachMapEventIfNeeded(type);
+        // 移除所有地图事件监听器
+        this.mapEventListeners.forEach((_, type) => {
+            this.detachMapEvent(type);
         });
     }
     /**
@@ -113,37 +122,64 @@ export class EventManager {
         if (existingListeners > 1) {
             return; // 已经附加过该类型的事件
         }
+        // 如果已经有地图事件监听器，先移除
+        if (this.mapEventListeners.has(type)) {
+            this.detachMapEvent(type);
+        }
+        let eventHandler;
+        let target = this.map;
+        let eventName;
         switch (type) {
             case 'click':
-                this.map.on('click', this.handleClickEvent.bind(this));
+                eventHandler = this.handleClickEvent.bind(this);
+                eventName = 'click';
                 break;
             case 'dblclick':
-                this.map.on('dblclick', this.handleDblClickEvent.bind(this));
+                eventHandler = this.handleDblClickEvent.bind(this);
+                eventName = 'dblclick';
                 break;
             case 'hover':
             case 'pointermove':
-                this.map.on('pointermove', this.handlePointerMoveEvent.bind(this));
+                eventHandler = this.handlePointerMoveEvent.bind(this);
+                eventName = 'pointermove';
                 break;
             case 'moveend':
-                this.map.on('moveend', this.handleMoveEndEvent.bind(this));
+                eventHandler = this.handleMoveEndEvent.bind(this);
+                eventName = 'moveend';
                 break;
             case 'zoomend':
-                this.map.getView().on('change:resolution', this.handleZoomEndEvent.bind(this));
+                eventHandler = this.handleZoomEndEvent.bind(this);
+                target = this.map.getView();
+                eventName = 'change:resolution';
+                break;
+            case 'rendercomplete':
+                eventHandler = this.handleRenderCompleteEvent.bind(this);
+                eventName = 'rendercomplete';
+                this.map.once(eventName, eventHandler);
+                this.mapEventListeners.set(type, { handler: eventHandler, target, eventName, isOnce: true });
+                return;
+            case 'error':
+                eventHandler = this.handleErrorEvent.bind(this);
+                eventName = 'error';
                 break;
+            default:
+                return;
         }
+        target.on(eventName, eventHandler);
+        this.mapEventListeners.set(type, { handler: eventHandler, target, eventName, isOnce: false });
     }
     /**
-     * 分离地图事件（如果不再需要）
+     * 移除地图事件监听器
      * @param type 事件类型
      */
-    detachMapEventIfNeeded(type) {
-        const remainingListeners = this.getListenerCount(type);
-        if (remainingListeners > 0) {
-            return; // 还有其他监听器需要该事件
+    detachMapEvent(type) {
+        const mapListener = this.mapEventListeners.get(type);
+        if (!mapListener) {
+            return;
         }
-        // 注意：OpenLayers 不提供直接移除特定事件监听器的方法
-        // 这里只是示例，实际实现可能需要保存事件监听器的引用
-        console.warn(`Event type '${type}' detachment not fully implemented`);
+        const { handler, target, eventName } = mapListener;
+        target.un(eventName, handler);
+        this.mapEventListeners.delete(type);
     }
     /**
      * 处理点击事件
@@ -192,6 +228,29 @@ export class EventManager {
         };
         this.triggerListeners('zoomend', eventData);
     }
+    /**
+     * 处理渲染完成事件
+     */
+    handleRenderCompleteEvent() {
+        const eventData = {
+            type: 'rendercomplete',
+            zoom: this.map.getView().getZoom(),
+            coordinate: this.map.getView().getCenter()
+        };
+        this.triggerListeners('rendercomplete', eventData);
+    }
+    /**
+     * 处理错误事件
+     * @param error 错误对象
+     */
+    handleErrorEvent(error) {
+        const eventData = {
+            type: 'error',
+            originalEvent: error,
+            error: error
+        };
+        this.triggerListeners('error', eventData);
+    }
     /**
      * 创建事件数据
      * @param type 事件类型

package/core/Line.d.ts

@@ -38,6 +38,8 @@ interface RiverLayerOptions extends LineOptions {
 export default class Line {
     /** OpenLayers 地图实例 */
     private readonly map;
+    /** 事件管理器实例 */
+    private readonly eventManager;
     /** 河流图层列表 */
     private riverLayerList;
     /** 河流图层显示状态 */

package/core/Line.js

@@ -5,6 +5,7 @@ import { Stroke, Style } from "ol/style";
 import { Feature } from "ol";
 import MapTools from "./MapTools";
 import { ValidationUtils } from "../utils/ValidationUtils";
+import { EventManager } from "./EventManager";
 /**
  * 线要素管理类
  * 用于在地图上添加和管理线要素，包括普通线要素、河流图层等
@@ -39,6 +40,7 @@ export default class Line {
         };
         ValidationUtils.validateMapInstance(map);
         this.map = map;
+        this.eventManager = new EventManager(map);
     }
     /**
      * 添加线要素
@@ -156,7 +158,7 @@ export default class Line {
             this.map.addLayer(riverLayer);
         }
         // 设置缩放事件监听
-        MapTools.mapOnEvent(this.map, 'moveend', () => {
+        this.eventManager.on('moveend', () => {
             this.showRiverLayerByZoom();
         });
         // 初始显示

package/core/MapBaseLayers.d.ts

@@ -48,6 +48,8 @@ export default class MapBaseLayers {
     private layers;
     private readonly errorHandler;
     private currentBaseLayerType;
+    private currentAnnotationLayer;
+    private currentAnnotationType;
     /**
      * 构造函数
      * @param map OpenLayers地图实例
@@ -79,12 +81,40 @@ export default class MapBaseLayers {
      */
     private initTiandituLayers;
     /**
-     * 添加注记图层
+     * 加载默认注记图层（cia_c）
      * @param token 天地图token
      * @param baseZIndex 基础层级
      * @private
      */
-    private addAnnotationLayers;
+    private loadDefaultAnnotationLayer;
+    /**
+     * 切换注记类别
+     * @param annotationType 注记类型 ('cva_c' | 'cia_c' | 'cta_c')
+     */
+    switchAnnotationLayer(annotationType: 'cva_c' | 'cia_c' | 'cta_c'): void;
+    /**
+     * 设置注记图层（私有方法，用于消除代码重复）
+     * @param annotationType 注记类型
+     * @param token 天地图token
+     * @param baseZIndex 基础层级
+     * @private
+     */
+    private setAnnotationLayer;
+    /**
+     * 获取当前注记类型
+     * @returns 当前注记类型
+     */
+    getCurrentAnnotationType(): string | null;
+    /**
+     * 显示/隐藏注记图层
+     * @param visible 是否可见
+     */
+    setAnnotationVisible(visible: boolean): void;
+    /**
+     * 检查注记图层是否可见
+     * @returns 是否可见
+     */
+    isAnnotationVisible(): boolean;
     /**
      * 切换底图图层
      * @param type 图层类型