my-openlayer 2.4.10 → 2.5.1

package/docs/index.md

@@ -1,78 +1,79 @@
-# My OpenLayers
-
-My OpenLayers 是一个基于 OpenLayers 的轻量级地图封装库，旨在简化地图开发流程，提供开箱即用的常用功能。它集成了点、线、面绘制，测量工具，选择交互，Vue 组件覆盖物等功能，特别优化了 Vue 项目的集成体验。
-
-## 特性
-
-- **开箱即用**: 封装了常用的地图功能，减少样板代码。
-- **Vue 集成**: 支持使用 Vue 组件作为地图覆盖物，轻松创建复杂的交互式标记。
-- **TypeScript**: 完全使用 TypeScript 编写，提供完整的类型定义。
-- **工具丰富**: 内置测量、选择、裁剪、遮罩等实用工具。
-- **扩展性强**: 提供基础类和接口，方便二次封装和扩展。
-
-## 安装
-
-```bash
-npm install my-openlayer
-# 或者
-yarn add my-openlayer
-# 或者
-pnpm add my-openlayer
-```
-
-## 快速开始
-
-```typescript
-import { MyOl } from 'my-openlayer';
-import 'ol/ol.css'; // 引入 OpenLayers 样式
-
-// 初始化地图
-const map = new MyOl('map-container', {
-  center: [120.2, 30.3],
-  zoom: 12,
-  projection: 'EPSG:4326'
-});
-
-// 获取原生 Map 实例
-const olMap = map.map;
-
-// 添加一个点
-const point = map.getPoint();
-point.addPoint([{
-  lgtd: 120.2,
-  lttd: 30.3,
-  style: {
-    icon: 'path/to/icon.png'
-  }
-}]);
-```
-
-## 核心模块
-
-- **[MyOl](./MyOl.md)**: 核心入口类，负责地图初始化和模块管理。
-- **[Point](./Point.md)**: 点位管理，支持图标、文本、聚合等。
-- **[Line](./Line.md)**: 线条绘制，支持不同样式和动画。
-- **[Polygon](./Polygon.md)**: 多边形绘制，支持遮罩、热力图等。
-- **[VueTemplatePoint](./VueTemplatePoint.md)**: 使用 Vue 组件作为地图点位覆盖物。
-
-## 工具模块
-
-- **[MapTools](./MapTools.md)**: 通用地图工具，如裁剪、定位、导出图片等。
-- **[MeasureHandler](./MeasureHandler.md)**: 距离和面积测量工具。
-- **[SelectHandler](./SelectHandler.md)**: 要素选择交互工具。
-- **[MapBaseLayers](./MapBaseLayers.md)**: 底图切换和管理。
-
-## 基础设施
-
-- **[ConfigManager](./ConfigManager.md)**: 全局配置管理。
-- **[EventManager](./EventManager.md)**: 统一事件管理系统。
-- **[ErrorHandler](./ErrorHandler.md)**: 错误处理和日志系统。
-- **[ValidationUtils](./ValidationUtils.md)**: 参数验证工具。
-
-## 贡献
-
-欢迎提交 Issue 和 Pull Request！
-
-## 许可证
-
-MIT License
+# My OpenLayers
+
+My OpenLayers 是一个基于 OpenLayers 的轻量级地图封装库，旨在简化地图开发流程，提供开箱即用的常用功能。它集成了点、线、面绘制，测量工具，选择交互，Vue 组件覆盖物等功能，特别优化了 Vue 项目的集成体验。
+
+## 特性
+
+- **开箱即用**: 封装了常用的地图功能，减少样板代码。
+- **Vue 集成**: 支持使用 Vue 组件作为地图覆盖物，轻松创建复杂的交互式标记。
+- **TypeScript**: 完全使用 TypeScript 编写，提供完整的类型定义。
+- **工具丰富**: 内置测量、选择、裁剪、遮罩等实用工具。
+- **高性能闪烁点**: 基于 `VectorLayer` 和单个 `requestAnimationFrame` 渲染大量预警点位，避免 DOM 动画卡顿。
+- **扩展性强**: 提供基础类和接口，方便二次封装和扩展。
+
+## 安装
+
+```bash
+npm install my-openlayer
+# 或者
+yarn add my-openlayer
+# 或者
+pnpm add my-openlayer
+```
+
+## 快速开始
+
+```typescript
+import { MyOl } from 'my-openlayer';
+import 'ol/ol.css'; // 引入 OpenLayers 样式
+
+// 初始化地图
+const map = new MyOl('map-container', {
+  center: [120.2, 30.3],
+  zoom: 12,
+  projection: 'EPSG:4326'
+});
+
+// 获取原生 Map 实例
+const olMap = map.map;
+
+// 添加一个点
+const point = map.getPoint();
+point.addPoint([{
+  lgtd: 120.2,
+  lttd: 30.3,
+  style: {
+    icon: 'path/to/icon.png'
+  }
+}]);
+```
+
+## 核心模块
+
+- **[MyOl](./MyOl.md)**: 核心入口类，负责地图初始化和模块管理。
+- **[Point](./Point.md)**: 点位管理，支持图标、文本、聚合、高性能闪烁点等。
+- **[Line](./Line.md)**: 线条绘制，支持不同样式和动画。
+- **[Polygon](./Polygon.md)**: 多边形绘制，支持遮罩、热力图等。
+- **[VueTemplatePoint](./VueTemplatePoint.md)**: 使用 Vue 组件作为地图点位覆盖物。
+
+## 工具模块
+
+- **[MapTools](./MapTools.md)**: 通用地图工具，如裁剪、定位、导出图片等。
+- **[MeasureHandler](./MeasureHandler.md)**: 距离和面积测量工具。
+- **[SelectHandler](./SelectHandler.md)**: 要素选择交互工具。
+- **[MapBaseLayers](./MapBaseLayers.md)**: 底图切换和管理。
+
+## 基础设施
+
+- **[ConfigManager](./ConfigManager.md)**: 全局配置管理。
+- **[EventManager](./EventManager.md)**: 统一事件管理系统。
+- **[ErrorHandler](./ErrorHandler.md)**: 错误处理和日志系统。
+- **[ValidationUtils](./ValidationUtils.md)**: 参数验证工具。
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 许可证
+
+MIT License

