my-openlayer 2.5.3 → 2.5.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [2.5.4] - 2026-05-18
+
+### 🐛 Bug Fixes
+
+- 修复生产环境下直接调用 `MyOl.createView()` 时，`EPSG:4326 -> EPSG:4490` 转换缺失的问题。
+
+### 📝 Documentation
+
+- 同步更新 `MyOl` 文档与 skill 说明，明确 `createView()` 会自动完成投影初始化。
+
 ## [2.4.12] - 2026-04-21
 
 ### Features

package/MyOl.js

@@ -183,6 +183,8 @@ class MyOl {
      */
     static createView(options = MyOl.DefaultOptions) {
         try {
+            /** *********************静态视图投影初始化*********************/
+            MyOl.initializeProjections(options);
             const code = options.projection?.code ?? MyOl.PROJECTIONS.CGCS2000;
             const projection = MyOl.resolveViewProjection(options, code);
             const viewOptions = {
@@ -441,18 +443,56 @@ class MyOl {
      */
     destroy() {
         try {
-            // 清理事件监听（仅在已初始化时）
+            // 1. 先停掉所有动画 / 解绑事件 / 释放 Overlay，再销毁地图本身
+            if (this._selectHandler) {
+                try {
+                    this._selectHandler.destroy();
+                }
+                catch (e) {
+                    this.errorHandler.warn('SelectHandler.destroy 失败:', e);
+                }
+            }
+            if (this._line) {
+                try {
+                    this._line.destroyAllFlowLines();
+                }
+                catch (e) {
+                    this.errorHandler.warn('Line.destroyAllFlowLines 失败:', e);
+                }
+            }
+            if (this._point) {
+                try {
+                    this._point.destroyAll();
+                }
+                catch (e) {
+                    this.errorHandler.warn('Point.destroyAll 失败:', e);
+                }
+            }
+            if (this._polygon) {
+                try {
+                    this._polygon.destroyAll();
+                }
+                catch (e) {
+                    this.errorHandler.warn('Polygon.destroyAll 失败:', e);
+                }
+            }
             if (this._eventManager) {
-                this._eventManager.clear();
+                try {
+                    this._eventManager.clear();
+                }
+                catch (e) {
+                    this.errorHandler.warn('EventManager.clear 失败:', e);
+                }
             }
-            // 销毁功能模块
+            // 2. 释放模块引用
             this._point = undefined;
             this._line = undefined;
             this._polygon = undefined;
             this._mapTools = undefined;
             this._baseLayers = undefined;
             this._selectHandler = undefined;
-            // 销毁地图
+            this._eventManager = undefined;
+            // 3. 解绑 DOM 目标，OL 内部会回收 layers / interactions
             this.map.setTarget(undefined);
             this.errorHandler.debug('地图实例已销毁', { map: this.map });
         }

package/core/line/Line.d.ts

@@ -37,4 +37,9 @@ export default class Line {
     addFlowLine(data: MapJSONData, options?: FlowLineOptions): FlowLineLayerHandle | null;
     addFlowLineByUrl(url: string, options?: FlowLineOptions): Promise<FlowLineLayerHandle | null>;
     removeFlowLineLayer(layerName: string): void;
+    /**
+     * 销毁本实例创建的所有流动线动画。供 MyOl.destroy 调用，
+     * 确保地图销毁后所有 requestAnimationFrame / postrender 监听被回收。
+     */
+    destroyAllFlowLines(): void;
 }

package/core/line/Line.js

@@ -141,4 +141,17 @@ export default class Line {
         }
         MapTools.removeLayer(this.map, [layerName, `${layerName}__flow-animation`]);
     }
+    /**
+     * 销毁本实例创建的所有流动线动画。供 MyOl.destroy 调用，
+     * 确保地图销毁后所有 requestAnimationFrame / postrender 监听被回收。
+     */
+    destroyAllFlowLines() {
+        Array.from(this.flowLineRegistry.values()).forEach(handle => {
+            try {
+                handle.remove();
+            }
+            catch { /* ignore */ }
+        });
+        this.flowLineRegistry.clear();
+    }
 }

package/core/map/MapTools.d.ts

@@ -33,7 +33,7 @@ export default class MapTools {
      * 使用 Canvas clip 实现裁剪，支持多个闭合区域
      * 注意：此方法会修改 baseLayer 的 prerender 和 postrender 事件
      */
-    static setMapClip(baseLayer: any, data: MapJSONData): any;
+    static setMapClip(baseLayer: BaseLayer, data: MapJSONData): BaseLayer;
     /**
      * 移除图层
      * @param layerName 图层名称

package/core/map/MapTools.js

@@ -84,7 +84,7 @@ class MapTools {
                 : event.frameState.coordinateToPixelTransform;
             ctx.save();
             ctx.beginPath();
-            features.forEach((feature) => {
+            features.forEach(feature => {
                 const geometry = feature.getGeometry();
                 if (!geometry)
                     return;
@@ -112,15 +112,15 @@ class MapTools {
                 };
                 if (type === 'MultiPolygon') {
                     // MultiPolygon: [Polygon, Polygon] -> Polygon: [OuterRing, InnerRing, ...]
-                    coordinates.forEach((polygonCoords) => {
-                        polygonCoords.forEach((ringCoords) => {
+                    coordinates.forEach(polygonCoords => {
+                        polygonCoords.forEach(ringCoords => {
                             drawRing(ringCoords);
                         });
                     });
                 }
                 else if (type === 'Polygon') {
                     // Polygon: [OuterRing, InnerRing, ...]
-                    coordinates.forEach((ringCoords) => {
+                    coordinates.forEach(ringCoords => {
                         drawRing(ringCoords);
                     });
                 }

package/core/point/Point.d.ts

@@ -4,7 +4,21 @@ import VectorSource from "ol/source/Vector";
 import { PointOptions, ClusterOptions, PointData, VueTemplatePointInstance, TwinkleItem, PulsePointOptions, PulsePointLayerHandle } from '../../types';
 export default class Point {
     private map;
+    /** 由本实例创建的纯图层（addPoint / addClusterPoint）。destroyAll 时统一移除。 */
+    private readonly managedLayers;
+    /** 由本实例创建的、需要主动 remove 的句柄（Pulse / DOM / Vue 模板）。 */
+    private readonly managedDisposables;
+    /** VueTemplatePoint 实例复用，避免每次调用 addVueTemplatePoint 都 new 一个无主实例。 */
+    private vueTemplatePoint?;
     constructor(map: Map);
+    /** @internal */
+    private trackLayer;
+    /** @internal */
+    private trackDisposable;
+    /**
+     * 销毁本实例创建的所有图层与动画句柄。供 MyOl.destroy 调用。
+     */
+    destroyAll(): void;
     /**
      * 创建文本样式
      * @private

package/core/point/Point.js

@@ -1,4 +1,3 @@
-"use strict";
 import Feature from "ol/Feature";
 import { Point as olPoint } from "ol/geom";
 import { Text, Style, Fill, Stroke, Icon } from "ol/style";
@@ -13,8 +12,48 @@ import PointOverlay from './PointOverlay';
 import PointPulseLayer from './PointPulseLayer';
 export default class Point {
     constructor(map) {
+        /** 由本实例创建的纯图层（addPoint / addClusterPoint）。destroyAll 时统一移除。 */
+        this.managedLayers = new Set();
+        /** 由本实例创建的、需要主动 remove 的句柄（Pulse / DOM / Vue 模板）。 */
+        this.managedDisposables = new Set();
         this.map = map;
     }
+    /** @internal */
+    trackLayer(layer) {
+        this.managedLayers.add(layer);
+        return layer;
+    }
+    /** @internal */
+    trackDisposable(handle) {
+        this.managedDisposables.add(handle);
+        return handle;
+    }
+    /**
+     * 销毁本实例创建的所有图层与动画句柄。供 MyOl.destroy 调用。
+     */
+    destroyAll() {
+        this.managedDisposables.forEach(handle => {
+            try {
+                handle.remove();
+            }
+            catch { /* ignore */ }
+        });
+        this.managedDisposables.clear();
+        this.managedLayers.forEach(layer => {
+            try {
+                this.map.removeLayer(layer);
+            }
+            catch { /* ignore */ }
+        });
+        this.managedLayers.clear();
+        if (this.vueTemplatePoint) {
+            try {
+                this.vueTemplatePoint.removeAllPoints();
+            }
+            catch { /* ignore */ }
+            this.vueTemplatePoint = undefined;
+        }
+    }
     /**
      * 创建文本样式
      * @private
@@ -135,20 +174,28 @@ export default class Point {
             pointFeatureList.push(pointFeature);
         });
         const PointVectorLayer = new VectorLayer({
-            layerName: options.layerName,
+            properties: {
+                name: options.layerName,
+                layerName: options.layerName
+            },
             source: new VectorSource({
                 features: pointFeatureList
             }),
             zIndex: options.zIndex || ConfigManager.DEFAULT_POINT_OPTIONS.zIndex,
         });
         this.configureLayer(PointVectorLayer, options);
+        this.trackLayer(PointVectorLayer);
         return PointVectorLayer;
     }
     addClusterPoint(pointData, options) {
         if (!ValidationUtils.validatePointData(pointData)) {
             return null;
         }
-        return PointClusterLayer.create(this.map, pointData, options, this.createClusterStyle.bind(this));
+        const layer = PointClusterLayer.create(this.map, pointData, options, this.createClusterStyle.bind(this));
+        if (layer) {
+            this.trackLayer(layer);
+        }
+        return layer;
     }
     /**
      * 添加高性能闪烁点图层。
@@ -160,80 +207,19 @@ export default class Point {
         if (!ValidationUtils.validatePointData(pointData)) {
             return null;
         }
-        return PointPulseLayer.create(this.map, pointData, options);
+        const handle = PointPulseLayer.create(this.map, pointData, options);
+        this.trackDisposable(handle);
+        return handle;
     }
-    // // 在流域中心添加闪烁点位
-    // addTwinkleLayerFromPolygon(twinkleList: any[], className: string, key: string, json: MapJSONData, options?: PolygonOptions) {
-    //   new MapTools(this.map).removeLayer('twinklePoint')
-    //   // 计算多边形的中心点坐标
-    //   const calculatePolygonCenter = (polygonCoordinates: any) => {
-    //     const polygon = turf.polygon(polygonCoordinates[0]);
-    //     const centroid = turf.centroid(polygon);
-    //     return centroid.geometry.coordinates;
-    //   };
-    //   const features: any[] = json.features
-    //   const vectorSource = new VectorSource({
-    //     format: new GeoJSON(),
-    //   });
-    //   twinkleList.forEach(item => {
-    //     const feature = features.find((ele: any) => {
-    //       return ele.properties.BASIN === item.idx
-    //     })
-    //     if (!feature) return
-    //     feature.properties.level = item.lev
-    //     const geojson = new GeoJSON();
-    //     const olFeature = geojson.readFeature(feature);
-    //     if (Array.isArray(olFeature)) {
-    //       vectorSource.addFeatures(olFeature);
-    //     } else {
-    //       vectorSource.addFeature(olFeature);
-    //     }
-    //     if (feature) {
-    //       const polygonCenter = calculatePolygonCenter(feature.geometry.coordinates)
-    //       item.lgtd = polygonCenter[0]
-    //       item.lttd = polygonCenter[1]
-    //     }
-    //   })
-    //   const basinLayer = new VectorLayer({
-    //     name: 'twinklePoint',
-    //     layerName: 'twinklePoint',
-    //     source: vectorSource,
-    //     style: function (feature: any) {
-    //       if (options?.style) {
-    //         if (typeof options.style === 'function') {
-    //           return options.style(feature);
-    //         } else {
-    //           return options.style;
-    //         }
-    //       }
-    //       return new Style({
-    //         stroke: new Stroke({
-    //           color: 'rgb(139,188,245)',
-    //           width: 3
-    //         }),
-    //         fill: new Fill({ color: 'rgba(255, 255, 255, 0)' }),
-    //         text: new Text({
-    //           text: feature.values_['BASIN'] || "",
-    //           font: '14px Calibri,sans-serif',
-    //           fill: new Fill({ color: '#FFF' }),
-    //           stroke: new Stroke({
-    //             color: '#409EFF', width: 2
-    //           }),
-    //         })
-    //       })
-    //     },
-    //     zIndex: 21
-    //   } as any)
-    //   this.map.addLayer(basinLayer)
-    //   this.addTwinkleLayer(twinkleList.map(item => ({...item, className: item[key]})), className, key)
-    // }
     /**
      * 添加闪烁点
      * @param twinkleList 闪烁点数据
      * @param callback
      */
     addDomPoint(twinkleList, callback) {
-        return PointOverlay.create(this.map, twinkleList, callback);
+        const handle = PointOverlay.create(this.map, twinkleList, callback);
+        this.trackDisposable(handle);
+        return handle;
     }
     /**
      * 添加vue组件为点位
@@ -251,8 +237,12 @@ export default class Point {
             throw new Error('Vue template is required');
         }
         try {
-            const vueTemplatePoint = new VueTemplatePoint(this.map);
-            return vueTemplatePoint.addVueTemplatePoint(pointDataList, template, options);
+            if (!this.vueTemplatePoint) {
+                this.vueTemplatePoint = new VueTemplatePoint(this.map);
+            }
+            const handle = this.vueTemplatePoint.addVueTemplatePoint(pointDataList, template, options);
+            this.trackDisposable(handle);
+            return handle;
         }
         catch (error) {
             throw new Error(`Failed to create Vue template points: ${error}`);

package/core/polygon/Polygon.d.ts

@@ -10,12 +10,24 @@ import { PolygonOptions, MapJSONData, PointData, HeatMapOptions, ImageLayerData,
  */
 export default class Polygon {
     private map;
-    [key: string]: any;
+    /**
+     * 由本实例创建的所有图层句柄（含 mask 子图层等）。destroyAll 时统一回收，避免地图销毁后图层泄漏。
+     */
+    private readonly managedLayers;
     /**
      * 构造函数
      * @param map OpenLayers 地图实例
      */
     constructor(map: Map);
+    /**
+     * 跟踪一个本实例创建的图层，便于销毁阶段统一清理。
+     * @internal
+     */
+    private trackLayer;
+    /**
+     * 销毁本实例创建的所有图层。供 MyOl.destroy 调用。
+     */
+    destroyAll(): void;
     /**
      * 添加地图边框图层
      * @param data 图层数据，必须是有效的 GeoJSON 格式

package/core/polygon/Polygon.js

@@ -20,11 +20,37 @@ export default class Polygon {
      * @param map OpenLayers 地图实例
      */
     constructor(map) {
+        /**
+         * 由本实例创建的所有图层句柄（含 mask 子图层等）。destroyAll 时统一回收，避免地图销毁后图层泄漏。
+         */
+        this.managedLayers = new Set();
         if (!map) {
             throw new Error('Map instance is required');
         }
         this.map = map;
     }
+    /**
+     * 跟踪一个本实例创建的图层，便于销毁阶段统一清理。
+     * @internal
+     */
+    trackLayer(layer) {
+        this.managedLayers.add(layer);
+        return layer;
+    }
+    /**
+     * 销毁本实例创建的所有图层。供 MyOl.destroy 调用。
+     */
+    destroyAll() {
+        this.managedLayers.forEach(layer => {
+            try {
+                this.map.removeLayer(layer);
+            }
+            catch {
+                // ignore
+            }
+        });
+        this.managedLayers.clear();
+    }
     /**
      * 添加地图边框图层
      * @param data 图层数据，必须是有效的 GeoJSON 格式
@@ -105,6 +131,7 @@ export default class Polygon {
         });
         layer.setVisible(mergedOptions.visible);
         this.map.addLayer(layer);
+        this.trackLayer(layer);
         // 如果需要适应视图
         if (mergedOptions.fitView) {
             this.fitViewToLayer(layer);
@@ -152,6 +179,7 @@ export default class Polygon {
         });
         layer.setVisible(mergedOptions.visible);
         this.map.addLayer(layer);
+        this.trackLayer(layer);
         // 如果需要适应视图
         if (mergedOptions.fitView) {
             source.once('featuresloadend', () => {
@@ -211,7 +239,11 @@ export default class Polygon {
      * @param options
      */
     setOutLayer(data, options) {
-        return PolygonMaskLayer.setOutLayer(this.map, data, options);
+        const layer = PolygonMaskLayer.setOutLayer(this.map, data, options);
+        if (layer) {
+            this.trackLayer(layer);
+        }
+        return layer;
     }
     /**
      * 添加图片图层
@@ -221,7 +253,9 @@ export default class Polygon {
      * @throws 当数据格式无效时抛出错误
      */
     addImageLayer(imageData, options) {
-        return PolygonImageLayer.addImageLayer(this.map, imageData, options);
+        const layer = PolygonImageLayer.addImageLayer(this.map, imageData, options);
+        this.trackLayer(layer);
+        return layer;
     }
     /**
      * 添加热力图图层
@@ -229,7 +263,11 @@ export default class Polygon {
      * @param options 热力图配置
      */
     addHeatmap(pointData, options) {
-        return PolygonHeatmapLayer.addHeatmap(this.map, pointData, options);
+        const layer = PolygonHeatmapLayer.addHeatmap(this.map, pointData, options);
+        if (layer) {
+            this.trackLayer(layer);
+        }
+        return layer;
     }
     /**
      * 添加遮罩图层
@@ -239,10 +277,17 @@ export default class Polygon {
      * @throws 当数据格式无效时抛出错误
      */
     addMaskLayer(data, options) {
-        return PolygonMaskLayer.addMaskLayer(this.map, data, options);
+        const layer = PolygonMaskLayer.addMaskLayer(this.map, data, options);
+        this.trackLayer(layer);
+        return layer;
     }
     removePolygonLayer(layerName) {
         new MapTools(this.map).removeLayer(layerName);
-        this[layerName] = null;
+        // 从 managedLayers 中也移除对应记录
+        this.managedLayers.forEach(layer => {
+            if (layer.get('layerName') === layerName || layer.get('name') === layerName) {
+                this.managedLayers.delete(layer);
+            }
+        });
     }
 }

package/docs/MyOl.md

@@ -68,6 +68,8 @@ constructor(id: string | HTMLElement, options?: Partial<MapInitType>)
 static createView(options: MapInitType): View
 ```
 
+`createView()` 可以单独作为静态方法调用，内部会先完成 `EPSG:4326`、`EPSG:4490`、`EPSG:4549` 以及自定义 `projection.def` 的投影注册，避免生产构建下直接调用静态方法时缺少坐标转换。
+
 | 参数名 | 类型 | 描述 |
 | :--- | :--- | :--- |
 | `options` | `MapInitType` | 地图配置选项，主要使用其中的 `center`, `zoom`, `projection` 等属性。 |

package/index.d.ts

@@ -13,4 +13,5 @@ export { default as ValidationUtils } from './utils/ValidationUtils';
 export type { BaseOptions, StyleOptions, TextOptions } from './types';
 export type { PointOptions, LineOptions, FlowLineOptions, FlowLineLayerHandle, PolygonOptions, PulsePointOptions, PulsePointLayerHandle } from './types';
 export type { OptionsType } from './types';
-export type { MapInitType, MapLayersOptions, HeatMapOptions, ImageLayerData, MaskLayerOptions, FeatureColorUpdateOptions, PointData, PulsePointIconOptions, LineData, ClusterOptions, MeasureHandlerType, VueTemplatePointOptions, MapJSONData, FeatureData, AnnotationType, TiandituType, MapLayers, AnnotationLayerOptions, SelectOptions, SelectMode, SelectCallbackEvent, ProgrammaticSelectOptions } from './types';
+export type { MapInitType, MapLayersOptions, HeatMapOptions, ImageLayerData, MaskLayerOptions, FeatureColorUpdateOptions, PointData, PulsePointIconOptions, LineData, ClusterOptions, MeasureHandlerType, VueTemplatePointOptions, VueTemplatePointInstance, TwinkleItem, MapJSONData, FeatureData, AnnotationType, TiandituType, MapLayers, AnnotationLayerOptions, SelectOptions, SelectMode, SelectCallbackEvent, ProgrammaticSelectOptions } from './types';
+export { VueTemplatePointState } from './types';

package/index.js

@@ -11,3 +11,5 @@ export { SelectHandler } from './core/select';
 export { ErrorHandler, MyOpenLayersError, ErrorType } from './utils/ErrorHandler';
 // 验证工具
 export { default as ValidationUtils } from './utils/ValidationUtils';
+// Vue 模板点位状态枚举（运行时值，需要单独导出）
+export { VueTemplatePointState } from './types';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "2.5.3",
+  "version": "2.5.5",
   "type": "module",
   "license": "MIT",
   "main": "index.js",