my-openlayer 2.4.8 → 2.4.9

package/docs/index.md

@@ -1,78 +1,78 @@
-# 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 编写，提供完整的类型定义。
+- **工具丰富**: 内置测量、选择、裁剪、遮罩等实用工具。
+- **扩展性强**: 提供基础类和接口，方便二次封装和扩展。
+
+## 安装
+
+```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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "2.4.8",
+  "version": "2.4.9",
   "type": "module",
   "license": "MIT",
   "main": "index.js",
@@ -26,7 +26,6 @@
     "LICENSE",
     "README.md",
     "CHANGELOG.md",
-    "AI_CONTEXT.md",
     "docs",
     "package.json"
   ],

package/types.d.ts

@@ -236,6 +236,8 @@ export interface ClusterOptions extends PointOptions {
  */
 export interface TwinkleItem extends PointData {
     className?: string;
+    /** 自定义DOM元素，可以是HTMLElement或者返回HTMLElement的函数 */
+    element?: HTMLElement | ((item: TwinkleItem) => HTMLElement);
     [key: string]: any;
 }
 /**

package/AI_CONTEXT.md

@@ -1,147 +0,0 @@
-# AI Context for my-openlayer
-
-Use this context to understand how to use the `my-openlayer` library.
-
-## Project Overview
-
-`my-openlayer` is a modern map component library based on OpenLayers, designed for Web GIS applications. It provides a modular, TypeScript-ready wrapper around OpenLayers features.
-
-- **Core Dependency**: `ol` (OpenLayers)
-- **Key Features**: Map initialization, Tianditu (天地图) support, Point/Line/Polygon management, Event handling, Selection, Measurement, Vue component markers.
-
-## Core Architecture
-
-- **MyOl**: The main entry class. Initializes the map and provides access to sub-modules.
-- **Modules** (Lazy loaded via getters):
-  - `MapBaseLayers`: Base map switching (Vector, Image, Terrain) and Annotation layers.
-  - `Point`: Point features, clusters, DOM markers.
-  - `Line`: Line features, river layers.
-  - `Polygon`: Polygon features, heatmaps, image layers, masks.
-  - `MapTools`: General tools (Zoom, Fit, Layer management).
-  - `MeasureHandler`: Distance and Area measurement.
-  - `SelectHandler`: Feature selection interaction.
-  - `EventManager`: Unified event listener management.
-- **Utils**: `ConfigManager`, `ErrorHandler`, `ValidationUtils`.
-
-## Quick Start (Minimal Example)
-
-```typescript
-import MyOl, { MapInitType } from 'my-openlayer';
-
-// 1. Configuration
-const config: MapInitType = {
-  target: 'map-container', // ID of the DIV
-  center: [119.81, 29.969], // [Longitude, Latitude]
-  zoom: 10,
-  token: 'YOUR_TIANDITU_TOKEN', // Required for Tianditu base maps
-  annotation: true // Show annotation layer by default
-};
-
-// 2. Initialize
-const map = new MyOl('map-container', config);
-
-// 3. Access Modules & Add Features
-map.getPoint().addPoint([{ lgtd: 119.81, lttd: 29.969, name: 'Demo' }], {
-  layerName: 'demo-layer',
-  img: 'marker.png'
-});
-```
-
-## API Reference (Condensed)
-
-### `MyOl` (Main Class)
-- `constructor(id: string | HTMLElement, options?: MapInitType)`
-- `getPoint()`: Returns `Point` instance.
-- `getLine()`: Returns `Line` instance.
-- `getPolygon()`: Returns `Polygon` instance.
-- `getMapBaseLayers()`: Returns `MapBaseLayers` instance.
-- `getTools()`: Returns `MapTools` instance.
-- `getSelectHandler()`: Returns `SelectHandler` instance.
-- `getEventManager()`: Returns `EventManager` instance.
-- `locationAction(lon, lat, zoom, duration)`: Animate to location.
-
-### `MapBaseLayers`
-- `switchBaseLayer(type: 'vec_c' | 'img_c' | 'ter_c')`: Switch base map.
-- `setAnnotationVisible(visible: boolean)`: Toggle text annotations.
-- `addGeoServerLayer(url, layerName, options)`: Add WMS layer.
-
-### `Point`
-- `addPoint(data: PointData[], options: PointOptions)`: Add markers.
-- `addClusterPoint(data, options)`: Add clustered markers.
-- `addVueTemplatePoint(data, Component, options)`: Use Vue component as marker.
-
-### `Line`
-- `addLine(geoJson, options)`: Add lines from GeoJSON.
-- `addLineByUrl(url, options)`: Load GeoJSON from URL.
-
-### `Polygon`
-- `addPolygon(geoJson, options)`: Add polygons.
-- `addBorderPolygon(geoJson, options)`: Add boundary lines.
-- `updateFeatureColor(layerName, colorMap, options)`: Update colors dynamically.
-- `addHeatmap(data, options)`: Add heatmap.
-
-### `SelectHandler`
-- `enableSelect(mode: 'click'|'hover', options)`: Enable selection.
-- `selectByIds(ids, options)`: Programmatic selection.
-
-### `MeasureHandler`
-- **Important**: Must be instantiated manually if not exposed via `MyOl`.
-- `new MeasureHandler(map.map)`
-- `start('LineString' | 'Polygon')`
-- `end()`, `clean()`
-
-## Key Type Definitions (TypeScript)
-
-Use these interfaces to ensure type safety.
-
-```typescript
-export interface MapInitType {
-  layers?: LayerItem[] | { [key: string]: LayerItem[] };
-  zoom?: number;
-  center?: number[]; // [lon, lat]
-  minZoom?: number;
-  maxZoom?: number;
-  token?: string; // Tianditu Token
-  annotation?: boolean;
-}
-
-export interface BaseOptions {
-  layerName?: string;
-  zIndex?: number;
-  visible?: boolean;
-  opacity?: number;
-}
-
-export interface PointOptions extends BaseOptions {
-  textKey?: string; // Property key for label text
-  img?: string; // Icon URL
-  scale?: number;
-  textFillColor?: string;
-}
-
-export interface PointData {
-  lgtd: number;
-  lttd: number;
-  [key: string]: any;
-}
-
-export interface LineOptions extends BaseOptions {
-  strokeColor?: string;
-  strokeWidth?: number;
-  lineDash?: number[];
-}
-
-export interface PolygonOptions extends BaseOptions {
-  fillColor?: string;
-  strokeColor?: string;
-  textKey?: string;
-}
-```
-
-## Best Practices
-
-1.  **Use Modules**: Access functionality through `map.getPoint()`, `map.getLine()`, etc., rather than manipulating the `ol.Map` directly when possible.
-2.  **Layer Names**: Always provide a unique `layerName` in options to easily retrieve or remove layers later (`map.getTools().removeLayer('my-layer')`).
-3.  **Coordinate System**: The library defaults to `EPSG:4326` (WGS84) for input coordinates (lon/lat) and `CGCS2000` internally where applicable.
-4.  **Vue Integration**: Use `addVueTemplatePoint` for complex markers requiring interactivity or dynamic content.
-5.  **Event Handling**: Use `map.getEventManager().on('click', ...)` instead of native listeners for better management.