package/index.d.ts

@@ -1,21 +1,16 @@
 export { default } from './MyOl';
 export { default as MyOl } from './MyOl';
-export { default as Point } from './core/Point';
-export { default as Line } from './core/Line';
-export { default as Polygon } from './core/Polygon';
-export { default as MapBaseLayers } from './core/MapBaseLayers';
-export { default as MapTools } from './core/MapTools';
-export { default as MeasureHandler } from './core/MeasureHandler';
-export { default as VueTemplatePoint } from './core/VueTemplatePoint';
-export { default as SelectHandler } from './core/SelectHandler';
-export { default as RiverLayerManager } from './core/RiverLayerManager';
-export type { RiverLayerOptions, RiverLevelWidthMap } from './core/RiverLayerManager';
-export { ConfigManager } from './core/ConfigManager';
-export { EventManager } from './core/EventManager';
-export type { MapEventType, EventCallback, MapEventData } from './core/EventManager';
+export { Point } from './core/point';
+export { Line, RiverLayerManager } from './core/line';
+export type { RiverLayerOptions, RiverLevelWidthMap } from './core/line';
+export { Polygon } from './core/polygon';
+export { MapBaseLayers, MapTools, MeasureHandler, ConfigManager, EventManager } from './core/map';
+export { VueTemplatePoint } from './core/vue-template-point';
+export { SelectHandler } from './core/select';
+export type { MapEventType, EventCallback, MapEventData } from './core/map/EventManager';
 export { ErrorHandler, MyOpenLayersError, ErrorType } from './utils/ErrorHandler';
-export { ValidationUtils } from './utils/ValidationUtils';
+export { default as ValidationUtils } from './utils/ValidationUtils';
 export type { BaseOptions, StyleOptions, TextOptions } from './types';
-export type { PointOptions, LineOptions, PolygonOptions } 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, 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, MapJSONData, FeatureData, AnnotationType, TiandituType, MapLayers, AnnotationLayerOptions, SelectOptions, SelectMode, SelectCallbackEvent, ProgrammaticSelectOptions } from './types';

package/index.js

@@ -1,19 +1,13 @@
 // 导出核心类 - 默认导出
 export { default } from './MyOl';
 export { default as MyOl } from './MyOl';
