my-openlayer 2.4.10 → 2.5.1

package/core/{MapBaseLayers.js → map/MapBaseLayers.js}

@@ -10,9 +10,9 @@ import { TileWMS } from "ol/source";
 import WMTSTileGrid from "ol/tilegrid/WMTS";
 import XYZ from "ol/source/XYZ";
 import MapTools from "./MapTools";
-import { ErrorHandler, ErrorType } from "../utils/ErrorHandler";
-import { ValidationUtils } from "../utils/ValidationUtils";
-import { ConfigManager } from "./ConfigManager";
+import { ErrorHandler, ErrorType } from "../../utils/ErrorHandler";
+import ValidationUtils from "../../utils/ValidationUtils";
+import ConfigManager from "./ConfigManager";
 const TIANDITU_TYPES = ['vec_c', 'img_c', 'ter_c'];
 const CUSTOM_LAYER_KEY = '__custom__';
 /**
@@ -69,20 +69,18 @@ export default class MapBaseLayers {
      */
     initializeLayers() {
         const { layers, token, annotation } = this.options;
+        this.layers = {};
+        if (token) {
+            this.initTiandituLayers();
+        }
         // 初始化底图配置
         if (Array.isArray(layers)) {
-            this.layers = { [CUSTOM_LAYER_KEY]: layers };
+            this.layers[CUSTOM_LAYER_KEY] = layers;
         }
         else if (layers && Object.keys(layers).length > 0) {
-            this.layers = layers;
-        }
-        else if (token) {
-            // 如果没有提供layers但提供了token，则初始化标准天地图
-            this.initTiandituLayers();
-        }
-        else {
-            this.layers = {};
+            this.layers = { ...this.layers, ...layers };
         }
+        // 如果没有提供layers但提供了token，则初始化标准天地图
         // 初始化注记配置
         if (annotation) {
             this.initAnnotationLayer();

package/core/{MapTools.d.ts → map/MapTools.d.ts}

@@ -1,5 +1,5 @@
 import Map from "ol/Map";
-import { 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";
@@ -70,7 +70,10 @@ export default class MapTools {
      * @param duration 动画时长
      * @returns 定位是否成功
      */
-    locationAction(lgtd: number, lttd: number, zoom?: number, duration?: number): boolean;
+    locationAction(lgtd: number, lttd: number, zoom?: number, duration?: number, projection?: {
+        dataProjection?: string;
+        featureProjection?: string;
+    }): boolean;
     /**
      * 获取地图实例
      * @returns 地图实例

package/core/{MapTools.js → map/MapTools.js}

@@ -1,8 +1,9 @@
 "use strict";
 import VectorSource from "ol/source/Vector";
 import GeoJSON from "ol/format/GeoJSON";
-import { ErrorHandler, ErrorType } from "../utils/ErrorHandler";
-import { ValidationUtils } from "../utils/ValidationUtils";
+import { ErrorHandler, ErrorType } from "../../utils/ErrorHandler";
+import ValidationUtils from "../../utils/ValidationUtils";
+import ProjectionUtils from "../../utils/ProjectionUtils";
 import { createEmpty, extend, isEmpty } from "ol/extent";
 /**
  * 地图工具类
@@ -181,15 +182,20 @@ class MapTools {
      * @param duration 动画时长
      * @returns 定位是否成功
      */
-    locationAction(lgtd, lttd, zoom = 20, duration = 3000) {
+    locationAction(lgtd, lttd, zoom = 20, duration = 3000, projection) {
         if (!this.map) {
             throw new Error('Map instance is not available');
         }
-        if (!ValidationUtils.validateLngLat(lgtd, lttd)) {
+        const hasProjection = !!projection?.dataProjection || !!projection?.featureProjection;
+        const isValidCoordinate = hasProjection
+            ? typeof lgtd === 'number' && typeof lttd === 'number' && Number.isFinite(lgtd) && Number.isFinite(lttd)
+            : ValidationUtils.validateLngLat(lgtd, lttd);
+        if (!isValidCoordinate) {
             return false;
         }
         try {
-            this.map.getView().animate({ center: [lgtd, lttd], zoom, duration });
+            const center = ProjectionUtils.transformCoordinate([lgtd, lttd], projection);
+            this.map.getView().animate({ center, zoom, duration });
             return true;
         }
         catch (error) {

package/core/{MeasureHandler.d.ts → map/MeasureHandler.d.ts}

@@ -1,5 +1,5 @@
 import Map from "ol/Map";
-import { MeasureHandlerType } from "../types";
+import { MeasureHandlerType } from "../../types";
 /**
  * 测量工具处理类
  * 提供距离和面积测量功能

package/core/{MeasureHandler.js → map/MeasureHandler.js}

@@ -6,8 +6,8 @@ import { Vector as VectorSource } from 'ol/source.js';
 import { Vector as VectorLayer } from 'ol/layer.js';
 import { getArea, getLength } from 'ol/sphere.js';
 import { unByKey } from 'ol/Observable.js';
-import { ValidationUtils } from '../utils/ValidationUtils';
-import { ErrorHandler } from '../utils/ErrorHandler';
+import ValidationUtils from '../../utils/ValidationUtils';
+import { ErrorHandler } from '../../utils/ErrorHandler';
 /**
  * 测量工具处理类
  * 提供距离和面积测量功能
@@ -322,45 +322,45 @@ export default class MeasureHandler {
         }
         const style = document.createElement('style');
         style.id = styleId;
-        style.innerHTML = `
-      .ol-tooltip {
-        position: relative;
-        background: rgba(0, 0, 0, 0.5);
-        border-radius: 4px;
-        color: white;
-        padding: 4px 8px;
-        opacity: 0.7;
-        white-space: nowrap;
-        font-size: 12px;
-        cursor: default;
-        user-select: none;
-        border: 1px solid #cccccc;
-        text-shadow: 1px 1px 2px #000;
-      }
-      .ol-tooltip-measure {
-        opacity: 1;
-        font-weight: bold;
-      }
-      .ol-tooltip-static {
-        background-color: #ffcc33;
-        color: black;
-        border: 1px solid white;
-        text-shadow: none;
-      }
-      .ol-tooltip-measure:before,
-      .ol-tooltip-static:before {
-        border-top: 6px solid rgba(0, 0, 0, 0.5);
-        border-right: 6px solid transparent;
-        border-left: 6px solid transparent;
-        content: "";
-        position: absolute;
-        bottom: -6px;
-        margin-left: -7px;
-        left: 50%;
-      }
-      .ol-tooltip-static:before {
-        border-top-color: #ffcc33;
-      }
+        style.innerHTML = `
+      .ol-tooltip {
+        position: relative;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 4px;
+        color: white;
+        padding: 4px 8px;
+        opacity: 0.7;
+        white-space: nowrap;
+        font-size: 12px;
+        cursor: default;
+        user-select: none;
+        border: 1px solid #cccccc;
+        text-shadow: 1px 1px 2px #000;
+      }
+      .ol-tooltip-measure {
+        opacity: 1;
+        font-weight: bold;
+      }
+      .ol-tooltip-static {
+        background-color: #ffcc33;
+        color: black;
+        border: 1px solid white;
+        text-shadow: none;
+      }
+      .ol-tooltip-measure:before,
+      .ol-tooltip-static:before {
+        border-top: 6px solid rgba(0, 0, 0, 0.5);
+        border-right: 6px solid transparent;
+        border-left: 6px solid transparent;
+        content: "";
+        position: absolute;
+        bottom: -6px;
+        margin-left: -7px;
+        left: 50%;
+      }
+      .ol-tooltip-static:before {
+        border-top-color: #ffcc33;
+      }
     `;
         document.head.appendChild(style);
     }

package/core/map/index.d.ts

@@ -0,0 +1,5 @@
+export { default as MapTools } from './MapTools';
+export { default as MapBaseLayers } from './MapBaseLayers';
+export { default as MeasureHandler } from './MeasureHandler';
+export { default as EventManager } from './EventManager';
+export { default as ConfigManager } from './ConfigManager';

package/core/map/index.js

@@ -0,0 +1,5 @@
+export { default as MapTools } from './MapTools';
+export { default as MapBaseLayers } from './MapBaseLayers';
+export { default as MeasureHandler } from './MeasureHandler';
+export { default as EventManager } from './EventManager';
+export { default as ConfigManager } from './ConfigManager';

package/core/{Point.d.ts → point/Point.d.ts}

@@ -1,8 +1,7 @@
 import Map from "ol/Map";
-import Overlay from 'ol/Overlay';
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
-import { PointOptions, ClusterOptions, PointData, VueTemplatePointInstance, TwinkleItem } from '../types';
+import { PointOptions, ClusterOptions, PointData, VueTemplatePointInstance, TwinkleItem, PulsePointOptions, PulsePointLayerHandle } from '../../types';
 export default class Point {
     private map;
     constructor(map: Map);
@@ -55,13 +54,20 @@ export default class Point {
      */
     addPoint(pointData: PointData[], options: PointOptions): VectorLayer<VectorSource> | null;
     addClusterPoint(pointData: PointData[], options: ClusterOptions): VectorLayer<VectorSource> | null;
+    /**
+     * 添加高性能闪烁点图层。
+     *
+     * 与 addDomPoint 不同，该方法使用 VectorLayer 批量渲染点位，并通过单个
+     * requestAnimationFrame 驱动闪烁圈，适合村庄预警等大量点位场景。
+     */
+    addPulsePointLayer(pointData: PointData[], options: PulsePointOptions): PulsePointLayerHandle | null;
     /**
      * 添加闪烁点
      * @param twinkleList 闪烁点数据
      * @param callback
      */
     addDomPoint(twinkleList: TwinkleItem[], callback?: Function): {
-        anchors: Overlay[];
+        anchors: import('ol/Overlay').default[];
         remove: () => void;
         setVisible: (visible: boolean) => void;
     };
@@ -90,5 +96,8 @@ export default class Point {
    * @param zoom 缩放级别
    * @param duration 动画时长
    */
-    locationAction(lgtd: number, lttd: number, zoom?: number, duration?: number): boolean;
+    locationAction(lgtd: number, lttd: number, zoom?: number, duration?: number, projection?: {
+        dataProjection?: string;
+        featureProjection?: string;
+    }): boolean;
 }

package/core/{Point.js → point/Point.js}

@@ -1,15 +1,16 @@
 "use strict";
-import Overlay from 'ol/Overlay';
 import Feature from "ol/Feature";
 import { Point as olPoint } from "ol/geom";
 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 VueTemplatePoint from './VueTemplatePoint';
-import { ValidationUtils } from '../utils/ValidationUtils';
-import MapTools from './MapTools';
-import { ConfigManager } from "./ConfigManager";
+import { VueTemplatePoint } from '../vue-template-point';
+import ValidationUtils from '../../utils/ValidationUtils';
+import ProjectionUtils from '../../utils/ProjectionUtils';
+import { ConfigManager, MapTools } from "../map";
+import PointClusterLayer from './PointClusterLayer';
+import PointOverlay from './PointOverlay';
+import PointPulseLayer from './PointPulseLayer';
 export default class Point {
     constructor(map) {
         this.map = map;
@@ -118,7 +119,7 @@ export default class Point {
                 rawData: item,
                 type: options.layerName,
                 layerName: options.layerName,
-                geometry: new olPoint([item.lgtd, item.lttd])
+                geometry: new olPoint(ProjectionUtils.transformCoordinate([item.lgtd, item.lttd], options))
             });
             if (options.style) {
                 if (typeof options.style === 'function') {
@@ -147,47 +148,19 @@ export default class Point {
         if (!ValidationUtils.validatePointData(pointData)) {
             return null;
         }
-        const pointFeatureList = [];
-        pointData.forEach(item => {
-            if (!ValidationUtils.validateCoordinates(item)) {
-                return;
-            }
-            const pointFeature = new Feature({
-                type: options.layerName,
-                layerName: options.layerName,
-                geometry: new olPoint([item.lgtd, item.lttd]),
-                name: options.textKey ? item[options.textKey] : '',
-                rawData: item,
-            });
-            pointFeatureList.push(pointFeature);
-        });
-        const source = new VectorSource({
-            features: pointFeatureList,
-        });
-        const clusterSource = new Cluster({
-            distance: options.distance || ConfigManager.DEFAULT_CLUSTER_OPTIONS.distance, // The distance for clustering in pixels
-            minDistance: options.minDistance || ConfigManager.DEFAULT_CLUSTER_OPTIONS.minDistance,
-            source: source,
-        });
-        const clusterLayer = new VectorLayer({
-            layerName: options.layerName,
-            source: clusterSource,
-            style: (feature) => {
-                if (options.style) {
-                    if (typeof options.style === 'function') {
-                        return options.style(feature);
-                    }
-                    else {
-                        return options.style;
-                    }
-                }
-                const name = feature.get('features')[0].get('name');
-                return this.createClusterStyle(options, name);
-            },
-            zIndex: options.zIndex || ConfigManager.DEFAULT_CLUSTER_OPTIONS.zIndex,
-        });
-        this.configureLayer(clusterLayer, options);
-        return clusterLayer;
+        return PointClusterLayer.create(this.map, pointData, options, this.createClusterStyle.bind(this));
+    }
+    /**
+     * 添加高性能闪烁点图层。
+     *
+     * 与 addDomPoint 不同，该方法使用 VectorLayer 批量渲染点位，并通过单个
+     * requestAnimationFrame 驱动闪烁圈，适合村庄预警等大量点位场景。
+     */
+    addPulsePointLayer(pointData, options) {
+        if (!ValidationUtils.validatePointData(pointData)) {
+            return null;
+        }
+        return PointPulseLayer.create(this.map, pointData, options);
     }
     // // 在流域中心添加闪烁点位
     // addTwinkleLayerFromPolygon(twinkleList: any[], className: string, key: string, json: MapJSONData, options?: PolygonOptions) {
@@ -260,68 +233,7 @@ export default class Point {
      * @param callback
      */
     addDomPoint(twinkleList, callback) {
-        let anchors = [];
-        twinkleList.forEach(twinkleItem => {
-            let element;
-            // 创建或获取DOM元素
-            if (twinkleItem.element) {
-                if (typeof twinkleItem.element === 'function') {
-                    element = twinkleItem.element(twinkleItem);
-                }
-                else {
-                    element = twinkleItem.element;
-                }
-                // 如果有className，追加到自定义元素
-                if (twinkleItem.className) {
-                    const classes = twinkleItem.className.split(/\s+/).filter(Boolean);
-                    if (classes.length > 0) {
-                        element.classList.add(...classes);
-                    }
-                }
-            }
-            else {
-                element = document.createElement('div');
-                element.className = twinkleItem.className || '';
-            }
-            // 添加点击事件
-            if (callback) {
-                element.addEventListener('click', () => {
-                    callback(twinkleItem);
-                });
-            }
-            // 创建一个覆盖物
-            const anchor = new Overlay({
-                element: element,
-                positioning: ConfigManager.DEFAULT_DOM_POINT_OVERLAY_OPTIONS.positioning,
-                stopEvent: ConfigManager.DEFAULT_DOM_POINT_OVERLAY_OPTIONS.stopEvent // 允许事件穿透，但我们在上面阻止了冒泡
-            });
-            // 关键的一点，需要设置附加到地图上的位置
-            anchor.setPosition([twinkleItem.lgtd, twinkleItem.lttd]);
-            // 然后添加到map上
-            this.map.addOverlay(anchor);
-            anchors.push(anchor);
-        });
-        return {
-            anchors,
-            remove: () => {
-                anchors.forEach(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';
-                    }
-                });
-            }
-        };
+        return PointOverlay.create(this.map, twinkleList, callback);
     }
     /**
      * 添加vue组件为点位
@@ -354,7 +266,7 @@ export default class Point {
    * @param zoom 缩放级别
    * @param duration 动画时长
    */
-    locationAction(lgtd, lttd, zoom = 20, duration = 3000) {
-        return new MapTools(this.map).locationAction(lgtd, lttd, zoom, duration);
+    locationAction(lgtd, lttd, zoom = 20, duration = 3000, projection) {
+        return new MapTools(this.map).locationAction(lgtd, lttd, zoom, duration, projection);
     }
 }

package/core/point/PointClusterLayer.d.ts

@@ -0,0 +1,10 @@
+import Map from "ol/Map";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import type { ClusterOptions, PointData } from "../../types";
+/**
+ * 点聚合图层构建器。
+ */
+export default class PointClusterLayer {
+    static create(map: Map, pointData: PointData[], options: ClusterOptions, createClusterStyle: (options: ClusterOptions, name: string) => any): VectorLayer<VectorSource>;
+}

package/core/point/PointClusterLayer.js

@@ -0,0 +1,52 @@
+import Feature from "ol/Feature";
+import { Point as OlPoint } from "ol/geom";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import { Cluster } from "ol/source";
+import ProjectionUtils from "../../utils/ProjectionUtils";
+import ValidationUtils from "../../utils/ValidationUtils";
+import { ConfigManager } from "../map";
+/**
+ * 点聚合图层构建器。
+ */
+export default class PointClusterLayer {
+    static create(map, pointData, options, createClusterStyle) {
+        const pointFeatureList = [];
+        pointData.forEach(item => {
+            if (!ValidationUtils.validateCoordinates(item)) {
+                return;
+            }
+            pointFeatureList.push(new Feature({
+                type: options.layerName,
+                layerName: options.layerName,
+                geometry: new OlPoint(ProjectionUtils.transformCoordinate([item.lgtd, item.lttd], options)),
+                name: options.textKey ? item[options.textKey] : '',
+                rawData: item,
+            }));
+        });
+        const source = new VectorSource({ features: pointFeatureList });
+        const clusterSource = new Cluster({
+            distance: options.distance || ConfigManager.DEFAULT_CLUSTER_OPTIONS.distance,
+            minDistance: options.minDistance || ConfigManager.DEFAULT_CLUSTER_OPTIONS.minDistance,
+            source,
+        });
+        const clusterLayer = new VectorLayer({
+            layerName: options.layerName,
+            source: clusterSource,
+            style: (feature) => {
+                if (options.style) {
+                    if (typeof options.style === 'function') {
+                        return options.style(feature);
+                    }
+                    return options.style;
+                }
+                const name = feature.get('features')[0].get('name');
+                return createClusterStyle(options, name);
+            },
+            zIndex: options.zIndex || ConfigManager.DEFAULT_CLUSTER_OPTIONS.zIndex,
+        });
+        clusterLayer.setVisible(options.visible === undefined ? true : options.visible);
+        map.addLayer(clusterLayer);
+        return clusterLayer;
+    }
+}

package/core/point/PointOverlay.d.ts

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

package/core/point/PointOverlay.js

@@ -0,0 +1,57 @@
+import Overlay from 'ol/Overlay';
+import { ConfigManager } from '../map';
+/**
+ * DOM 点位覆盖物构建器。
+ */
+export default class PointOverlay {
+    static create(map, twinkleList, callback) {
+        let anchors = [];
+        twinkleList.forEach(twinkleItem => {
+            let element;
+            if (twinkleItem.element) {
+                element = typeof twinkleItem.element === 'function'
+                    ? twinkleItem.element(twinkleItem)
+                    : twinkleItem.element;
+                if (twinkleItem.className) {
+                    const classes = twinkleItem.className.split(/\s+/).filter(Boolean);
+                    if (classes.length > 0) {
+                        element.classList.add(...classes);
+                    }
+                }
+            }
+            else {
+                element = document.createElement('div');
+                element.className = twinkleItem.className || '';
+            }
+            if (callback) {
+                element.addEventListener('click', () => callback(twinkleItem));
+            }
+            const anchor = new Overlay({
+                element,
+                positioning: ConfigManager.DEFAULT_DOM_POINT_OVERLAY_OPTIONS.positioning,
+                stopEvent: ConfigManager.DEFAULT_DOM_POINT_OVERLAY_OPTIONS.stopEvent
+            });
+            anchor.setPosition([twinkleItem.lgtd, twinkleItem.lttd]);
+            map.addOverlay(anchor);
+            anchors.push(anchor);
+        });
+        return {
+            anchors,
+            remove: () => {
+                anchors.forEach(anchor => {
+                    anchor.getElement()?.remove();
+                    map.removeOverlay(anchor);
+                });
+                anchors = [];
+            },
+            setVisible: (visible) => {
+                anchors.forEach(anchor => {
+                    const element = anchor.getElement();
+                    if (element) {
+                        element.style.display = visible ? '' : 'none';
+                    }
+                });
+            }
+        };
+    }
+}

package/core/point/PointPulseLayer.d.ts

@@ -0,0 +1,13 @@
+import Feature from "ol/Feature";
+import Map from "ol/Map";
+import { Text } from "ol/style";
+import type { PointData, PulsePointLayerHandle, PulsePointOptions } from "../../types";
+/**
+ * 高性能闪烁点图层构建器。
+ */
+export default class PointPulseLayer {
+    static createTextStyle(options: PulsePointOptions, text: string): Text;
+    static withOpacity(color: string, opacity: number): string;
+    static createFeatures(pointData: PointData[], options: PulsePointOptions): Feature[];
+    static create(map: Map, pointData: PointData[], options: PulsePointOptions): PulsePointLayerHandle;
+}