my-openlayer 2.4.8 → 2.4.9

package/README.md

@@ -1,156 +1,156 @@
-# my-openlayer
-
-my-openlayer 是一个基于 [OpenLayers](https://openlayers.org/) 的现代地图组件库，专为 Web GIS 应用开发者设计。提供完整的 TypeScript 支持、模块化的类型定义、强大的错误处理和事件管理系统，支持天地图底图加载、要素绘制、图层管理、事件监听等丰富功能，极大提升地图开发效率。
-
-[![npm version](https://img.shields.io/npm/v/my-openlayer.svg)](https://www.npmjs.com/package/my-openlayer)
-[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-
----
-
-## 项目概述
-
-- **项目名称**：`my-openlayer`
-- **用途**：基于 OpenLayers 的 TypeScript 地图组件库，提供点/线/面要素、底图切换、热力图、事件与配置管理等能力。
-- **目标用户**：Web GIS 开发者、可视化工程师、前端开发者
-
-## 功能亮点
-
-- **🗺️ 底图管理 (MapBaseLayers)**
-  - 支持天地图矢量、影像、地形底图切换
-  - 动态切换底图与注记图层管理
-  - 地图裁剪与自定义范围显示
-  - 支持 GeoServer WMS 图层
-
-- **📍 要素操作**
-  - **点位管理 (Point)**：点位标注（自定义图标、聚合、闪烁）
-  - **线要素绘制 (Line)**：线要素绘制（虚线、样式自定义）
-  - **面要素 (Polygon)**：面要素绘制、分区高亮、遮罩层
-  - **Vue组件支持 (VueTemplatePoint)**：支持将 Vue 组件作为地图点位渲染
-  - **河流图层 (RiverLayerManager)**：支持分级显示的河流图层管理
-
-- **🛠️ 地图工具**
-  - **测量工具 (MeasureHandler)**：距离和面积测量
-  - **要素选择 (SelectHandler)**：支持点击、悬停、多选等交互选择
-  - **地图工具 (MapTools)**：图层管理、定位、视图自适应
-  - **事件管理 (EventManager)**：统一的地图事件监听与管理
-
-- **⚡ 高级特性**
-  - **TypeScript 完全支持**：提供完整的类型定义
-  - **错误处理 (ErrorHandler)**：统一的错误捕获与日志
-  - **配置管理 (ConfigManager)**：集中管理默认配置
-  - **坐标系支持**：内置 CGCS2000 坐标系支持
-
-## 安装
-
-```bash
-npm install my-openlayer
-# 或
-yarn add my-openlayer
-# 或
-pnpm add my-openlayer
-```
-
-### 依赖要求
-
-- **Node.js**: >= 18
-- **OpenLayers**: ^10.6.1
-- **proj4**: ^2.7.5
-- **@turf/turf**: ^7.2.0
-
-## 快速上手
-
-### 1. 初始化地图
-
-```typescript
-import MyOl, { MapInitType } from 'my-openlayer';
-
-const mapConfig: MapInitType = {
-  center: [119.81, 29.969],
-  zoom: 10,
-  token: import.meta.env.VITE_TIANDITU_TOKEN, // 天地图 Token
-  annotation: true
-};
-
-const map = new MyOl('map-container', mapConfig);
-```
-
-### 2. 使用功能模块
-
-```typescript
-// 获取模块实例
-const point = map.getPoint();
-const line = map.getLine();
-const polygon = map.getPolygon();
-
-// 添加点位
-point.addPoint([{ lgtd: 119.81, lttd: 29.969, name: '示例点' }], {
-  layerName: 'example-point',
-  img: 'marker.png'
-});
-```
-
-## 文档索引
-
-为了提供更详细的说明，我们将文档拆分为独立的模块文件：
-
-### 核心类库
-- **[MyOl](docs/MyOl.md)**: 地图入口类，负责初始化和模块访问。
-- **[MapBaseLayers](docs/MapBaseLayers.md)**: 底图与注记管理。
-- **[ConfigManager](docs/ConfigManager.md)**: 配置管理。
-- **[EventManager](docs/EventManager.md)**: 事件管理。
-- **[ErrorHandler](docs/ErrorHandler.md)**: 错误处理。
-
-### 要素操作
-- **[Point](docs/Point.md)**: 点要素（含聚合、DOM点位）。
-- **[Line](docs/Line.md)**: 线要素。
-- **[Polygon](docs/Polygon.md)**: 面要素（含热力图、图片层）。
-- **[VueTemplatePoint](docs/VueTemplatePoint.md)**: Vue 组件点位。
-- **[RiverLayerManager](docs/RiverLayerManager.md)**: 河流图层管理。
-
-### 交互与工具
-- **[SelectHandler](docs/SelectHandler.md)**: 要素选择交互（支持独立样式渲染、多选隔离）。
-- **[MeasureHandler](docs/MeasureHandler.md)**: 测量工具。
-- **[MapTools](docs/MapTools.md)**: 通用地图工具。
-- **[ValidationUtils](docs/ValidationUtils.md)**: 验证工具。
-
-## 详细用法示例
-
-### 底图切换
-
-```typescript
-const baseLayers = map.getMapBaseLayers();
-baseLayers.switchBaseLayer('img_c'); // 切换到影像底图
-```
-
-### 测量工具
-
-```typescript
-import { MeasureHandler } from 'my-openlayer';
-
-// 需要传入原生的 OpenLayers map 实例
-const measure = new MeasureHandler(map.map);
-
-measure.start('LineString'); // 开始测距
-measure.end(); // 结束测量
-```
-
-> 注意：部分高级功能（如 SelectHandler）可以通过 `map.getSelectHandler()` 访问。
-
-## 贡献指南
-
-欢迎提交 Issue 或 Pull Request！
-
-1. Fork 本仓库
-2. 新建分支：`git checkout -b feature/your-feature`
-3. 提交更改：`git commit -m 'feat: 新功能描述'`
-4. 推送分支：`git push origin feature/your-feature`
-5. 提交 Pull Request
-
-## 许可证
-
-[MIT](LICENSE)
-
----
-
-**联系方式**: 2364184627@qq.com | [GitHub Issues](https://github.com/cuteyuchen/my-openlayer/issues)
+# my-openlayer
+
+my-openlayer 是一个基于 [OpenLayers](https://openlayers.org/) 的现代地图组件库，专为 Web GIS 应用开发者设计。提供完整的 TypeScript 支持、模块化的类型定义、强大的错误处理和事件管理系统，支持天地图底图加载、要素绘制、图层管理、事件监听等丰富功能，极大提升地图开发效率。
+
+[![npm version](https://img.shields.io/npm/v/my-openlayer.svg)](https://www.npmjs.com/package/my-openlayer)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## 项目概述
+
+- **项目名称**：`my-openlayer`
+- **用途**：基于 OpenLayers 的 TypeScript 地图组件库，提供点/线/面要素、底图切换、热力图、事件与配置管理等能力。
+- **目标用户**：Web GIS 开发者、可视化工程师、前端开发者
+
+## 功能亮点
+
+- **🗺️ 底图管理 (MapBaseLayers)**
+  - 支持天地图矢量、影像、地形底图切换
+  - 动态切换底图与注记图层管理
+  - 地图裁剪与自定义范围显示
+  - 支持 GeoServer WMS 图层
+
+- **📍 要素操作**
+  - **点位管理 (Point)**：点位标注（自定义图标、聚合、闪烁）
+  - **线要素绘制 (Line)**：线要素绘制（虚线、样式自定义）
+  - **面要素 (Polygon)**：面要素绘制、分区高亮、遮罩层
+  - **Vue组件支持 (VueTemplatePoint)**：支持将 Vue 组件作为地图点位渲染
+  - **河流图层 (RiverLayerManager)**：支持分级显示的河流图层管理
+
+- **🛠️ 地图工具**
+  - **测量工具 (MeasureHandler)**：距离和面积测量
+  - **要素选择 (SelectHandler)**：支持点击、悬停、多选等交互选择
+  - **地图工具 (MapTools)**：图层管理、定位、视图自适应
+  - **事件管理 (EventManager)**：统一的地图事件监听与管理
+
+- **⚡ 高级特性**
+  - **TypeScript 完全支持**：提供完整的类型定义
+  - **错误处理 (ErrorHandler)**：统一的错误捕获与日志
+  - **配置管理 (ConfigManager)**：集中管理默认配置
+  - **坐标系支持**：内置 CGCS2000 坐标系支持
+
+## 安装
+
+```bash
+npm install my-openlayer
+# 或
+yarn add my-openlayer
+# 或
+pnpm add my-openlayer
+```
+
+### 依赖要求
+
+- **Node.js**: >= 18
+- **OpenLayers**: ^10.6.1
+- **proj4**: ^2.7.5
+- **@turf/turf**: ^7.2.0
+
+## 快速上手
+
+### 1. 初始化地图
+
+```typescript
+import MyOl, { MapInitType } from 'my-openlayer';
+
+const mapConfig: MapInitType = {
+  center: [119.81, 29.969],
+  zoom: 10,
+  token: import.meta.env.VITE_TIANDITU_TOKEN, // 天地图 Token
+  annotation: true
+};
+
+const map = new MyOl('map-container', mapConfig);
+```
+
+### 2. 使用功能模块
+
+```typescript
+// 获取模块实例
+const point = map.getPoint();
+const line = map.getLine();
+const polygon = map.getPolygon();
+
+// 添加点位
+point.addPoint([{ lgtd: 119.81, lttd: 29.969, name: '示例点' }], {
+  layerName: 'example-point',
+  img: 'marker.png'
+});
+```
+
+## 文档索引
+
+为了提供更详细的说明，我们将文档拆分为独立的模块文件：
+
+### 核心类库
+- **[MyOl](docs/MyOl.md)**: 地图入口类，负责初始化和模块访问。
+- **[MapBaseLayers](docs/MapBaseLayers.md)**: 底图与注记管理。
+- **[ConfigManager](docs/ConfigManager.md)**: 配置管理。
+- **[EventManager](docs/EventManager.md)**: 事件管理。
+- **[ErrorHandler](docs/ErrorHandler.md)**: 错误处理。
+
+### 要素操作
+- **[Point](docs/Point.md)**: 点要素（含聚合、DOM点位）。
+- **[Line](docs/Line.md)**: 线要素。
+- **[Polygon](docs/Polygon.md)**: 面要素（含热力图、图片层）。
+- **[VueTemplatePoint](docs/VueTemplatePoint.md)**: Vue 组件点位。
+- **[RiverLayerManager](docs/RiverLayerManager.md)**: 河流图层管理。
+
+### 交互与工具
+- **[SelectHandler](docs/SelectHandler.md)**: 要素选择交互（支持独立样式渲染、多选隔离）。
+- **[MeasureHandler](docs/MeasureHandler.md)**: 测量工具。
+- **[MapTools](docs/MapTools.md)**: 通用地图工具。
+- **[ValidationUtils](docs/ValidationUtils.md)**: 验证工具。
+
+## 详细用法示例
+
+### 底图切换
+
+```typescript
+const baseLayers = map.getMapBaseLayers();
+baseLayers.switchBaseLayer('img_c'); // 切换到影像底图
+```
+
+### 测量工具
+
+```typescript
+import { MeasureHandler } from 'my-openlayer';
+
+// 需要传入原生的 OpenLayers map 实例
+const measure = new MeasureHandler(map.map);
+
+measure.start('LineString'); // 开始测距
+measure.end(); // 结束测量
+```
+
+> 注意：部分高级功能（如 SelectHandler）可以通过 `map.getSelectHandler()` 访问。
+
+## 贡献指南
+
+欢迎提交 Issue 或 Pull Request！
+
+1. Fork 本仓库
+2. 新建分支：`git checkout -b feature/your-feature`
+3. 提交更改：`git commit -m 'feat: 新功能描述'`
+4. 推送分支：`git push origin feature/your-feature`
+5. 提交 Pull Request
+
+## 许可证
+
+[MIT](LICENSE)
+
+---
+
+**联系方式**: 2364184627@qq.com | [GitHub Issues](https://github.com/cuteyuchen/my-openlayer/issues)

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
+    };
+  }
+}
+```