-export { default as Point } from './core/Point';
-export { default as Line } from './core/Line';
-export { default as Polygon } from './core/Polygon';
-export { default as MapBaseLayers } from './core/MapBaseLayers';
-export { default as MapTools } from './core/MapTools';
-export { default as MeasureHandler } from './core/MeasureHandler';
-export { default as VueTemplatePoint } from './core/VueTemplatePoint';
-export { default as SelectHandler } from './core/SelectHandler';
-export { default as RiverLayerManager } from './core/RiverLayerManager';
-// 新增工具类
-export { ConfigManager } from './core/ConfigManager';
-export { EventManager } from './core/EventManager';
+export { Point } from './core/point';
+export { Line, RiverLayerManager } from './core/line';
+export { Polygon } from './core/polygon';
+export { MapBaseLayers, MapTools, MeasureHandler, ConfigManager, EventManager } from './core/map';
+export { VueTemplatePoint } from './core/vue-template-point';
+export { SelectHandler } from './core/select';
 // 错误处理
 export { ErrorHandler, MyOpenLayersError, ErrorType } from './utils/ErrorHandler';
 // 验证工具
-export { ValidationUtils } from './utils/ValidationUtils';
+export { default as ValidationUtils } from './utils/ValidationUtils';

package/package.json

@@ -1,11 +1,17 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "2.4.10",
+  "version": "2.5.1",
   "type": "module",
   "license": "MIT",
   "main": "index.js",
   "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    }
