my-openlayer 2.4.8 → 2.4.10

package/core/Point.js

@@ -262,9 +262,27 @@ export default class Point {
     addDomPoint(twinkleList, callback) {
         let anchors = [];
         twinkleList.forEach(twinkleItem => {
-            // 创建DOM元素
-            const element = document.createElement('div');
-            element.className = twinkleItem.className || '';
+            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', () => {

package/docs/.vitepress/config.mts

@@ -1,57 +1,57 @@
-import { defineConfig } from 'vitepress'
-
-export default defineConfig({
-  base: '/my-openlayer/',
-  title: "MyOpenLayer",
-  description: "基于 OpenLayers 的现代地图组件库",
-  lang: 'zh-CN',
-  themeConfig: {
-    nav: [
-      { text: '首页', link: '/' },
-      { text: '指南', link: '/MyOl' },
-      { text: 'API', link: '/MyOl' },
-      { text: 'GitHub', link: 'https://github.com/cuteyuchen/my-openlayer' }
-    ],
-
-    sidebar: [
-      {
-        text: '核心类库',
-        items: [
-          { text: 'MyOl 地图入口', link: '/MyOl' },
-          { text: 'MapBaseLayers 底图管理', link: '/MapBaseLayers' },
-          { text: 'ConfigManager 配置管理', link: '/ConfigManager' },
-          { text: 'EventManager 事件管理', link: '/EventManager' },
-          { text: 'ErrorHandler 错误处理', link: '/ErrorHandler' }
-        ]
-      },
-      {
-        text: '要素操作',
-        items: [
-          { text: 'Point 点要素', link: '/Point' },
-          { text: 'Line 线要素', link: '/Line' },
-          { text: 'Polygon 面要素', link: '/Polygon' },
-          { text: 'VueTemplatePoint Vue点位', link: '/VueTemplatePoint' },
-          { text: 'RiverLayerManager 河流图层', link: '/RiverLayerManager' }
-        ]
-      },
-      {
-        text: '交互与工具',
-        items: [
-          { text: 'SelectHandler 要素选择', link: '/SelectHandler' },
-          { text: 'MeasureHandler 测量工具', link: '/MeasureHandler' },
-          { text: 'MapTools 地图工具', link: '/MapTools' },
-          { text: 'ValidationUtils 验证工具', link: '/ValidationUtils' }
-        ]
-      }
-    ],
-
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/cuteyuchen/my-openlayer' }
-    ],
-
-    footer: {
-      message: 'Released under the MIT License.',
-      copyright: 'Copyright © 2024-present'
-    }
-  }
-})
+import { defineConfig } from 'vitepress'
+
+export default defineConfig({
+  base: '/my-openlayer/',
+  title: "MyOpenLayer",
+  description: "基于 OpenLayers 的现代地图组件库",
+  lang: 'zh-CN',
+  themeConfig: {
+    nav: [
+      { text: '首页', link: '/' },
+      { text: '指南', link: '/MyOl' },
+      { text: 'API', link: '/MyOl' },
+      { text: 'GitHub', link: 'https://github.com/cuteyuchen/my-openlayer' }
+    ],
+
+    sidebar: [
+      {
+        text: '核心类库',
+        items: [
+          { text: 'MyOl 地图入口', link: '/MyOl' },
+          { text: 'MapBaseLayers 底图管理', link: '/MapBaseLayers' },
+          { text: 'ConfigManager 配置管理', link: '/ConfigManager' },
+          { text: 'EventManager 事件管理', link: '/EventManager' },
+          { text: 'ErrorHandler 错误处理', link: '/ErrorHandler' }
+        ]
+      },
+      {
+        text: '要素操作',
+        items: [
+          { text: 'Point 点要素', link: '/Point' },
+          { text: 'Line 线要素', link: '/Line' },
+          { text: 'Polygon 面要素', link: '/Polygon' },
+          { text: 'VueTemplatePoint Vue点位', link: '/VueTemplatePoint' },
+          { text: 'RiverLayerManager 河流图层', link: '/RiverLayerManager' }
+        ]
+      },
+      {
+        text: '交互与工具',
+        items: [
+          { text: 'SelectHandler 要素选择', link: '/SelectHandler' },
+          { text: 'MeasureHandler 测量工具', link: '/MeasureHandler' },
+          { text: 'MapTools 地图工具', link: '/MapTools' },
+          { text: 'ValidationUtils 验证工具', link: '/ValidationUtils' }
+        ]
+      }
+    ],
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/cuteyuchen/my-openlayer' }
+    ],
+
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2024-present'
+    }
+  }
+})

package/docs/ConfigManager.md

@@ -1,71 +1,71 @@
-# ConfigManager 配置管理
-
-`ConfigManager` 类用于统一管理地图组件的默认配置和常量。它提供了一系列静态只读属性，确保整个应用中使用一致的配置默认值。
-
-## 导入
-
-```typescript
-import { ConfigManager } from 'my-openlayer';
-```
-
-## 静态属性
-
-`ConfigManager` 包含以下类别的默认配置：
-
-### 点位配置 (Point Options)
-
-| 属性名 | 类型 | 描述 | 默认值 |
-| :--- | :--- | :--- | :--- |
-| `DEFAULT_POINT_OPTIONS` | `object` | 默认点位基础配置 | `{ visible: true, zIndex: 21 }` |
-| `DEFAULT_POINT_TEXT_OPTIONS` | `object` | 默认点位文本配置 | `{ textFont: '12px Calibri,sans-serif', textFillColor: '#FFF', textStrokeColor: '#000', textStrokeWidth: 3, textOffsetY: 20 }` |
-| `DEFAULT_POINT_ICON_SCALE` | `number` | 默认图标缩放比例 | `1` |
-| `DEFAULT_CLUSTER_OPTIONS` | `object` | 默认聚合配置 | `{ distance: 40, minDistance: 0, zIndex: 21 }` |
-| `DEFAULT_DOM_POINT_OVERLAY_OPTIONS` | `object` | 默认 DOM 点覆盖物配置 | `{ positioning: 'center-center', stopEvent: false }` |
-
-### 线配置 (Line Options)
-
-| 属性名 | 类型 | 描述 | 默认值 |
-| :--- | :--- | :--- | :--- |
-| `DEFAULT_LINE_OPTIONS` | `object` | 默认线样式配置 | `{ type: 'line', strokeColor: 'rgba(3, 122, 255, 1)', strokeWidth: 2, visible: true, layerName: 'lineLayer', zIndex: 15 }` |
-
-### 面配置 (Polygon Options)
-
-| 属性名 | 类型 | 描述 | 默认值 |
-| :--- | :--- | :--- | :--- |
-| `DEFAULT_POLYGON_OPTIONS` | `object` | 默认面样式配置 | `{ zIndex: 11, visible: true, textFont: '14px Calibri,sans-serif', textFillColor: '#FFF', textStrokeColor: '#409EFF', textStrokeWidth: 2 }` |
-| `DEFAULT_POLYGON_COLOR_MAP` | `object` | 默认面颜色映射 (用于分级渲染) | `{ '0': 'rgba(255, 0, 0, 0.6)', '1': 'rgba(245, 154, 35, 0.6)', ... }` |
-
-## 使用示例
-
-### 获取默认配置
-
-```typescript
-import { ConfigManager } from 'my-openlayer';
-
-// 获取默认点位配置
-const pointOptions = {
-  ...ConfigManager.DEFAULT_POINT_OPTIONS,
-  ...ConfigManager.DEFAULT_POINT_TEXT_OPTIONS
-};
-
-// 获取默认线配置
-const lineOptions = ConfigManager.DEFAULT_LINE_OPTIONS;
-```
-
-### 在自定义组件中使用
-
-```typescript
-import { ConfigManager } from 'my-openlayer';
-
-class MyComponent {
-  private options: any;
-
-  constructor(options: any) {
-    // 合并用户配置和默认配置
-    this.options = {
-      ...ConfigManager.DEFAULT_POINT_OPTIONS,
-      ...options
-    };
-  }
-}
-```
+# ConfigManager 配置管理
+
+`ConfigManager` 类用于统一管理地图组件的默认配置和常量。它提供了一系列静态只读属性，确保整个应用中使用一致的配置默认值。
+
+## 导入
+
+```typescript
+import { ConfigManager } from 'my-openlayer';
+```
+
+## 静态属性
+
+`ConfigManager` 包含以下类别的默认配置：
+
+### 点位配置 (Point Options)
+
+| 属性名 | 类型 | 描述 | 默认值 |
+| :--- | :--- | :--- | :--- |
+| `DEFAULT_POINT_OPTIONS` | `object` | 默认点位基础配置 | `{ visible: true, zIndex: 21 }` |
+| `DEFAULT_POINT_TEXT_OPTIONS` | `object` | 默认点位文本配置 | `{ textFont: '12px Calibri,sans-serif', textFillColor: '#FFF', textStrokeColor: '#000', textStrokeWidth: 3, textOffsetY: 20 }` |
+| `DEFAULT_POINT_ICON_SCALE` | `number` | 默认图标缩放比例 | `1` |
+| `DEFAULT_CLUSTER_OPTIONS` | `object` | 默认聚合配置 | `{ distance: 40, minDistance: 0, zIndex: 21 }` |
+| `DEFAULT_DOM_POINT_OVERLAY_OPTIONS` | `object` | 默认 DOM 点覆盖物配置 | `{ positioning: 'center-center', stopEvent: false }` |
+
+### 线配置 (Line Options)
+
+| 属性名 | 类型 | 描述 | 默认值 |
+| :--- | :--- | :--- | :--- |
+| `DEFAULT_LINE_OPTIONS` | `object` | 默认线样式配置 | `{ type: 'line', strokeColor: 'rgba(3, 122, 255, 1)', strokeWidth: 2, visible: true, layerName: 'lineLayer', zIndex: 15 }` |
+
+### 面配置 (Polygon Options)
+
+| 属性名 | 类型 | 描述 | 默认值 |
+| :--- | :--- | :--- | :--- |
+| `DEFAULT_POLYGON_OPTIONS` | `object` | 默认面样式配置 | `{ zIndex: 11, visible: true, textFont: '14px Calibri,sans-serif', textFillColor: '#FFF', textStrokeColor: '#409EFF', textStrokeWidth: 2 }` |
+| `DEFAULT_POLYGON_COLOR_MAP` | `object` | 默认面颜色映射 (用于分级渲染) | `{ '0': 'rgba(255, 0, 0, 0.6)', '1': 'rgba(245, 154, 35, 0.6)', ... }` |
+
+## 使用示例
+
+### 获取默认配置
+
+```typescript
+import { ConfigManager } from 'my-openlayer';
+
+// 获取默认点位配置
+const pointOptions = {
+  ...ConfigManager.DEFAULT_POINT_OPTIONS,
+  ...ConfigManager.DEFAULT_POINT_TEXT_OPTIONS
+};
+
+// 获取默认线配置
+const lineOptions = ConfigManager.DEFAULT_LINE_OPTIONS;
+```
+
+### 在自定义组件中使用
+
+```typescript
+import { ConfigManager } from 'my-openlayer';
+
+class MyComponent {
+  private options: any;
+
+  constructor(options: any) {
+    // 合并用户配置和默认配置
+    this.options = {
+      ...ConfigManager.DEFAULT_POINT_OPTIONS,
+      ...options
+    };
+  }
+}
+```

package/docs/ErrorHandler.md

@@ -1,106 +1,106 @@
-# ErrorHandler 错误处理
-
-`ErrorHandler` 类是一个单例工具类，用于统一管理和分发应用程序中的错误。它支持不同的日志级别，并允许注册自定义错误回调。
-
-## 导入
-
-```typescript
-import { ErrorHandler, ErrorType, MyOpenLayersError } from 'my-openlayer';
-```
-
-## 枚举与类定义
-
-### ErrorType 枚举
-
-定义了系统中可能的错误类型：
-
-| 成员 | 值 | 描述 |
-| :--- | :--- | :--- |
-| `VALIDATION_ERROR` | `'VALIDATION_ERROR'` | 参数验证错误 |
-| `MAP_ERROR` | `'MAP_ERROR'` | 地图相关错误 |
-| `LAYER_ERROR` | `'LAYER_ERROR'` | 图层相关错误 |
-| `COORDINATE_ERROR` | `'COORDINATE_ERROR'` | 坐标无效错误 |
-| `DATA_ERROR` | `'DATA_ERROR'` | 数据格式错误 |
-| `COMPONENT_ERROR` | `'COMPONENT_ERROR'` | 组件内部错误 |
-
-### MyOpenLayersError 类
-
-自定义错误类，继承自 `Error`。
-
-| 属性 | 类型 | 描述 |
-| :--- | :--- | :--- |
-| `message` | `string` | 错误消息 |
-| `type` | `ErrorType` | 错误类型 |
-| `timestamp` | `Date` | 错误发生的时间戳 |
-| `context` | `any` | 错误相关的上下文数据 |
-
-## 方法
-
-### 静态方法
-
-| 方法名 | 参数 | 返回值 | 描述 |
-| :--- | :--- | :--- | :--- |
-| `getInstance()` | - | `ErrorHandler` | 获取 `ErrorHandler` 的单例实例 |
-| `validate(condition, message, context?)` | `condition: boolean`<br>`message: string`<br>`context?: any` | `void` | 验证条件，如果为 `false` 则抛出 `VALIDATION_ERROR` |
-| `validateMap(map)` | `map: any` | `void` | 验证地图实例是否存在 |
-| `validateCoordinates(longitude, latitude)` | `longitude: number`<br>`latitude: number` | `void` | 验证经纬度坐标是否有效 |
-| `validateLayerName(layerName)` | `layerName: string` | `void` | 验证图层名称是否有效 |
-| `validateData(data, dataType)` | `data: any`<br>`dataType: string` | `void` | 验证数据是否存在 |
-| `safeExecute<T>(fn, errorMessage, errorType?, context?)` | `fn: () => T`<br>`errorMessage: string`<br>`errorType?: ErrorType`<br>`context?: any` | `T` | 安全执行函数，捕获并处理异常 |
-
-### 实例方法
-
-| 方法名 | 参数 | 返回值 | 描述 |
-| :--- | :--- | :--- | :--- |
-| `setLogLevel(level)` | `level: 'debug' \| 'info' \| 'warn' \| 'error'` | `void` | 设置日志级别 |
-| `debug(...args)` | `...args: any[]` | `void` | 输出调试日志 |
-| `info(...args)` | `...args: any[]` | `void` | 输出信息日志 |
-| `warn(...args)` | `...args: any[]` | `void` | 输出警告日志 |
-| `createAndHandleError(message, type, context?)` | `message: string`<br>`type: ErrorType`<br>`context?: any` | `MyOpenLayersError` | 创建并处理错误，通知监听器 |
-
-## 使用示例
-
-### 基本验证
-
-```typescript
-import { ErrorHandler } from 'my-openlayer';
-
-function setCenter(longitude: number, latitude: number) {
-  // 验证坐标，如果不合法会自动抛出异常
-  ErrorHandler.validateCoordinates(longitude, latitude);
-  
-  // ...设置中心点逻辑
-}
-```
-
-### 捕获和处理错误
-
-```typescript
-import { ErrorHandler, ErrorType } from 'my-openlayer';
-
-try {
-  // 可能出错的代码
-  throw new Error('Something went wrong');
-} catch (error) {
-  ErrorHandler.getInstance().createAndHandleError(
-    'Operation failed',
-    ErrorType.COMPONENT_ERROR,
-    { originalError: error }
-  );
-}
-```
-
-### 安全执行函数
-
-```typescript
-import { ErrorHandler } from 'my-openlayer';
-
-const result = ErrorHandler.safeExecute(
-  () => {
-    // 危险操作
-    return JSON.parse(someJsonString);
-  },
-  'Failed to parse JSON',
-  ErrorType.DATA_ERROR
-);
-```
+# ErrorHandler 错误处理
+
+`ErrorHandler` 类是一个单例工具类，用于统一管理和分发应用程序中的错误。它支持不同的日志级别，并允许注册自定义错误回调。
+
+## 导入
+
+```typescript
+import { ErrorHandler, ErrorType, MyOpenLayersError } from 'my-openlayer';
+```
+
+## 枚举与类定义
+
+### ErrorType 枚举
+
+定义了系统中可能的错误类型：
+
+| 成员 | 值 | 描述 |
+| :--- | :--- | :--- |
+| `VALIDATION_ERROR` | `'VALIDATION_ERROR'` | 参数验证错误 |
+| `MAP_ERROR` | `'MAP_ERROR'` | 地图相关错误 |
+| `LAYER_ERROR` | `'LAYER_ERROR'` | 图层相关错误 |
+| `COORDINATE_ERROR` | `'COORDINATE_ERROR'` | 坐标无效错误 |
+| `DATA_ERROR` | `'DATA_ERROR'` | 数据格式错误 |
+| `COMPONENT_ERROR` | `'COMPONENT_ERROR'` | 组件内部错误 |
+
+### MyOpenLayersError 类
+
+自定义错误类，继承自 `Error`。
+
+| 属性 | 类型 | 描述 |
+| :--- | :--- | :--- |
+| `message` | `string` | 错误消息 |
+| `type` | `ErrorType` | 错误类型 |
+| `timestamp` | `Date` | 错误发生的时间戳 |
+| `context` | `any` | 错误相关的上下文数据 |
+
+## 方法
+
+### 静态方法
+
+| 方法名 | 参数 | 返回值 | 描述 |
+| :--- | :--- | :--- | :--- |
+| `getInstance()` | - | `ErrorHandler` | 获取 `ErrorHandler` 的单例实例 |
+| `validate(condition, message, context?)` | `condition: boolean`<br>`message: string`<br>`context?: any` | `void` | 验证条件，如果为 `false` 则抛出 `VALIDATION_ERROR` |
+| `validateMap(map)` | `map: any` | `void` | 验证地图实例是否存在 |
+| `validateCoordinates(longitude, latitude)` | `longitude: number`<br>`latitude: number` | `void` | 验证经纬度坐标是否有效 |
+| `validateLayerName(layerName)` | `layerName: string` | `void` | 验证图层名称是否有效 |
+| `validateData(data, dataType)` | `data: any`<br>`dataType: string` | `void` | 验证数据是否存在 |
+| `safeExecute<T>(fn, errorMessage, errorType?, context?)` | `fn: () => T`<br>`errorMessage: string`<br>`errorType?: ErrorType`<br>`context?: any` | `T` | 安全执行函数，捕获并处理异常 |
+
+### 实例方法
+
+| 方法名 | 参数 | 返回值 | 描述 |
+| :--- | :--- | :--- | :--- |
+| `setLogLevel(level)` | `level: 'debug' \| 'info' \| 'warn' \| 'error'` | `void` | 设置日志级别 |
+| `debug(...args)` | `...args: any[]` | `void` | 输出调试日志 |
+| `info(...args)` | `...args: any[]` | `void` | 输出信息日志 |
+| `warn(...args)` | `...args: any[]` | `void` | 输出警告日志 |
+| `createAndHandleError(message, type, context?)` | `message: string`<br>`type: ErrorType`<br>`context?: any` | `MyOpenLayersError` | 创建并处理错误，通知监听器 |
+
+## 使用示例
+
+### 基本验证
+
+```typescript
+import { ErrorHandler } from 'my-openlayer';
+
+function setCenter(longitude: number, latitude: number) {
+  // 验证坐标，如果不合法会自动抛出异常
+  ErrorHandler.validateCoordinates(longitude, latitude);
+  
+  // ...设置中心点逻辑
+}
+```
+
+### 捕获和处理错误
+
+```typescript
+import { ErrorHandler, ErrorType } from 'my-openlayer';
+
+try {
+  // 可能出错的代码
+  throw new Error('Something went wrong');
+} catch (error) {
+  ErrorHandler.getInstance().createAndHandleError(
+    'Operation failed',
+    ErrorType.COMPONENT_ERROR,
+    { originalError: error }
+  );
+}
+```
+
+### 安全执行函数
+
+```typescript
+import { ErrorHandler } from 'my-openlayer';
+
+const result = ErrorHandler.safeExecute(
+  () => {
+    // 危险操作
+    return JSON.parse(someJsonString);
+  },
+  'Failed to parse JSON',
+  ErrorType.DATA_ERROR
+);
+```