my-openlayer 2.4.8 → 2.4.10

package/docs/EventManager.md

@@ -1,142 +1,142 @@
-# EventManager 事件管理
-
-`EventManager` 类用于统一管理地图事件，提供简单的 API 来监听、移除和触发地图事件。它对 OpenLayers 的原生事件系统进行了封装，提供了类型安全的事件处理。
-
-## 导入
-
-```typescript
-import { EventManager, MapEventData } from 'my-openlayer';
-```
-
-## 接口定义
-
-### MapEventData 接口
-
-统一的事件数据结构，回调函数会接收此类型的参数。
-
-| 属性名 | 类型 | 描述 |
-| :--- | :--- | :--- |
-| `type` | `MapEventType` | 事件类型 |
-| `originalEvent` | `Event` | 原始 DOM 事件对象 (可选) |
-| `coordinate` | `number[]` | 发生事件的地理坐标 (可选) |
-| `pixel` | `Pixel` | 发生事件的屏幕像素坐标 (可选) |
-| `features` | `FeatureLike[]` | 事件位置处的要素列表 (可选) |
-| `feature` | `FeatureLike` | 事件位置处的第一个要素 (可选) |
-| `zoom` | `number` | 当前地图缩放级别 (可选) |
-| `[key: string]` | `any` | 其他自定义属性 |
-
-### MapEventType 类型
-
-支持的事件类型字符串：
-`'click'` | `'dblclick'` | `'hover'` | `'moveend'` | `'zoomend'` | `'pointermove'` | `'rendercomplete'` | `'error'`
-
-## 构造函数
-
-```typescript
-constructor(map: Map)
-```
-
-| 参数名 | 类型 | 描述 |
-| :--- | :--- | :--- |
-| `map` | `Map` | OpenLayers 地图实例 |
-
-## 方法
-
-### 监听事件
-
-```typescript
-on(type: MapEventType, callback: EventCallback, options?: { once?: boolean; filter?: (event: MapEventData) => boolean; }): string
-```
-
-注册事件监听器。
-
-| 参数名 | 类型 | 描述 |
-| :--- | :--- | :--- |
-| `type` | `MapEventType` | 事件类型 |
-| `callback` | `EventCallback` | 事件回调函数 |
-| `options` | `object` | 监听选项 (可选) |
-| `options.once` | `boolean` | 是否只触发一次 |
-| `options.filter` | `function` | 事件过滤器，返回 false 则不触发回调 |
-
-**返回值**: `string` - 监听器 ID，用于取消监听。
-
-### 移除监听
-
-```typescript
-off(id: string): boolean
-```
-
-根据监听器 ID 移除事件监听。
-
-| 参数名 | 类型 | 描述 |
-| :--- | :--- | :--- |
-| `id` | `string` | 监听器 ID |
-
-**返回值**: `boolean` - 是否成功移除。
-
-### 移除所有监听
-
-```typescript
-clear(): void
-```
-
-移除所有已注册的事件监听器。
-
-## 使用示例
-
-### 基础事件监听
-
-```typescript
-import { MyOl } from 'my-openlayer';
-
-const myOl = new MyOl('map-container');
-const eventManager = myOl.getEventManager();
-
-// 监听点击事件
-const clickId = eventManager.on('click', (event) => {
-  console.log('Clicked at:', event.coordinate);
-  
-  if (event.feature) {
-    console.log('Clicked feature:', event.feature);
-  }
-});
-
-// 监听缩放结束
-eventManager.on('zoomend', (event) => {
-  console.log('Current zoom:', event.zoom);
-});
-```
-
-### 一次性监听
-
-```typescript
-// 只监听一次点击
-eventManager.on('click', (event) => {
-  console.log('First click only');
-}, { once: true });
-```
-
-### 带过滤条件的监听
-
-```typescript
-// 只监听包含特定属性要素的点击
-eventManager.on('click', (event) => {
-  console.log('Clicked special feature');
-}, {
-  filter: (event) => {
-    if (!event.feature) return false;
-    const props = event.feature.getProperties();
-    return props.type === 'special';
-  }
-});
-```
-
-### 移除监听
-
-```typescript
-// 停止监听
-eventManager.off(clickId);
-
-// 或清除所有
-eventManager.clear();
-```
+# EventManager 事件管理
+
+`EventManager` 类用于统一管理地图事件，提供简单的 API 来监听、移除和触发地图事件。它对 OpenLayers 的原生事件系统进行了封装，提供了类型安全的事件处理。
+
+## 导入
+
+```typescript
+import { EventManager, MapEventData } from 'my-openlayer';
+```
+
+## 接口定义
+
+### MapEventData 接口
+
+统一的事件数据结构，回调函数会接收此类型的参数。
+
+| 属性名 | 类型 | 描述 |
+| :--- | :--- | :--- |
+| `type` | `MapEventType` | 事件类型 |
+| `originalEvent` | `Event` | 原始 DOM 事件对象 (可选) |
+| `coordinate` | `number[]` | 发生事件的地理坐标 (可选) |
+| `pixel` | `Pixel` | 发生事件的屏幕像素坐标 (可选) |
+| `features` | `FeatureLike[]` | 事件位置处的要素列表 (可选) |
+| `feature` | `FeatureLike` | 事件位置处的第一个要素 (可选) |
+| `zoom` | `number` | 当前地图缩放级别 (可选) |
+| `[key: string]` | `any` | 其他自定义属性 |
+
+### MapEventType 类型
+
+支持的事件类型字符串：
+`'click'` | `'dblclick'` | `'hover'` | `'moveend'` | `'zoomend'` | `'pointermove'` | `'rendercomplete'` | `'error'`
+
+## 构造函数
+
+```typescript
+constructor(map: Map)
+```
+
+| 参数名 | 类型 | 描述 |
+| :--- | :--- | :--- |
+| `map` | `Map` | OpenLayers 地图实例 |
+
+## 方法
+
+### 监听事件
+
+```typescript
+on(type: MapEventType, callback: EventCallback, options?: { once?: boolean; filter?: (event: MapEventData) => boolean; }): string
+```
+
+注册事件监听器。
+
+| 参数名 | 类型 | 描述 |
+| :--- | :--- | :--- |
+| `type` | `MapEventType` | 事件类型 |
+| `callback` | `EventCallback` | 事件回调函数 |
+| `options` | `object` | 监听选项 (可选) |
+| `options.once` | `boolean` | 是否只触发一次 |
+| `options.filter` | `function` | 事件过滤器，返回 false 则不触发回调 |
+
+**返回值**: `string` - 监听器 ID，用于取消监听。
+
+### 移除监听
+
+```typescript
+off(id: string): boolean
+```
+
+根据监听器 ID 移除事件监听。
+
+| 参数名 | 类型 | 描述 |
+| :--- | :--- | :--- |
+| `id` | `string` | 监听器 ID |
+
+**返回值**: `boolean` - 是否成功移除。
+
+### 移除所有监听
+
+```typescript
+clear(): void
+```
+
+移除所有已注册的事件监听器。
+
+## 使用示例
+
+### 基础事件监听
+
+```typescript
+import { MyOl } from 'my-openlayer';
+
+const myOl = new MyOl('map-container');
+const eventManager = myOl.getEventManager();
+
+// 监听点击事件
+const clickId = eventManager.on('click', (event) => {
+  console.log('Clicked at:', event.coordinate);
+  
+  if (event.feature) {
+    console.log('Clicked feature:', event.feature);
+  }
+});
+
+// 监听缩放结束
+eventManager.on('zoomend', (event) => {
+  console.log('Current zoom:', event.zoom);
+});
+```
+
+### 一次性监听
+
+```typescript
+// 只监听一次点击
+eventManager.on('click', (event) => {
+  console.log('First click only');
+}, { once: true });
+```
+
+### 带过滤条件的监听
+
+```typescript
+// 只监听包含特定属性要素的点击
+eventManager.on('click', (event) => {
+  console.log('Clicked special feature');
+}, {
+  filter: (event) => {
+    if (!event.feature) return false;
+    const props = event.feature.getProperties();
+    return props.type === 'special';
+  }
+});
+```
+
+### 移除监听
+
+```typescript
+// 停止监听
+eventManager.off(clickId);
+
+// 或清除所有
+eventManager.clear();
+```

