my-openlayer 2.5.4 → 3.0.1

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
@@ -63,7 +102,7 @@ export default class Point {
     createPointStyle(options, item) {
         const style = {};
         if (options.textKey && item) {
-            style.text = this.createTextStyle(options, item[options.textKey]);
+            style.text = this.createTextStyle(options, String(item[options.textKey] ?? ''));
         }
         if (options.img) {
             style.image = this.createIconStyle(options);
@@ -106,7 +145,8 @@ export default class Point {
      *   img: String 图标
      * }
      */
-    addPoint(pointData, options) {
+    /** *********************创建普通点图层*********************/
+    createPointLayer(pointData, options) {
         if (!ValidationUtils.validatePointData(pointData)) {
             return null;
         }
@@ -135,20 +175,56 @@ 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) {
+    /** *********************创建聚合点图层*********************/
+    createClusterPointLayer(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;
+    }
+    /** *********************添加普通点*********************/
+    addPoint(pointData, options) {
+        const layer = this.createPointLayer(pointData, options);
+        if (!layer)
+            return null;
+        return this.toLayerHandle(layer);
+    }
+    /** *********************添加聚合点*********************/
+    addClusterPoint(pointData, options) {
+        const layer = this.createClusterPointLayer(pointData, options);
+        if (!layer)
+            return null;
+        return this.toLayerHandle(layer);
+    }
+    /** @internal 把 VectorLayer 包成 LayerHandle 的内部工具。 */
+    toLayerHandle(layer) {
+        const map = this.map;
+        const managedLayers = this.managedLayers;
+        return {
+            layer,
+            setVisible(visible) { layer.setVisible(visible); },
+            remove() {
+                managedLayers.delete(layer);
+                map.removeLayer(layer);
+            }
+        };
     }
     /**
      * 添加高性能闪烁点图层。
@@ -160,86 +236,62 @@ 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;
+    }
+    /**
+     * P1-2：从 URL 加载点位数据并添加为静态点图层。
+     *
+     * 期望 URL 返回 `PointData[]` 形态的 JSON 数组（含 lgtd / lttd）或 FeatureCollection。
+     * features 加载/解析完成后 Promise resolve 为 LayerHandle。
+     */
+    async addPointByUrl(url, options) {
+        ValidationUtils.validateNonEmptyString(url, 'Point url is required');
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch point data: ${response.status}`);
+        }
+        const json = await response.json();
+        const pointData = Array.isArray(json) ? json : (json?.features ?? []).map((f) => ({
+            ...f.properties,
+            lgtd: f.geometry?.coordinates?.[0],
+            lttd: f.geometry?.coordinates?.[1]
+        }));
+        return this.addPoint(pointData, options);
+    }
+    /**
+     * P1-2：从 URL 加载点位数据并添加为高性能闪烁点图层。
+     */
+    async addPulsePointLayerByUrl(url, options) {
+        ValidationUtils.validateNonEmptyString(url, 'Pulse point url is required');
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch pulse point data: ${response.status}`);
+        }
+        const json = await response.json();
+        const pointData = Array.isArray(json) ? json : (json?.features ?? []).map((f) => ({
+            ...f.properties,
+            lgtd: f.geometry?.coordinates?.[0],
+            lttd: f.geometry?.coordinates?.[1]
+        }));
+        return this.addPulsePointLayer(pointData, options);
     }
-    // // 在流域中心添加闪烁点位
-    // 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组件为点位
      * @param pointDataList 点位信息列表
      * @param template vue组件模板
-     * @param Vue Vue实例
+     * @param options
      * @returns 返回控制对象，包含显示、隐藏、移除方法
      * @throws 当参数无效时抛出错误
      */
@@ -251,8 +303,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/point/PointOverlay.d.ts

@@ -1,13 +1,11 @@
 import Overlay from 'ol/Overlay';
 import Map from 'ol/Map';
-import type { TwinkleItem } from '../../types';
+import type { ControlHandle, TwinkleItem } from '../../types';
 /**
  * DOM 点位覆盖物构建器。
  */
 export default class PointOverlay {
-    static create(map: Map, twinkleList: TwinkleItem[], callback?: Function): {
+    static create(map: Map, twinkleList: TwinkleItem[], callback?: Function): ControlHandle<Overlay[]> & {
         anchors: Overlay[];
-        remove: () => void;
-        setVisible: (visible: boolean) => void;
     };
 }

package/core/point/PointOverlay.js

@@ -36,13 +36,14 @@ export default class PointOverlay {
             anchors.push(anchor);
         });
         return {
+            target: anchors,
             anchors,
             remove: () => {
                 anchors.forEach(anchor => {
                     anchor.getElement()?.remove();
                     map.removeOverlay(anchor);
                 });
-                anchors = [];
+                anchors.splice(0, anchors.length);
             },
             setVisible: (visible) => {
                 anchors.forEach(anchor => {

package/core/point/PointPulseLayer.js

@@ -84,7 +84,7 @@ export default class PointPulseLayer {
         });
         const createStyles = (feature) => {
             const rawData = feature.get('rawData');
-            const level = rawData?.[levelKey] ?? 'default';
+            const level = String(rawData?.[levelKey] ?? 'default');
             const progress = frameIndex / Math.max(1, pulseOptions.frameCount - 1);
             const [minRadius, maxRadius] = pulseOptions.radius;
             const radius = minRadius + (maxRadius - minRadius) * progress;
@@ -110,9 +110,11 @@ export default class PointPulseLayer {
                 }
                 styles.push(pulseStyle);
             }
-            const text = options.textVisible && options.textKey && rawData ? rawData[options.textKey] ?? '' : '';
+            const text = options.textVisible && options.textKey && rawData ? String(rawData[options.textKey] ?? '') : '';
+            // P1-4: icon.img 是新名，icon.src 保留兼容（@deprecated）
+            const iconImg = options.icon?.img ?? options.icon?.src;
             const staticCacheKey = [
-                options.img ?? options.icon?.src ?? '',
+                options.img ?? iconImg ?? '',
                 options.scale ?? options.icon?.scale ?? ConfigManager.DEFAULT_POINT_ICON_SCALE,
                 options.iconColor ?? options.icon?.color ?? '',
                 text
@@ -123,7 +125,7 @@ export default class PointPulseLayer {
                 return styles;
             }
             const pointStyleOptions = {};
-            const iconSrc = options.img ?? options.icon?.src;
+            const iconSrc = options.img ?? iconImg;
             if (iconSrc) {
                 pointStyleOptions.image = new Icon({
                     src: iconSrc,

package/core/polygon/Polygon.d.ts

@@ -3,19 +3,33 @@ import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
 import { Image as ImageLayer } from "ol/layer";
 import Feature from "ol/Feature";
-import { PolygonOptions, MapJSONData, PointData, HeatMapOptions, ImageLayerData, MaskLayerOptions, FeatureColorUpdateOptions } from '../../types';
+import { PolygonOptions, MapJSONData, PointData, HeatMapOptions, ImageLayerData, MaskLayerOptions, FeatureColorUpdateOptions, LayerHandle } from '../../types';
 /**
  * Polygon 类用于处理地图上的面要素操作
  * 包括添加多边形、边框、图片图层、热力图等功能
  */
 export default class Polygon {
     private map;
-    [key: string]: any;
+    /**
+     * 由本实例创建的所有图层句柄（含 mask 子图层等）。destroyAll 时统一回收，避免地图销毁后图层泄漏。
+     */
+    private readonly managedLayers;
     /**
      * 构造函数
      * @param map OpenLayers 地图实例
      */
     constructor(map: Map);
+    /**
+     * 跟踪一个本实例创建的图层，便于销毁阶段统一清理。
+     * @internal
+     */
+    private trackLayer;
+    /** *********************统一句柄：OL 图层*********************/
+    private toLayerHandle;
+    /**
+     * 销毁本实例创建的所有图层。供 MyOl.destroy 调用。
+     */
+    destroyAll(): void;
     /**
      * 添加地图边框图层
      * @param data 图层数据，必须是有效的 GeoJSON 格式
@@ -23,7 +37,7 @@ export default class Polygon {
      * @returns 创建的图层实例
      * @throws 当数据格式无效时抛出错误
      */
-    addBorderPolygon(data: MapJSONData, options?: PolygonOptions): VectorLayer<VectorSource>;
+    addBorderPolygon(data: MapJSONData, options?: PolygonOptions): LayerHandle<VectorLayer<VectorSource>>;
     /**
      * 从URL添加地图边框图层
      * @param url 数据URL
@@ -31,7 +45,7 @@ export default class Polygon {
      * @returns 创建的图层实例
      * @throws 当数据格式无效时抛出错误
      */
-    addBorderPolygonByUrl(url: string, options?: PolygonOptions): VectorLayer<VectorSource>;
+    addBorderPolygonByUrl(url: string, options?: PolygonOptions): Promise<LayerHandle<VectorLayer<VectorSource>>>;
     /**
      * 添加多边形图层
      * @param dataJSON GeoJSON 数据
@@ -39,15 +53,16 @@ export default class Polygon {
      * @returns 创建的矢量图层
      * @throws 当数据格式无效时抛出错误
      */
-    addPolygon(dataJSON: MapJSONData, options?: PolygonOptions): VectorLayer<VectorSource>;
-    /**
-     * 从URL添加多边形图层
-     * @param url 数据URL
-     * @param options 图层配置选项
-     * @returns 创建的矢量图层
-     * @throws 当数据格式无效时抛出错误
-     */
-    addPolygonByUrl(url: string, options?: PolygonOptions): VectorLayer<VectorSource>;
+    /** *********************创建多边形图层*********************/
+    private createPolygonLayer;
+    /** *********************添加多边形图层*********************/
+    addPolygon(dataJSON: MapJSONData, options: PolygonOptions & {
+        layerName: string;
+    }): LayerHandle<VectorLayer<VectorSource>>;
+    /** *********************从 URL 添加多边形图层*********************/
+    addPolygonByUrl(url: string, options: PolygonOptions & {
+        layerName: string;
+    }): Promise<LayerHandle<VectorLayer<VectorSource>>>;
     /**
      * 适应图层视图
      * @param layer 图层对象
@@ -73,7 +88,7 @@ export default class Polygon {
      */
     setOutLayer(data: MapJSONData, options?: {
         layerName?: string;
-        extent?: any;
+        extent?: number[];
         fillColor?: string;
         strokeWidth?: number;
         strokeColor?: string;
@@ -86,13 +101,13 @@ export default class Polygon {
      * @returns 创建的图片图层
      * @throws 当数据格式无效时抛出错误
      */
-    addImageLayer(imageData: ImageLayerData, options?: PolygonOptions): ImageLayer<any>;
+    addImageLayer(imageData: ImageLayerData, options?: PolygonOptions): LayerHandle<ImageLayer<any>>;
     /**
      * 添加热力图图层
      * @param pointData 点数据数组
      * @param options 热力图配置
      */
-    addHeatmap(pointData: PointData[], options?: HeatMapOptions): import("ol/layer").Heatmap<Feature<import("ol/geom").Geometry>, VectorSource<Feature<import("ol/geom").Geometry>>>;
+    addHeatmap(pointData: PointData[], options?: HeatMapOptions): LayerHandle<import("ol/layer").Heatmap<Feature<import("ol/geom").Geometry>, VectorSource<Feature<import("ol/geom").Geometry>>>>;
     /**
      * 添加遮罩图层
      * @param data GeoJSON格式的遮罩数据
@@ -100,6 +115,6 @@ export default class Polygon {
      * @returns 创建的遮罩图层
      * @throws 当数据格式无效时抛出错误
      */
-    addMaskLayer(data: any, options?: MaskLayerOptions): VectorLayer<VectorSource>;
+    addMaskLayer(data: MapJSONData, options?: MaskLayerOptions): LayerHandle<VectorLayer<VectorSource>>;
     removePolygonLayer(layerName: string): void;
 }