my-openlayer 2.1.11 → 2.2.0

package/core/MapTools.d.ts

@@ -62,6 +62,15 @@ export default class MapTools {
      * @throws 当参数无效时抛出错误
      */
     static setLayerVisible: (map: Map, layerName: string, visible: boolean) => void;
+    /**
+     * 地图定位
+     * @param lgtd 经度
+     * @param lttd 纬度
+     * @param zoom 缩放级别
+     * @param duration 动画时长
+     * @returns 定位是否成功
+     */
+    locationAction(lgtd: number, lttd: number, zoom?: number, duration?: number): boolean;
     /**
      * 获取地图实例
      * @returns 地图实例

package/core/MapTools.js

@@ -189,6 +189,30 @@ class MapTools {
             throw new Error('Failed to set layer visibility');
         }
     }
+    /**
+     * 地图定位
+     * @param lgtd 经度
+     * @param lttd 纬度
+     * @param zoom 缩放级别
+     * @param duration 动画时长
+     * @returns 定位是否成功
+     */
+    locationAction(lgtd, lttd, zoom = 20, duration = 3000) {
+        if (!this.map) {
+            throw new Error('Map instance is not available');
+        }
+        if (!ValidationUtils.validateLngLat(lgtd, lttd)) {
+            return false;
+        }
+        try {
+            this.map.getView().animate({ center: [lgtd, lttd], zoom, duration });
+            return true;
+        }
+        catch (error) {
+            this.errorHandler.error('[地图定位]', '定位失败:', error);
+            return false;
+        }
+    }
     /**
      * 获取地图实例
      * @returns 地图实例

package/core/Point.d.ts

@@ -1,7 +1,8 @@
 import Map from "ol/Map";
+import Overlay from 'ol/Overlay';
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
-import { MapJSONData, PointOptions, ClusterOptions, PointData, VueTemplatePointInstance } from '../types';
+import { PointOptions, ClusterOptions, PointData, VueTemplatePointInstance, TwinkleItem } from '../types';
 export default class Point {
     private map;
     constructor(map: Map);
@@ -54,27 +55,16 @@ export default class Point {
      */
     addPoint(pointData: PointData[], options: PointOptions): VectorLayer<VectorSource> | null;
     addClusterPoint(pointData: PointData[], options: ClusterOptions): VectorLayer<VectorSource> | null;
-    addTwinkleLayerFromPolygon(twinkleList: any[], className: string, key: string, json: MapJSONData): void;
     /**
      * 添加闪烁点
-     * @param twinkleList 闪烁点数据 - 二维数组 [[]，[]]
-     * @param className 闪烁点样式,需要和id保持一致
-     * @param key 闪烁点索引
+     * @param twinkleList 闪烁点数据
      * @param callback
      */
-    addTwinkleLayer(twinkleList: any[], className: string | undefined, key: string, callback?: Function): void;
-    /**
-     * 地图定位
-     * @param lgtd 经度
-     * @param lttd 纬度
-     * @param zoom 缩放级别
-     * @param duration 动画时长
-     */
-    locationAction(lgtd: number, lttd: number, zoom?: number, duration?: number): boolean;
-    /**
-     * 设置dom元素为点位
-     */
-    addDomPoint(id: string, lgtd: number, lttd: number): boolean;
+    addDomPoint(twinkleList: TwinkleItem[], callback?: Function): {
+        anchors: Overlay[];
+        remove: () => void;
+        setVisible: (visible: boolean) => void;
+    };
     /**
      * 添加vue组件为点位
      * @param pointDataList 点位信息列表
@@ -92,4 +82,13 @@ export default class Point {
         remove: () => void;
         getPoints: () => VueTemplatePointInstance[];
     };
+    /**
+   * 地图定位
+   * @deprecated 请使用 MapTools.locationAction 方法代替
+   * @param lgtd 经度
+   * @param lttd 纬度
+   * @param zoom 缩放级别
+   * @param duration 动画时长
+   */
+    locationAction(lgtd: number, lttd: number, zoom?: number, duration?: number): boolean;
 }

package/core/Point.js

@@ -6,12 +6,9 @@ import { Text, Style, Fill, Stroke, Icon } from "ol/style";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
 import { Cluster } from 'ol/source';
-import * as turf from '@turf/turf';
-import GeoJSON from "ol/format/GeoJSON";
 import VueTemplatePoint from './VueTemplatePoint';
-import MapTools from "./MapTools";
 import { ValidationUtils } from '../utils/ValidationUtils';
