my-openlayer 1.0.3 → 1.0.5

package/core/MapBaseLayers.js

@@ -19,7 +19,7 @@ const TIANDITU_CONFIG = {
     BASE_URL: '//t{0-7}.tianditu.gov.cn/DataServer',
     PROJECTION: 'EPSG:4326',
     DEFAULT_ZINDEX: 9,
-    ANNOTATION_ZINDEX_OFFSET: 1
+    ANNOTATION_ZINDEX_OFFSET: 10
 };
 /**
  * 地图底图图层管理类
@@ -33,6 +33,8 @@ export default class MapBaseLayers {
     constructor(map, options) {
         this.layers = {};
         this.currentBaseLayerType = null;
+        this.currentAnnotationLayer = null;
+        this.currentAnnotationType = null;
         this.errorHandler = ErrorHandler.getInstance();
         try {
             // 参数验证
@@ -90,6 +92,14 @@ export default class MapBaseLayers {
                 this.switchBaseLayer(firstLayerType);
             }
         }
+        // 添加注记图层
+        if (this.options.annotation) {
+            if (!this.options.token) {
+                throw new Error('请配置token后才能使用天地图注记');
+            }
+            const { token, zIndex = TIANDITU_CONFIG.DEFAULT_ZINDEX } = this.options;
+            this.loadDefaultAnnotationLayer(token, zIndex);
+        }
     }
     /**
      * 初始化天地图图层
@@ -105,10 +115,6 @@ export default class MapBaseLayers {
             this.layers.vec_c = [this.createTiandituLayer({ type: 'vec_c', token, zIndex, visible: false })];
             this.layers.img_c = [this.createTiandituLayer({ type: 'img_c', token, zIndex, visible: false })];
             this.layers.ter_c = [this.createTiandituLayer({ type: 'ter_c', token, zIndex, visible: false })];
-            // 添加注记图层
-            if (this.options.annotation) {
-                this.addAnnotationLayers(token, zIndex);
-            }
         }
         catch (error) {
             this.errorHandler.createAndHandleError(`Failed to initialize Tianditu layers: ${error}`, ErrorType.LAYER_ERROR, { token, zIndex, error });
@@ -116,31 +122,81 @@ export default class MapBaseLayers {
         }
     }
     /**
-     * 添加注记图层
+     * 加载默认注记图层（cia_c）
+     * @param token 天地图token
+     * @param baseZIndex 基础层级
+     * @private
+     */
+    loadDefaultAnnotationLayer(token, baseZIndex) {
+        this.setAnnotationLayer('cia_c', token, baseZIndex);
+    }
+    /**
+     * 切换注记类别
+     * @param annotationType 注记类型 ('cva_c' | 'cia_c' | 'cta_c')
+     */
+    switchAnnotationLayer(annotationType) {
+        try {
+            if (!this.options.token) {
+                throw new Error('Token is required for annotation layer');
+            }
+            if (!this.options.annotation) {
+                throw new Error('Annotation is not enabled in options');
+            }
+            const baseZIndex = this.options.zIndex ?? TIANDITU_CONFIG.DEFAULT_ZINDEX;
+            this.setAnnotationLayer(annotationType, this.options.token, baseZIndex);
+        }
+        catch (error) {
+            this.errorHandler.createAndHandleError(`Failed to switch annotation layer to '${annotationType}': ${error}`, ErrorType.LAYER_ERROR, { annotationType, error });
+        }
+    }
+    /**
+     * 设置注记图层（私有方法，用于消除代码重复）
+     * @param annotationType 注记类型
      * @param token 天地图token
      * @param baseZIndex 基础层级
      * @private
      */
