my-openlayer 2.4.12 → 2.5.1

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, PulsePointOptions, PulsePointLayerHandle } from '../types';
+import { PointOptions, ClusterOptions, PointData, VueTemplatePointInstance, TwinkleItem, PulsePointOptions, PulsePointLayerHandle } from '../../types';
 export default class Point {
     private map;
     constructor(map: Map);
@@ -37,16 +36,6 @@ export default class Point {
      * @returns 样式对象
      */
     private createClusterStyle;
-    /**
-     * 将颜色透明度按动画进度衰减。
-     * @private
-     */
-    private withOpacity;
-    /**
-     * 创建高性能闪烁点要素。
-     * @private
-     */
-    private createPulsePointFeatures;
     /**
      * 配置图层属性
      * @private
@@ -78,7 +67,7 @@ export default class Point {
      * @param callback
      */
     addDomPoint(twinkleList: TwinkleItem[], callback?: Function): {
-        anchors: Overlay[];
+        anchors: import('ol/Overlay').default[];
         remove: () => void;
         setVisible: (visible: boolean) => void;
     };
@@ -107,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/Point.js

@@ -0,0 +1,272 @@
+"use strict";
+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 { 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;
+    }
+    /**
+     * 创建文本样式
+     * @private
+     * @param options 选项
+     * @param text 文本内容
+     * @returns 文本样式
+     */
+    createTextStyle(options, text) {
+        const defaultTextOptions = ConfigManager.DEFAULT_POINT_TEXT_OPTIONS;
+        return new Text({
+            text: text,
+            font: options.textFont || defaultTextOptions.textFont,
+            fill: new Fill({
+                color: options.textFillColor || defaultTextOptions.textFillColor
+            }),
+            stroke: new Stroke({
+                color: options.textStrokeColor || defaultTextOptions.textStrokeColor,
+                width: options.textStrokeWidth || defaultTextOptions.textStrokeWidth
+            }),
+            offsetY: options.textOffsetY || defaultTextOptions.textOffsetY,
+        });
+    }
+    /**
+     * 创建图标样式
+     * @private
+     * @param options 选项
+     * @returns 图标样式
+     */
+    createIconStyle(options) {
+        const iconOptions = {
+            src: options.img,
+            scale: options.scale ?? ConfigManager.DEFAULT_POINT_ICON_SCALE,
+        };
+        if (options.iconColor) {
+            iconOptions.color = options.iconColor;
+        }
+        return new Icon(iconOptions);
+    }
+    /**
+     * 创建点样式
+     * @private
+     * @param options 选项
+     * @param item 数据项
+     * @returns 样式对象
+     */
+    createPointStyle(options, item) {
+        const style = {};
+        if (options.textKey && item) {
+            style.text = this.createTextStyle(options, item[options.textKey]);
+        }
+        if (options.img) {
+            style.image = this.createIconStyle(options);
+        }
+        return new Style(style);
+    }
+    /**
+     * 创建集群样式
+     * @private
+     * @param options 选项
+     * @param name 名称
+     * @returns 样式对象
+     */
+    createClusterStyle(options, name) {
+        const style = {};
+        if (options.textKey) {
+            style.text = this.createTextStyle(options, name);
+        }
+        if (options.img) {
+            style.image = this.createIconStyle(options);
+        }
+        return new Style(style);
+    }
+    /**
+     * 配置图层属性
+     * @private
+     * @param layer 图层
+     * @param options 选项
+     */
+    configureLayer(layer, options) {
+        layer.setVisible(options.visible === undefined ? true : options.visible);
+        this.map.addLayer(layer);
+    }
+    /**
+     *
+     * @param pointData
+     * @param type
+     * @param options {
+     *   textKey: String 数据中的文本的key
+     *   img: String 图标
+     * }
+     */
+    addPoint(pointData, options) {
+        if (!ValidationUtils.validatePointData(pointData)) {
+            return null;
+        }
+        const pointFeatureList = [];
+        pointData.forEach((item) => {
+            if (!ValidationUtils.validateCoordinates(item)) {
+                return;
+            }
+            const pointFeature = new Feature({
+                rawData: item,
+                type: options.layerName,
+                layerName: options.layerName,
+                geometry: new olPoint(ProjectionUtils.transformCoordinate([item.lgtd, item.lttd], options))
+            });
+            if (options.style) {
+                if (typeof options.style === 'function') {
+                    pointFeature.setStyle(options.style(pointFeature));
+                }
+                else {
+                    pointFeature.setStyle(options.style);
+                }
+            }
+            else {
+                pointFeature.setStyle(this.createPointStyle(options, item));
+            }
+            pointFeatureList.push(pointFeature);
+        });
+        const PointVectorLayer = new VectorLayer({
+            layerName: options.layerName,
+            source: new VectorSource({
+                features: pointFeatureList
+            }),
+            zIndex: options.zIndex || ConfigManager.DEFAULT_POINT_OPTIONS.zIndex,
+        });
+        this.configureLayer(PointVectorLayer, options);
+        return PointVectorLayer;
+    }
+    addClusterPoint(pointData, options) {
+        if (!ValidationUtils.validatePointData(pointData)) {
+            return null;
+        }
+        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) {
+    //   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);
+    }
+    /**
+     * 添加vue组件为点位
+     * @param pointDataList 点位信息列表
+     * @param template vue组件模板
+     * @param Vue Vue实例
+     * @returns 返回控制对象，包含显示、隐藏、移除方法
+     * @throws 当参数无效时抛出错误
+     */
+    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');
+        }
+        try {
+            const vueTemplatePoint = new VueTemplatePoint(this.map);
+            return vueTemplatePoint.addVueTemplatePoint(pointDataList, template, options);
+        }
+        catch (error) {
+            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, 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;
+}