-import { ErrorHandler } from '../utils/ErrorHandler';
+import MapTools from './MapTools';
 export default class Point {
     constructor(map) {
         this.map = map;
@@ -179,160 +176,122 @@ export default class Point {
         this.configureLayer(clusterLayer, options);
         return clusterLayer;
     }
-    // 在流域中心添加闪烁点位
-    addTwinkleLayerFromPolygon(twinkleList, className, key, json) {
-        new MapTools(this.map).removeLayer('twinklePoint');
-        // 计算多边形的中心点坐标
-        const calculatePolygonCenter = (polygonCoordinates) => {
-            const polygon = turf.polygon(polygonCoordinates[0]);
-            const centroid = turf.centroid(polygon);
-            return centroid.geometry.coordinates;
-        };
-        const features = json.features;
-        const vectorSource = new VectorSource({
-            format: new GeoJSON(),
-        });
-        twinkleList.forEach(item => {
-            const feature = features.find((ele) => {
-                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) {
-                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
-        });
-        this.map.addLayer(basinLayer);
-        this.addTwinkleLayer(twinkleList, className, key, (twinkleItem) => {
-        });
-    }
+    // // 在流域中心添加闪烁点位
+    // 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 className 闪烁点样式,需要和id保持一致
-     * @param key 闪烁点索引
+     * @param twinkleList 闪烁点数据
      * @param callback
      */
-    addTwinkleLayer(twinkleList, className = 'marker_warning', key, callback) {
-        // 查找class是warn-points的dom，并删除
-        const arr = document.getElementsByClassName(className);
-        const l = arr.length;
-        for (let i = l - 1; i >= 0; i--) {
-            if (arr[i] !== null) {
-                arr[i].parentNode?.removeChild(arr[i]);
+    addDomPoint(twinkleList, callback) {
+        let anchors = [];
+        twinkleList.forEach(twinkleItem => {
+            // 创建DOM元素
+            const element = document.createElement('div');
+            element.className = twinkleItem.className || '';
+            // 添加点击事件
+            if (callback) {
+                element.addEventListener('click', () => {
+                    callback(twinkleItem);
+                });
             }
-        }
-        const el = document.getElementById(className);
-        for (let i = 0; i < twinkleList.length; i++) {
-            const twinkleItem = twinkleList[i];
-            // 定义图标Dom
-            const el2 = document.createElement('div');
-            el2.id = className + i;
-            el2.className = className + twinkleItem[key];
-            el2.onclick = () => {
-                callback && callback(twinkleItem);
-                // bus.emit('twinkleClick', twinkleItem)
-            };
-            // 插入图标
-            if (el)
-                el.insertAdjacentElement('afterend', el2);
             // 创建一个覆盖物
             const anchor = new Overlay({
-                element: document.getElementById(className + i) || undefined,
+                element: element,
                 positioning: 'center-center',
-                className: className
+                stopEvent: false // 允许事件穿透，但我们在上面阻止了冒泡
             });
             // 关键的一点，需要设置附加到地图上的位置
             anchor.setPosition([twinkleItem.lgtd, twinkleItem.lttd]);
             // 然后添加到map上
             this.map.addOverlay(anchor);
-        }
-    }
-    /**
-     * 地图定位
-     * @param lgtd 经度
-     * @param lttd 纬度
-     * @param zoom 缩放级别
-     * @param duration 动画时长
-     */
-    locationAction(lgtd, lttd, zoom = 20, duration = 3000) {
-        if (!ValidationUtils.validateLngLat(lgtd, lttd)) {
-            return false;
-        }
-        try {
-            this.map.getView().animate({ center: [lgtd, lttd], zoom, duration });
-            return true;
-        }
-        catch (error) {
-            ErrorHandler.getInstance().error('[地图定位]', '定位失败:', error);
-            return false;
-        }
-    }
-    /**
-     * 设置dom元素为点位
-     */
-    addDomPoint(id, lgtd, lttd) {
-        if (!id) {
-            ErrorHandler.getInstance().error('Element ID is required');
-            return false;
-        }
-        if (!ValidationUtils.validateLngLat(lgtd, lttd)) {
-            return false;
-        }
-        const el = document.getElementById(id);
-        if (!el) {
-            ErrorHandler.getInstance().error(`Element with id '${id}' not found`);
-            return false;
-        }
-        try {
-            const anchor = new Overlay({
-                id: id,
-                element: el,
-                positioning: 'center-center',
-                stopEvent: false
-            });
-            anchor.setPosition([lgtd, lttd]);
-            this.map.addOverlay(anchor);
-            return true;
-        }
-        catch (error) {
-            ErrorHandler.getInstance().error('Failed to set DOM point:', error);
-            return false;
-        }
+            anchors.push(anchor);
+        });
+        return {
+            anchors,
+            remove: () => {
+                anchors.forEach(anchor => {
+                    console.log('Removing overlay:', anchor);
+                    const element = anchor.getElement();
+                    if (element) {
+                        element.remove();
+                    }
+                    this.map.removeOverlay(anchor);
+                });
+                anchors = [];
+            },
+            setVisible: (visible) => {
+                anchors.forEach(anchor => {
+                    const element = anchor.getElement();
+                    if (element) {
+                        element.style.display = visible ? '' : 'none';
+                    }
+                });
+            }
+        };
     }
     /**
      * 添加vue组件为点位
@@ -357,4 +316,15 @@ export default class Point {
             throw new Error(`Failed to create Vue template points: ${error}`);
         }
     }
+    /**
+   * 地图定位
+   * @deprecated 请使用 MapTools.locationAction 方法代替
+   * @param lgtd 经度
+   * @param lttd 纬度
+   * @param zoom 缩放级别
+   * @param duration 动画时长
+   */
+    locationAction(lgtd, lttd, zoom = 20, duration = 3000) {
+        return new MapTools(this.map).locationAction(lgtd, lttd, zoom, duration);
+    }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "2.1.11",
+  "version": "2.2.0",
   "type": "module",
   "main": "index.js",
   "types": "index.d.ts",

package/types.d.ts

@@ -233,6 +233,13 @@ export interface ClusterOptions extends PointOptions {
     /** 最小聚合距离 */
     minDistance?: number;
 }
+/**
+ * 闪烁点数据接口
+ */
+export interface TwinkleItem extends PointData {
+    className?: string;
+    [key: string]: any;
+}
 /**
  * 测量处理器类型
  */