+  },
   "keywords": [
     "openlayers",
     "ol",
@@ -32,6 +38,9 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run",
     "preview": "vite preview",
     "prepare-publish": "node scripts/prepare-publish.cjs",
     "publish-flat": "npm run build && npm run prepare-publish && cd temp-publish && npm publish",
@@ -50,6 +59,7 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "typescript": "~5.6.2",
     "vite": "^5.4.10",
+    "vitest": "^2.1.9",
     "vite-plugin-css-modules": "^0.0.1",
     "vite-plugin-libcss": "^1.1.1",
     "vitepress": "^1.6.4",

package/types/base.d.ts

@@ -0,0 +1,47 @@
+import Feature, { FeatureLike } from "ol/Feature";
+import { Style } from "ol/style";
+import type { MapJSONData } from "./common";
+/**
+ * 基础选项接口 - 所有图层的公共配置。
+ */
+export interface BaseOptions {
+    layerName?: string;
+    zIndex?: number;
+    visible?: boolean;
+    opacity?: number;
+    fitView?: boolean;
+    mapClip?: boolean;
+    mapClipData?: MapJSONData;
+    dataProjection?: string;
+    featureProjection?: string;
+    /**
+     * @deprecated 新项目请使用 dataProjection / featureProjection。
+     */
+    projectionOptOptions?: any;
+    style?: Style | Style[] | ((feature: FeatureLike) => Style | Style[]);
+}
+/**
+ * 图形样式相关配置。
+ */
+export interface StyleOptions {
+    strokeColor?: string | number[];
+    strokeWidth?: number;
+    lineDash?: number[];
+    lineDashOffset?: number;
+    fillColor?: string;
+    fillColorCallBack?: (feature: Feature) => string;
+    withDefaultStroke?: boolean;
+    withDefaultFill?: boolean;
+}
+/**
+ * 文本标注相关配置。
+ */
+export interface TextOptions {
+    textVisible?: boolean;
+    textCallBack?: (feature: Feature) => string;
+    textFont?: string;
+    textFillColor?: string;
+    textStrokeColor?: string;
+    textStrokeWidth?: number;
+    textOffsetY?: number;
+}

package/types/base.js

@@ -0,0 +1 @@
+export {};

package/types/common.d.ts

@@ -0,0 +1,59 @@
+/**
+ * 通用 GeoJSON 数据结构定义。
+ */
+export interface FeatureData {
+    type: string;
+    properties: any;
+    geometry: {
+        type: "Polygon" | "MultiPolygon" | "Point" | "LineString" | "MultiLineString" | "MultiPoint" | "GeometryCollection";
+        coordinates: any[];
+    };
+}
+/**
+ * 通用 GeoJSON 集合结构。
+ */
+export interface MapJSONData {
+    type: string;
+    name?: string;
+    features: FeatureData[];
+}
+export type MeasureHandlerType = 'LineString' | 'Polygon';
+export type EventType = 'click' | 'hover' | 'moveend';
+/**
+ * 兼容性类型别名 - 保持向后兼容。
+ * @deprecated 请使用具体的选项接口：PointOptions, LineOptions, PolygonOptions
+ */
+export type OptionsType = {
+    layerName?: string;
+    zIndex?: number;
+    visible?: boolean;
+    opacity?: number;
+    fitView?: boolean;
+    mapClip?: boolean;
+    mapClipData?: MapJSONData;
+    dataProjection?: string;
+    featureProjection?: string;
+    projectionOptOptions?: any;
+    style?: any;
+    strokeColor?: string | number[];
+    strokeWidth?: number;
+    lineDash?: number[];
+    lineDashOffset?: number;
+    fillColor?: string;
+    fillColorCallBack?: (feature: any) => string;
+    withDefaultStroke?: boolean;
+    withDefaultFill?: boolean;
+    textVisible?: boolean;
+    textCallBack?: (feature: any) => string;
+    textFont?: string;
+    textFillColor?: string;
+    textStrokeColor?: string;
+    textStrokeWidth?: number;
+    textOffsetY?: number;
+    textKey?: string;
+    img?: string;
+    scale?: number;
+    iconColor?: string;
+    type?: string;
+    mask?: boolean;
+};

package/types/common.js

@@ -0,0 +1 @@
+export {};

package/types/index.d.ts

@@ -0,0 +1,9 @@
+export type { BaseOptions, StyleOptions, TextOptions } from './base';
+export type { FeatureData, MapJSONData, OptionsType, MeasureHandlerType, EventType } from './common';
+export type { MapInitType, MapLayersOptions, MapLayers, AnnotationType, TiandituType, AnnotationLayerOptions, HeatMapOptions, ImageLayerData, MaskLayerOptions } from './map';
+export type { PointOptions, PointData, ClusterOptions, PulsePointIconOptions, PulsePointOptions, PulsePointLayerHandle, TwinkleItem } from './point';
+export type { LineOptions, LineData, FlowLineOptions, FlowLineLayerHandle } from './line';
+export type { PolygonOptions, FeatureColorUpdateOptions } from './polygon';
+export type { SelectOptions, SelectMode, SelectCallbackEvent, ProgrammaticSelectOptions } from './select';
+export type { VueInstance, VueApp, VueLegacyInstance, VueTemplatePointOptions, VueTemplatePointInstance } from './vue-template-point';
+export { VueTemplatePointState } from './vue-template-point';

package/types/index.js

@@ -0,0 +1 @@
+export { VueTemplatePointState } from './vue-template-point';

package/types/line.d.ts

@@ -0,0 +1,41 @@
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import type { BaseOptions, StyleOptions, TextOptions } from "./base";
+import type { MapJSONData } from "./common";
+export interface LineOptions extends BaseOptions, StyleOptions, TextOptions {
+    type?: string;
+}
+export interface LineData {
+    type: string;
+    coordinates: number[][];
+    [key: string]: any;
+}
+export interface FlowLineOptions extends LineOptions {
+    loop?: boolean;
+    autoStart?: boolean;
+    duration?: number;
+    speed?: number;
+    showBaseLine?: boolean;
+    animationMode?: 'icon' | 'dash' | 'icon+dash';
+    flowSymbol?: {
+        src?: string;
+        scale?: number;
+        color?: string;
+        rotateWithView?: boolean;
+        count?: number;
+        spacing?: number;
+    };
+    trailEnabled?: boolean;
+    trailLength?: number;
+}
+export interface FlowLineLayerHandle {
+    layer: VectorLayer<VectorSource>;
+    animationLayer: VectorLayer<VectorSource>;
+    start: () => void;
+    pause: () => void;
+    resume: () => void;
+    stop: () => void;
+    setVisible: (visible: boolean) => void;
+    updateData: (data: MapJSONData) => void;
+    remove: () => void;
+}

package/types/line.js

@@ -0,0 +1 @@
+export {};

package/types/map.d.ts

@@ -0,0 +1,77 @@
+import BaseLayer from "ol/layer/Base";
+import TileLayer from "ol/layer/Tile";
+import { WMTS } from "ol/source";
+import View from "ol/View";
+import { Units } from "ol/proj/Units";
+import type { MapJSONData } from "./common";
+type LayerItem = BaseLayer | TileLayer<WMTS>;
+export interface MapInitType {
+    layers?: LayerItem[] | {
+        [key: string]: LayerItem[];
+    };
+    zoom?: number;
+    center?: number[];
+    view?: View;
+    minZoom?: number;
+    maxZoom?: number;
+    extent?: number[];
+    mapClipData?: MapJSONData;
+    token?: string;
+    annotation?: boolean;
+    enableLog?: boolean;
+    logLevel?: 'debug' | 'info' | 'warn' | 'error';
+    projection?: {
+        code: string;
+        def?: string;
+        extent?: number[];
+        worldExtent?: number[];
+        units?: Units;
+    };
+}
+export type AnnotationType = 'cva_c' | 'cia_c' | 'cta_c';
+export type TiandituType = 'vec_c' | 'img_c' | 'ter_c';
+export interface MapLayers {
+    vec_c?: BaseLayer[];
+    img_c?: BaseLayer[];
+    ter_c?: BaseLayer[];
+    [key: string]: BaseLayer[] | undefined;
+}
+export interface MapLayersOptions {
+    layers?: BaseLayer[] | MapLayers;
+    zIndex?: number;
+    mapClip?: boolean;
+    mapClipData?: MapJSONData;
+    token?: string;
+    annotation?: boolean;
+}
+export interface AnnotationLayerOptions {
+    type: AnnotationType;
+    token: string;
+    zIndex?: number;
+    visible?: boolean;
+}
+export interface HeatMapOptions {
+    layerName?: string;
+    radius?: number;
+    blur?: number;
+    gradient?: string[];
+    opacity?: number;
+    visible?: boolean;
+    zIndex?: number;
+    valueKey?: string;
+}
+export interface ImageLayerData {
+    img?: string;
+    extent?: number[];
+}
+export interface MaskLayerOptions {
+    extent?: any;
+    fillColor?: string;
+    strokeWidth?: number;
+    strokeColor?: string;
+    zIndex?: number;
+    opacity?: number;
+    visible?: boolean;
+    layerName?: string;
+}
+export {};

package/types/map.js

@@ -0,0 +1 @@
+export {};

package/types/point.d.ts

@@ -0,0 +1,54 @@
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import type { BaseOptions, StyleOptions, TextOptions } from "./base";
+export interface PointOptions extends BaseOptions, StyleOptions, TextOptions {
+    textKey?: string;
+    img?: string;
+    scale?: number;
+    iconColor?: string;
+}
+export interface PointData {
+    lgtd: number;
+    lttd: number;
+    [key: string]: any;
+}
+export interface ClusterOptions extends PointOptions {
+    distance?: number;
+    minDistance?: number;
+}
+export interface PulsePointIconOptions {
+    src?: string;
+    scale?: number;
+    color?: string;
+    radius?: number;
+    fillColor?: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+}
+export interface PulsePointOptions extends PointOptions {
+    levelKey?: string;
+    icon?: PulsePointIconOptions;
+    pulse?: {
+        enabled?: boolean;
+        duration?: number;
+        radius?: [number, number];
+        colorMap?: Record<string | number, string>;
+        strokeColorMap?: Record<string | number, string>;
+        strokeWidth?: number;
+        frameCount?: number;
+    };
+}
+export interface PulsePointLayerHandle {
+    layer: VectorLayer<VectorSource>;
+    source: VectorSource;
+    start: () => void;
+    stop: () => void;
+    setVisible: (visible: boolean) => void;
+    updateData: (data: PointData[]) => void;
+    remove: () => void;
+}
+export interface TwinkleItem extends PointData {
+    className?: string;
+    element?: HTMLElement | ((item: TwinkleItem) => HTMLElement);
+    [key: string]: any;
+}

package/types/point.js

@@ -0,0 +1 @@
+export {};

package/types/polygon.d.ts

@@ -0,0 +1,8 @@
+import type { BaseOptions, StyleOptions, TextOptions } from "./base";
+export interface PolygonOptions extends BaseOptions, StyleOptions, TextOptions {
+    textKey?: string;
+    mask?: boolean;
+}
+export interface FeatureColorUpdateOptions extends BaseOptions, StyleOptions, TextOptions {
+    textKey?: string;
+}

package/types/polygon.js

@@ -0,0 +1 @@
+export {};

package/types/select.d.ts

@@ -0,0 +1,25 @@
+import type { FeatureLike } from "ol/Feature";
+import MapBrowserEvent from "ol/MapBrowserEvent";
+import { Style } from "ol/style";
+export type SelectMode = 'click' | 'hover' | 'ctrl';
+export interface SelectCallbackEvent {
+    selected: FeatureLike[];
+    deselected: FeatureLike[];
+    mapBrowserEvent: MapBrowserEvent<any>;
+}
+export interface SelectOptions {
+    multi?: boolean;
+    layerFilter?: string[];
+    featureFilter?: (feature: FeatureLike) => boolean;
+    hitTolerance?: number;
+    selectStyle?: Style | Style[] | ((feature: FeatureLike) => Style | Style[]);
+    onSelect?: (event: SelectCallbackEvent) => void;
+    onDeselect?: (event: SelectCallbackEvent) => void;
+}
+export interface ProgrammaticSelectOptions {
+    layerName?: string;
+    selectStyle?: Style | Style[] | ((feature: FeatureLike) => Style | Style[]);
+    fitView?: boolean;
+    fitDuration?: number;
+    fitPadding?: number;
+}

package/types/select.js

@@ -0,0 +1 @@
+export {};