package/docs/Line.md

@@ -1,187 +1,187 @@
-# Line 线要素类
-
-`Line` 类用于在地图上绘制线要素，支持 GeoJSON 数据加载、自定义样式和图层管理。
-
-## 构造函数
-
-```typescript
-const line = new Line(map: Map);
-```
-
-- **map**: OpenLayers 地图实例。
-
-## 接口定义
-
-### LineOptions
-
-配置线图层的样式、属性和行为。继承自 `BaseOptions`, `StyleOptions`, `TextOptions`。
-
-| 属性 | 类型 | 说明 |
-| :--- | :--- | :--- |
-| **基础配置** | | |
-| `layerName` | `string` | 图层名称，用于唯一标识和管理图层 |
-| `zIndex` | `number` | 图层层级，默认自动处理 |
-| `visible` | `boolean` | 图层是否可见，默认 `true` |
-| `opacity` | `number` | 图层透明度 (0-1) |
-| `fitView` | `boolean` | 添加要素后是否自动缩放视图以适应要素范围 |
-| **样式配置** | | |
-| `strokeColor` | `string` \| `number[]` | 线条颜色，如 `'#ff0000'` 或 `[255, 0, 0, 1]` |
-| `strokeWidth` | `number` | 线条宽度（像素） |
-| `lineDash` | `number[]` | 虚线模式，如 `[10, 10]` 表示 10px 实线 10px 间隔 |
-| `lineDashOffset` | `number` | 虚线偏移量 |
-| `style` | `Style` \| `Function` | 自定义 OpenLayers 样式或样式函数 |
-| **文本标注** | | |
-| `textVisible` | `boolean` | 是否显示文本标注 |
-| `textCallBack` | `(feature) => string` | 获取文本内容的回调函数 |
-| `textFont` | `string` | 字体样式，默认 `'12px sans-serif'` |
-| `textFillColor` | `string` | 文本填充颜色 |
-| `textStrokeColor` | `string` | 文本描边颜色 |
-| `textStrokeWidth` | `number` | 文本描边宽度 |
-| `textOffsetY` | `number` | 文本 Y 轴偏移量 |
-| **其他** | | |
-| `type` | `string` | 线条类型标识，会写入 Feature 的属性中 |
-
-### MapJSONData (GeoJSON)
-
-标准的 GeoJSON 格式数据结构。
-
-```typescript
-interface MapJSONData {
-  type: string;        // 通常为 "FeatureCollection"
-  name?: string;       // 数据集名称
-  features: FeatureData[]; // 要素数组
-}
-
-interface FeatureData {
-  type: string;        // "Feature"
-  properties: any;     // 属性对象
-  geometry: {
-    type: "LineString" | "MultiLineString";
-    coordinates: number[][] | number[][][];
-  };
-}
-```
-
-## 方法
-
-### addLine
-
-添加线要素图层。
-
-```typescript
-addLine(data: MapJSONData, options?: LineOptions): VectorLayer<VectorSource>
-```
-
-| 参数 | 类型 | 说明 |
-| :--- | :--- | :--- |
-| `data` | `MapJSONData` | GeoJSON 格式的线数据 |
-| `options` | `LineOptions` | 图层配置项 |
-
-**返回**: 创建的 `VectorLayer` 实例。
-
-### addLineByUrl
-
-从 URL 加载并添加线要素图层。
-
-```typescript
-addLineByUrl(url: string, options?: LineOptions): VectorLayer<VectorSource>
-```
-
-| 参数 | 类型 | 说明 |
-| :--- | :--- | :--- |
-| `url` | `string` | GeoJSON 数据的 URL 地址 |
-| `options` | `LineOptions` | 图层配置项 |
-
-**返回**: 创建的 `VectorLayer` 实例。
-
-### removeLineLayer
-
-根据图层名称移除线图层。
-
-```typescript
-removeLineLayer(layerName: string): void
-```
-
-| 参数 | 类型 | 说明 |
-| :--- | :--- | :--- |
-| `layerName` | `string` | 要移除的图层名称 |
-
-## 使用示例
-
-### 基础用法
-
-```typescript
-const lineModule = map.getLine();
-
-// GeoJSON 数据
-const lineData = {
-  type: 'FeatureCollection',
-  features: [
-    {
-      type: 'Feature',
-      geometry: {
-        type: 'LineString',
-        coordinates: [[119.8, 29.9], [119.9, 30.0]]
-      },
-      properties: { name: '线路1', status: 'active' }
-    }
-  ]
-};
-
-// 添加红色实线
-lineModule.addLine(lineData, {
-  layerName: 'base-line',
-  strokeColor: '#ff0000',
-  strokeWidth: 3,
-  fitView: true
-});
-```
-
-### 虚线与标注
-
-```typescript
-lineModule.addLine(lineData, {
-  layerName: 'dash-line',
-  strokeColor: '#0000ff',
-  strokeWidth: 2,
-  lineDash: [10, 5], // 10px实线，5px间隔
-  textVisible: true,
-  textFillColor: '#000',
-  textStrokeColor: '#fff',
-  textStrokeWidth: 2,
-  // 动态获取显示的文本
-  textCallBack: (feature) => feature.get('name')
-});
-```
-
-### 自定义样式函数
-
-```typescript
-import { Style, Stroke } from 'ol/style';
-
-lineModule.addLine(lineData, {
-  layerName: 'custom-style-line',
-  // 根据属性动态设置颜色
-  style: (feature) => {
-    const status = feature.get('properties').status;
-    const color = status === 'active' ? 'green' : 'gray';
-    
-    return new Style({
-      stroke: new Stroke({
-        color: color,
-        width: 4
-      })
-    });
-  }
-});
-```
-
-### 从接口加载
-
-```typescript
-lineModule.addLineByUrl('/api/lines/all.json', {
-  layerName: 'api-lines',
-  strokeColor: 'orange',
-  strokeWidth: 2
-});
-```
+# Line 线要素类
+
+`Line` 类用于在地图上绘制线要素，支持 GeoJSON 数据加载、自定义样式和图层管理。
+
+## 构造函数
+
+```typescript
+const line = new Line(map: Map);
+```
+
+- **map**: OpenLayers 地图实例。
+
+## 接口定义
+
+### LineOptions
+
+配置线图层的样式、属性和行为。继承自 `BaseOptions`, `StyleOptions`, `TextOptions`。
+
+| 属性 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| **基础配置** | | |
+| `layerName` | `string` | 图层名称，用于唯一标识和管理图层 |
+| `zIndex` | `number` | 图层层级，默认自动处理 |
+| `visible` | `boolean` | 图层是否可见，默认 `true` |
+| `opacity` | `number` | 图层透明度 (0-1) |
+| `fitView` | `boolean` | 添加要素后是否自动缩放视图以适应要素范围 |
+| **样式配置** | | |
+| `strokeColor` | `string` \| `number[]` | 线条颜色，如 `'#ff0000'` 或 `[255, 0, 0, 1]` |
+| `strokeWidth` | `number` | 线条宽度（像素） |
+| `lineDash` | `number[]` | 虚线模式，如 `[10, 10]` 表示 10px 实线 10px 间隔 |
+| `lineDashOffset` | `number` | 虚线偏移量 |
+| `style` | `Style` \| `Function` | 自定义 OpenLayers 样式或样式函数 |
+| **文本标注** | | |
+| `textVisible` | `boolean` | 是否显示文本标注 |
+| `textCallBack` | `(feature) => string` | 获取文本内容的回调函数 |
+| `textFont` | `string` | 字体样式，默认 `'12px sans-serif'` |
+| `textFillColor` | `string` | 文本填充颜色 |
+| `textStrokeColor` | `string` | 文本描边颜色 |
+| `textStrokeWidth` | `number` | 文本描边宽度 |
+| `textOffsetY` | `number` | 文本 Y 轴偏移量 |
+| **其他** | | |
+| `type` | `string` | 线条类型标识，会写入 Feature 的属性中 |
+
+### MapJSONData (GeoJSON)
+
+标准的 GeoJSON 格式数据结构。
+
+```typescript
+interface MapJSONData {
+  type: string;        // 通常为 "FeatureCollection"
+  name?: string;       // 数据集名称
+  features: FeatureData[]; // 要素数组
+}
+
+interface FeatureData {
+  type: string;        // "Feature"
+  properties: any;     // 属性对象
+  geometry: {
+    type: "LineString" | "MultiLineString";
+    coordinates: number[][] | number[][][];
+  };
+}
+```
+
+## 方法
+
+### addLine
+
+添加线要素图层。
+
+```typescript
+addLine(data: MapJSONData, options?: LineOptions): VectorLayer<VectorSource>
+```
+
+| 参数 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `data` | `MapJSONData` | GeoJSON 格式的线数据 |
+| `options` | `LineOptions` | 图层配置项 |
+
+**返回**: 创建的 `VectorLayer` 实例。
+
+### addLineByUrl
+
+从 URL 加载并添加线要素图层。
+
+```typescript
+addLineByUrl(url: string, options?: LineOptions): VectorLayer<VectorSource>
+```
+
+| 参数 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `url` | `string` | GeoJSON 数据的 URL 地址 |
+| `options` | `LineOptions` | 图层配置项 |
+
+**返回**: 创建的 `VectorLayer` 实例。
+
+### removeLineLayer
+
+根据图层名称移除线图层。
+
+```typescript
+removeLineLayer(layerName: string): void
+```
+
+| 参数 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| `layerName` | `string` | 要移除的图层名称 |
+
+## 使用示例
+
+### 基础用法
+
+```typescript
+const lineModule = map.getLine();
+
+// GeoJSON 数据
+const lineData = {
+  type: 'FeatureCollection',
+  features: [
+    {
+      type: 'Feature',
+      geometry: {
+        type: 'LineString',
+        coordinates: [[119.8, 29.9], [119.9, 30.0]]
+      },
+      properties: { name: '线路1', status: 'active' }
+    }
+  ]
+};
+
+// 添加红色实线
+lineModule.addLine(lineData, {
+  layerName: 'base-line',
+  strokeColor: '#ff0000',
+  strokeWidth: 3,
+  fitView: true
+});
+```
+
+### 虚线与标注
+
+```typescript
+lineModule.addLine(lineData, {
+  layerName: 'dash-line',
+  strokeColor: '#0000ff',
+  strokeWidth: 2,
+  lineDash: [10, 5], // 10px实线，5px间隔
+  textVisible: true,
+  textFillColor: '#000',
+  textStrokeColor: '#fff',
+  textStrokeWidth: 2,
+  // 动态获取显示的文本
+  textCallBack: (feature) => feature.get('name')
+});
+```
+
+### 自定义样式函数
+
+```typescript
+import { Style, Stroke } from 'ol/style';
+
+lineModule.addLine(lineData, {
+  layerName: 'custom-style-line',
+  // 根据属性动态设置颜色
+  style: (feature) => {
+    const status = feature.get('properties').status;
+    const color = status === 'active' ? 'green' : 'gray';
+    
+    return new Style({
+      stroke: new Stroke({
+        color: color,
+        width: 4
+      })
+    });
+  }
+});
+```
+
+### 从接口加载
+
+```typescript
+lineModule.addLineByUrl('/api/lines/all.json', {
+  layerName: 'api-lines',
+  strokeColor: 'orange',
+  strokeWidth: 2
+});
+```