-    addAnnotationLayers(token, baseZIndex) {
+    setAnnotationLayer(annotationType, token, baseZIndex) {
+        // 移除当前注记图层
+        if (this.currentAnnotationLayer) {
+            this.map.removeLayer(this.currentAnnotationLayer);
+        }
+        // 创建新的注记图层，确保层级在基本图层之上
         const annotationZIndex = baseZIndex + TIANDITU_CONFIG.ANNOTATION_ZINDEX_OFFSET;
-        this.layers.vec_c?.push(this.createAnnotationLayer({
-            type: 'cva_c',
-            token,
-            zIndex: annotationZIndex,
-            visible: false
-        }));
-        this.layers.img_c?.push(this.createAnnotationLayer({
-            type: 'cia_c',
+        let annotationLayer = this.createAnnotationLayer({
+            type: annotationType,
             token,
             zIndex: annotationZIndex,
-            visible: false
-        }));
-        this.layers.ter_c?.push(this.createAnnotationLayer({
-            type: 'cta_c',
-            token,
-            zIndex: annotationZIndex,
-            visible: false
-        }));
+            visible: true
+        });
+        // 应用剪切处理
+        annotationLayer = this.processLayer(annotationLayer);
+        this.currentAnnotationLayer = annotationLayer;
+        this.currentAnnotationType = annotationType;
+        this.map.addLayer(this.currentAnnotationLayer);
+    }
+    /**
+     * 获取当前注记类型
+     * @returns 当前注记类型
+     */
+    getCurrentAnnotationType() {
+        return this.currentAnnotationType;
+    }
+    /**
+     * 显示/隐藏注记图层
+     * @param visible 是否可见
+     */
+    setAnnotationVisible(visible) {
+        if (this.currentAnnotationLayer) {
+            this.currentAnnotationLayer.setVisible(visible);
+        }
+    }
+    /**
+     * 检查注记图层是否可见
+     * @returns 是否可见
+     */
+    isAnnotationVisible() {
+        return this.currentAnnotationLayer ? this.currentAnnotationLayer.getVisible() : false;
     }
     /**
      * 切换底图图层
@@ -167,6 +223,12 @@ export default class MapBaseLayers {
                 layer.setVisible(true);
             });
             this.currentBaseLayerType = type;
+            // 如果存在注记图层，更新其层级确保在新的基本图层之上
+            if (this.currentAnnotationLayer && this.currentAnnotationType) {
+                const baseZIndex = this.options.zIndex ?? TIANDITU_CONFIG.DEFAULT_ZINDEX;
+                const annotationZIndex = baseZIndex + TIANDITU_CONFIG.ANNOTATION_ZINDEX_OFFSET;
+                this.currentAnnotationLayer.setZIndex(annotationZIndex);
+            }
         }
         catch (error) {
             this.errorHandler.createAndHandleError(`Failed to switch base layer to '${type}': ${error}`, ErrorType.LAYER_ERROR, { type, error });
@@ -462,6 +524,12 @@ export default class MapBaseLayers {
                     this.map.removeLayer(layer);
                 });
             }
+            // 清除注记图层
+            if (this.currentAnnotationLayer) {
+                this.map.removeLayer(this.currentAnnotationLayer);
+                this.currentAnnotationLayer = null;
+                this.currentAnnotationType = null;
+            }
             this.layers = {};
             this.currentBaseLayerType = null;
         }

package/core/MapTools.d.ts

@@ -1,18 +1,16 @@
 import Map from "ol/Map";
-import { EventType, MapJSONData } from "../types";
+import { MapJSONData } from "../types";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
 import BaseLayer from "ol/layer/Base";
 import ImageLayer from "ol/layer/Image";
 import ImageSource from "ol/source/Image";
-import { EventManager, MapEventData } from "./EventManager";
 /**
  * 地图工具类
  * 提供地图的基础操作功能
  */
 export default class MapTools {
     private readonly map;
-    private eventManager;
     private errorHandler;
     constructor(map: Map);
     /**
@@ -62,55 +60,6 @@ export default class MapTools {
      * @throws 当参数无效时抛出错误
      */
     static setLayerVisible: (map: Map, layerName: string, visible: boolean) => void;
-    /**
-     * 地图监听事件
-     * @param eventType 事件类型
-     * @param callback 回调函数
-     * @param options 事件选项
-     * @returns 事件监听器ID
-     * @throws 当参数无效时抛出错误
-     */
-    mapOnEvent(eventType: EventType, callback: (feature?: any, e?: any) => void, options?: {
-        clickType?: 'point' | 'line' | 'polygon';
-        once?: boolean;
-        filter?: (event: MapEventData) => boolean;
-    }): string;
-    /**
-     * 地图监听事件（静态方法，兼容性保留）
-     * @param map 地图实例
-     * @param eventType 事件类型
-     * @param callback 回调函数
-     * @param clickType 点击类型
-     * @throws 当参数无效时抛出错误
-     * @deprecated 推荐使用实例方法 mapOnEvent
-     */
-    static mapOnEvent(map: Map, eventType: EventType, callback: (feature?: any, e?: any) => void, clickType?: 'point' | 'line' | 'polygon'): void;
-    /**
-     * 兼容性方法：使用传统方式注册事件
-     * @private
-     */
-    private registerEventWithManager;
-    /**
-     * 转换事件类型
-     * @private
-     */
-    private convertToMapEventType;
-    /**
-     * 移除事件监听器
-     * @param listenerId 监听器ID
-     * @returns 是否成功移除
-     */
-    removeEventListener(listenerId: string): boolean;
-    /**
-     * 移除指定类型的所有事件监听器
-     * @param eventType 事件类型
-     */
-    removeAllEventListeners(eventType?: EventType): void;
-    /**
-     * 获取 EventManager 实例
-     * @returns EventManager 实例
-     */
-    getEventManager(): EventManager;
     /**
      * 获取地图实例
      * @returns 地图实例

package/core/MapTools.js

@@ -4,7 +4,6 @@ import VectorSource from "ol/source/Vector";
 import GeoJSON from "ol/format/GeoJSON";
 import { Fill, Style } from "ol/style";
 import { getVectorContext } from "ol/render";
-import { EventManager } from "./EventManager";
 import { ErrorHandler, ErrorType } from "../utils/ErrorHandler";
 import { ValidationUtils } from "../utils/ValidationUtils";
 /**
@@ -17,10 +16,9 @@ class MapTools {
         try {
             ValidationUtils.validateMap(map);
             this.map = map;
-            this.eventManager = new EventManager(map);
         }
         catch (error) {
-            this.errorHandler.createAndHandleError(`Failed to initialize MapTools: ${error}`, ErrorType.MAP_ERROR, { map, error });
+            this.errorHandler.createAndHandleError(`MapTools initialization failed: ${error}`, ErrorType.COMPONENT_ERROR, { map, error });
             throw error;
         }
     }
@@ -165,156 +163,6 @@ class MapTools {
             throw new Error('Failed to set layer visibility');
         }
     }
-    /**
-     * 地图监听事件
-     * @param eventType 事件类型
-     * @param callback 回调函数
-     * @param options 事件选项
-     * @returns 事件监听器ID
-     * @throws 当参数无效时抛出错误
-     */
-    mapOnEvent(eventType, callback, options) {
-        try {
-            ErrorHandler.validateMap(this.map);
-            if (!eventType) {
-                throw new Error('Event type is required');
-            }
-            if (typeof callback !== 'function') {
-                throw new Error('Callback must be a function');
-            }
-            return this.registerEventWithManager(eventType, callback, options);
-        }
-        catch (error) {
-            this.errorHandler.createAndHandleError(`Failed to register map event: ${error}`, ErrorType.COMPONENT_ERROR, { eventType, callback, options, error });
-            throw error;
-        }
-    }
-    /**
-     * 地图监听事件（静态方法，兼容性保留）
-     * @param map 地图实例
-     * @param eventType 事件类型
-     * @param callback 回调函数
-     * @param clickType 点击类型
-     * @throws 当参数无效时抛出错误
-     * @deprecated 推荐使用实例方法 mapOnEvent
-     */
-    static mapOnEvent(map, eventType, callback, clickType) {
-        const errorHandler = ErrorHandler.getInstance();
-        try {
-            ErrorHandler.validateMap(map);
-            if (!eventType) {
-                throw new Error('Event type is required');
-            }
-            if (typeof callback !== 'function') {
-                throw new Error('Callback must be a function');
-            }
-            const eventManager = new EventManager(map);
-            const mapTools = new MapTools(map);
-            mapTools.registerEventWithManager(eventType, callback, { clickType });
-        }
-        catch (error) {
-            errorHandler.createAndHandleError(`Failed to register static map event: ${error}`, ErrorType.COMPONENT_ERROR, { map, eventType, callback, clickType, error });
-            throw error;
-        }
-    }
-    /**
-     * 兼容性方法：使用传统方式注册事件
-     * @private
-     */
-    registerEventWithManager(eventType, callback, options) {
-        const mapEventType = this.convertToMapEventType(eventType);
-        const eventCallback = (event) => {
-            try {
-                if (eventType === 'click') {
-                    const feature = event.feature;
-                    const extraData = {
-                        features: event.features || [],
-                        pixel: event.pixel
-                    };
-                    // 应用点击类型过滤
-                    if (options?.clickType && feature) {
-                        const geometryType = feature.getGeometry()?.getType();
-                        const clickTypeMap = {
-                            point: ['Point', 'MultiPoint'],
-                            line: ['LineString', 'MultiLineString'],
-                            polygon: ['Polygon', 'MultiPolygon']
-                        };
-                        if (geometryType && !clickTypeMap[options.clickType].includes(geometryType)) {
-                            return; // 不符合点击类型过滤条件
-                        }
-                    }
-                    callback(feature, extraData);
-                }
-                else if (eventType === 'moveend') {
-                    callback(event.zoom);
-                }
-                else if (eventType === 'hover') {
-                    callback({
-                        features: event.features || [],
-                        pixel: event.pixel
-                    });
-                }
-            }
-            catch (error) {
-                this.errorHandler.createAndHandleError(`Error in event callback: ${error}`, ErrorType.COMPONENT_ERROR, { eventType, event, error });
-            }
-        };
-        return this.eventManager.on(mapEventType, eventCallback, {
-            once: options?.once,
-            filter: options?.filter
-        });
-    }
-    /**
-     * 转换事件类型
-     * @private
-     */
-    convertToMapEventType(eventType) {
-        const typeMap = {
-            'click': 'click',
-            'hover': 'hover',
-            'moveend': 'moveend'
-        };
-        return typeMap[eventType] || 'click';
-    }
-    /**
-     * 移除事件监听器
-     * @param listenerId 监听器ID
-     * @returns 是否成功移除
-     */
-    removeEventListener(listenerId) {
-        try {
-            return this.eventManager.off(listenerId);
-        }
-        catch (error) {
-            this.errorHandler.createAndHandleError(`Failed to remove event listener: ${error}`, ErrorType.COMPONENT_ERROR, { listenerId, error });
-            return false;
-        }
-    }
-    /**
-     * 移除指定类型的所有事件监听器
-     * @param eventType 事件类型
-     */
-    removeAllEventListeners(eventType) {
-        try {
-            if (eventType) {
-                const mapEventType = this.convertToMapEventType(eventType);
-                this.eventManager.offAll(mapEventType);
-            }
-            else {
-                this.eventManager.clear();
-            }
-        }
-        catch (error) {
-            this.errorHandler.createAndHandleError(`Failed to remove event listeners: ${error}`, ErrorType.COMPONENT_ERROR, { eventType, error });
-        }
-    }
-    /**
-     * 获取 EventManager 实例
-     * @returns EventManager 实例
-     */
-    getEventManager() {
-        return this.eventManager;
-    }
     /**
      * 获取地图实例
      * @returns 地图实例

package/core/Point.d.ts

@@ -1,7 +1,7 @@
 import Map from "ol/Map";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
-import { MapJSONData, PointOptions, ClusterOptions, PointData } from '../types';
+import { MapJSONData, PointOptions, ClusterOptions, PointData, VueTemplatePointInstance } from '../types';
 export default class Point {
     private map;
     constructor(map: Map);
@@ -50,20 +50,19 @@ export default class Point {
      * @param options {
      *   nameKey: String 数据中的名称的key
      *   img: String 图标
-     *   hasImg: Boolean 是否显示图标
      * }
      */
     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;
+    addTwinkleLayerFromPolygon(twinkleList: any[], className: string, key: string, json: MapJSONData): void;
     /**
-     * 设置闪烁点
-     * @param twinkleList 闪烁点数据 - 二维数组 [[],[]]
+     * 添加闪烁点
+     * @param twinkleList 闪烁点数据 - 二维数组 [[]，[]]
      * @param className 闪烁点样式,需要和id保持一致
      * @param key 闪烁点索引
      * @param callback
      */
-    setTwinkleLayer(twinkleList: any[], className: string | undefined, key: string, callback?: Function): void;
+    addTwinkleLayer(twinkleList: any[], className: string | undefined, key: string, callback?: Function): void;
     /**
      * 地图定位
      * @param lgtd 经度
@@ -75,17 +74,21 @@ export default class Point {
     /**
      * 设置dom元素为点位
      */
-    setDomPoint(id: string, lgtd: number, lttd: number): boolean;
+    addDomPoint(id: string, lgtd: number, lttd: number): boolean;
     /**
-     * 设置vue组件为点位
-     * @param pointInfoList 点位信息列表
+     * 添加vue组件为点位
+     * @param pointDataList 点位信息列表
      * @param template vue组件模板
      * @param Vue Vue实例
      * @returns 返回控制对象，包含显示、隐藏、移除方法
      * @throws 当参数无效时抛出错误
      */
-    setDomPointVue(pointInfoList: any[], template: any, Vue: any): {
+    addVueTemplatePoint(pointDataList: PointData[], template: any, options?: {
+        positioning?: 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center-left' | 'center-center' | 'center-right' | 'top-left' | 'top-center' | 'top-right';
+        stopEvent?: boolean;
+    }): {
         setVisible: (visible: boolean) => void;
         remove: () => void;
+        getPoints: () => VueTemplatePointInstance[];
     };
 }

package/core/Point.js

@@ -8,7 +8,7 @@ import VectorSource from "ol/source/Vector";
 import { Cluster } from 'ol/source';
 import * as turf from '@turf/turf';
 import GeoJSON from "ol/format/GeoJSON";
-import DomPoint from './DomPoint';
+import VueTemplatePoint from './VueTemplatePoint';
 import MapTools from "./MapTools";
 import { ValidationUtils } from '../utils/ValidationUtils';
 export default class Point {
@@ -64,7 +64,7 @@ export default class Point {
         if (options.nameKey && item) {
             style.text = this.createTextStyle(options, item[options.nameKey]);
         }
-        if (options.hasImg || options.hasImg === undefined) {
+        if (options.img) {
             style.image = this.createIconStyle(options);
         }
         return new Style(style);
@@ -81,7 +81,7 @@ export default class Point {
         if (options.nameKey) {
             style.text = this.createTextStyle(options, name);
         }
-        if (options.hasImg || options.hasImg === undefined) {
+        if (options.img) {
             style.image = this.createIconStyle(options);
         }
         return new Style(style);
@@ -103,7 +103,6 @@ export default class Point {
      * @param options {
      *   nameKey: String 数据中的名称的key
      *   img: String 图标
-     *   hasImg: Boolean 是否显示图标
      * }
      */
     addPoint(pointData, options) {
@@ -169,7 +168,7 @@ export default class Point {
         return clusterLayer;
     }
     // 在流域中心添加闪烁点位
-    setTwinkleLayerFromPolygon(twinkleList, className, key, json) {
+    addTwinkleLayerFromPolygon(twinkleList, className, key, json) {
         new MapTools(this.map).removeLayer('twinklePoint');
         // 计算多边形的中心点坐标
         const calculatePolygonCenter = (polygonCoordinates) => {
@@ -221,17 +220,17 @@ export default class Point {
             zIndex: 21
         });
         this.map.addLayer(basinLayer);
-        this.setTwinkleLayer(twinkleList, className, key, (twinkleItem) => {
+        this.addTwinkleLayer(twinkleList, className, key, (twinkleItem) => {
         });
     }
     /**
-     * 设置闪烁点
-     * @param twinkleList 闪烁点数据 - 二维数组 [[],[]]
+     * 添加闪烁点
+     * @param twinkleList 闪烁点数据 - 二维数组 [[]，[]]
      * @param className 闪烁点样式,需要和id保持一致
      * @param key 闪烁点索引
      * @param callback
      */
-    setTwinkleLayer(twinkleList, className = 'marker_warning', key, callback) {
+    addTwinkleLayer(twinkleList, className = 'marker_warning', key, callback) {
         // 查找class是warn-points的dom，并删除
         const arr = document.getElementsByClassName(className);
         const l = arr.length;
@@ -289,7 +288,7 @@ export default class Point {
     /**
      * 设置dom元素为点位
      */
-    setDomPoint(id, lgtd, lttd) {
+    addDomPoint(id, lgtd, lttd) {
         if (!id) {
             console.error('Element ID is required');
             return false;
@@ -319,56 +318,26 @@ export default class Point {
         }
     }
     /**
-     * 设置vue组件为点位
-     * @param pointInfoList 点位信息列表
+     * 添加vue组件为点位
+     * @param pointDataList 点位信息列表
      * @param template vue组件模板
      * @param Vue Vue实例
      * @returns 返回控制对象，包含显示、隐藏、移除方法
      * @throws 当参数无效时抛出错误
      */
-    setDomPointVue(pointInfoList, template, Vue) {
-        if (!pointInfoList || !Array.isArray(pointInfoList) || pointInfoList.length === 0) {
+    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');
         }
-        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();
-                    });
-                }
-            };
+            const vueTemplatePoint = new VueTemplatePoint(this.map);
+            return vueTemplatePoint.addVueTemplatePoint(pointDataList, template, options);
         }
         catch (error) {
-            throw new Error(`Failed to create DOM points: ${error}`);
+            throw new Error(`Failed to create Vue template points: ${error}`);
         }
     }
 }

package/core/Polygon.js

@@ -74,7 +74,7 @@ export default class Polygon {
             visible: true,
             strokeColor: '#EBEEF5',
             strokeWidth: 2,
-            fillColor: 'rgba(255, 255, 255, 0.3)',
+            fillColor: 'rgba(255, 255, 255, 0)',
             textFont: '14px Calibri,sans-serif',
             textFillColor: '#FFF',
             textStrokeColor: '#409EFF',