my-openlayer 2.4.8 → 2.4.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +207 -151
- package/README.md +156 -156
- package/core/Point.js +21 -3
- package/docs/.vitepress/config.mts +57 -57
- package/docs/ConfigManager.md +71 -71
- package/docs/ErrorHandler.md +106 -106
- package/docs/EventManager.md +142 -142
- package/docs/Line.md +187 -187
- package/docs/MapBaseLayers.md +198 -198
- package/docs/MapTools.md +172 -172
- package/docs/MeasureHandler.md +87 -87
- package/docs/MyOl.md +247 -247
- package/docs/Point.md +165 -165
- package/docs/Polygon.md +241 -241
- package/docs/RiverLayerManager.md +187 -187
- package/docs/SelectHandler.md +147 -147
- package/docs/ValidationUtils.md +83 -83
- package/docs/VueTemplatePoint.md +214 -214
- package/docs/index.md +78 -78
- package/package.json +1 -2
- package/types.d.ts +2 -0
- package/AI_CONTEXT.md +0 -147
package/docs/ErrorHandler.md
CHANGED
|
@@ -1,106 +1,106 @@
|
|
|
1
|
-
# ErrorHandler 错误处理
|
|
2
|
-
|
|
3
|
-
`ErrorHandler` 类是一个单例工具类,用于统一管理和分发应用程序中的错误。它支持不同的日志级别,并允许注册自定义错误回调。
|
|
4
|
-
|
|
5
|
-
## 导入
|
|
6
|
-
|
|
7
|
-
```typescript
|
|
8
|
-
import { ErrorHandler, ErrorType, MyOpenLayersError } from 'my-openlayer';
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## 枚举与类定义
|
|
12
|
-
|
|
13
|
-
### ErrorType 枚举
|
|
14
|
-
|
|
15
|
-
定义了系统中可能的错误类型:
|
|
16
|
-
|
|
17
|
-
| 成员 | 值 | 描述 |
|
|
18
|
-
| :--- | :--- | :--- |
|
|
19
|
-
| `VALIDATION_ERROR` | `'VALIDATION_ERROR'` | 参数验证错误 |
|
|
20
|
-
| `MAP_ERROR` | `'MAP_ERROR'` | 地图相关错误 |
|
|
21
|
-
| `LAYER_ERROR` | `'LAYER_ERROR'` | 图层相关错误 |
|
|
22
|
-
| `COORDINATE_ERROR` | `'COORDINATE_ERROR'` | 坐标无效错误 |
|
|
23
|
-
| `DATA_ERROR` | `'DATA_ERROR'` | 数据格式错误 |
|
|
24
|
-
| `COMPONENT_ERROR` | `'COMPONENT_ERROR'` | 组件内部错误 |
|
|
25
|
-
|
|
26
|
-
### MyOpenLayersError 类
|
|
27
|
-
|
|
28
|
-
自定义错误类,继承自 `Error`。
|
|
29
|
-
|
|
30
|
-
| 属性 | 类型 | 描述 |
|
|
31
|
-
| :--- | :--- | :--- |
|
|
32
|
-
| `message` | `string` | 错误消息 |
|
|
33
|
-
| `type` | `ErrorType` | 错误类型 |
|
|
34
|
-
| `timestamp` | `Date` | 错误发生的时间戳 |
|
|
35
|
-
| `context` | `any` | 错误相关的上下文数据 |
|
|
36
|
-
|
|
37
|
-
## 方法
|
|
38
|
-
|
|
39
|
-
### 静态方法
|
|
40
|
-
|
|
41
|
-
| 方法名 | 参数 | 返回值 | 描述 |
|
|
42
|
-
| :--- | :--- | :--- | :--- |
|
|
43
|
-
| `getInstance()` | - | `ErrorHandler` | 获取 `ErrorHandler` 的单例实例 |
|
|
44
|
-
| `validate(condition, message, context?)` | `condition: boolean`<br>`message: string`<br>`context?: any` | `void` | 验证条件,如果为 `false` 则抛出 `VALIDATION_ERROR` |
|
|
45
|
-
| `validateMap(map)` | `map: any` | `void` | 验证地图实例是否存在 |
|
|
46
|
-
| `validateCoordinates(longitude, latitude)` | `longitude: number`<br>`latitude: number` | `void` | 验证经纬度坐标是否有效 |
|
|
47
|
-
| `validateLayerName(layerName)` | `layerName: string` | `void` | 验证图层名称是否有效 |
|
|
48
|
-
| `validateData(data, dataType)` | `data: any`<br>`dataType: string` | `void` | 验证数据是否存在 |
|
|
49
|
-
| `safeExecute<T>(fn, errorMessage, errorType?, context?)` | `fn: () => T`<br>`errorMessage: string`<br>`errorType?: ErrorType`<br>`context?: any` | `T` | 安全执行函数,捕获并处理异常 |
|
|
50
|
-
|
|
51
|
-
### 实例方法
|
|
52
|
-
|
|
53
|
-
| 方法名 | 参数 | 返回值 | 描述 |
|
|
54
|
-
| :--- | :--- | :--- | :--- |
|
|
55
|
-
| `setLogLevel(level)` | `level: 'debug' \| 'info' \| 'warn' \| 'error'` | `void` | 设置日志级别 |
|
|
56
|
-
| `debug(...args)` | `...args: any[]` | `void` | 输出调试日志 |
|
|
57
|
-
| `info(...args)` | `...args: any[]` | `void` | 输出信息日志 |
|
|
58
|
-
| `warn(...args)` | `...args: any[]` | `void` | 输出警告日志 |
|
|
59
|
-
| `createAndHandleError(message, type, context?)` | `message: string`<br>`type: ErrorType`<br>`context?: any` | `MyOpenLayersError` | 创建并处理错误,通知监听器 |
|
|
60
|
-
|
|
61
|
-
## 使用示例
|
|
62
|
-
|
|
63
|
-
### 基本验证
|
|
64
|
-
|
|
65
|
-
```typescript
|
|
66
|
-
import { ErrorHandler } from 'my-openlayer';
|
|
67
|
-
|
|
68
|
-
function setCenter(longitude: number, latitude: number) {
|
|
69
|
-
// 验证坐标,如果不合法会自动抛出异常
|
|
70
|
-
ErrorHandler.validateCoordinates(longitude, latitude);
|
|
71
|
-
|
|
72
|
-
// ...设置中心点逻辑
|
|
73
|
-
}
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
### 捕获和处理错误
|
|
77
|
-
|
|
78
|
-
```typescript
|
|
79
|
-
import { ErrorHandler, ErrorType } from 'my-openlayer';
|
|
80
|
-
|
|
81
|
-
try {
|
|
82
|
-
// 可能出错的代码
|
|
83
|
-
throw new Error('Something went wrong');
|
|
84
|
-
} catch (error) {
|
|
85
|
-
ErrorHandler.getInstance().createAndHandleError(
|
|
86
|
-
'Operation failed',
|
|
87
|
-
ErrorType.COMPONENT_ERROR,
|
|
88
|
-
{ originalError: error }
|
|
89
|
-
);
|
|
90
|
-
}
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
### 安全执行函数
|
|
94
|
-
|
|
95
|
-
```typescript
|
|
96
|
-
import { ErrorHandler } from 'my-openlayer';
|
|
97
|
-
|
|
98
|
-
const result = ErrorHandler.safeExecute(
|
|
99
|
-
() => {
|
|
100
|
-
// 危险操作
|
|
101
|
-
return JSON.parse(someJsonString);
|
|
102
|
-
},
|
|
103
|
-
'Failed to parse JSON',
|
|
104
|
-
ErrorType.DATA_ERROR
|
|
105
|
-
);
|
|
106
|
-
```
|
|
1
|
+
# ErrorHandler 错误处理
|
|
2
|
+
|
|
3
|
+
`ErrorHandler` 类是一个单例工具类,用于统一管理和分发应用程序中的错误。它支持不同的日志级别,并允许注册自定义错误回调。
|
|
4
|
+
|
|
5
|
+
## 导入
|
|
6
|
+
|
|
7
|
+
```typescript
|
|
8
|
+
import { ErrorHandler, ErrorType, MyOpenLayersError } from 'my-openlayer';
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 枚举与类定义
|
|
12
|
+
|
|
13
|
+
### ErrorType 枚举
|
|
14
|
+
|
|
15
|
+
定义了系统中可能的错误类型:
|
|
16
|
+
|
|
17
|
+
| 成员 | 值 | 描述 |
|
|
18
|
+
| :--- | :--- | :--- |
|
|
19
|
+
| `VALIDATION_ERROR` | `'VALIDATION_ERROR'` | 参数验证错误 |
|
|
20
|
+
| `MAP_ERROR` | `'MAP_ERROR'` | 地图相关错误 |
|
|
21
|
+
| `LAYER_ERROR` | `'LAYER_ERROR'` | 图层相关错误 |
|
|
22
|
+
| `COORDINATE_ERROR` | `'COORDINATE_ERROR'` | 坐标无效错误 |
|
|
23
|
+
| `DATA_ERROR` | `'DATA_ERROR'` | 数据格式错误 |
|
|
24
|
+
| `COMPONENT_ERROR` | `'COMPONENT_ERROR'` | 组件内部错误 |
|
|
25
|
+
|
|
26
|
+
### MyOpenLayersError 类
|
|
27
|
+
|
|
28
|
+
自定义错误类,继承自 `Error`。
|
|
29
|
+
|
|
30
|
+
| 属性 | 类型 | 描述 |
|
|
31
|
+
| :--- | :--- | :--- |
|
|
32
|
+
| `message` | `string` | 错误消息 |
|
|
33
|
+
| `type` | `ErrorType` | 错误类型 |
|
|
34
|
+
| `timestamp` | `Date` | 错误发生的时间戳 |
|
|
35
|
+
| `context` | `any` | 错误相关的上下文数据 |
|
|
36
|
+
|
|
37
|
+
## 方法
|
|
38
|
+
|
|
39
|
+
### 静态方法
|
|
40
|
+
|
|
41
|
+
| 方法名 | 参数 | 返回值 | 描述 |
|
|
42
|
+
| :--- | :--- | :--- | :--- |
|
|
43
|
+
| `getInstance()` | - | `ErrorHandler` | 获取 `ErrorHandler` 的单例实例 |
|
|
44
|
+
| `validate(condition, message, context?)` | `condition: boolean`<br>`message: string`<br>`context?: any` | `void` | 验证条件,如果为 `false` 则抛出 `VALIDATION_ERROR` |
|
|
45
|
+
| `validateMap(map)` | `map: any` | `void` | 验证地图实例是否存在 |
|
|
46
|
+
| `validateCoordinates(longitude, latitude)` | `longitude: number`<br>`latitude: number` | `void` | 验证经纬度坐标是否有效 |
|
|
47
|
+
| `validateLayerName(layerName)` | `layerName: string` | `void` | 验证图层名称是否有效 |
|
|
48
|
+
| `validateData(data, dataType)` | `data: any`<br>`dataType: string` | `void` | 验证数据是否存在 |
|
|
49
|
+
| `safeExecute<T>(fn, errorMessage, errorType?, context?)` | `fn: () => T`<br>`errorMessage: string`<br>`errorType?: ErrorType`<br>`context?: any` | `T` | 安全执行函数,捕获并处理异常 |
|
|
50
|
+
|
|
51
|
+
### 实例方法
|
|
52
|
+
|
|
53
|
+
| 方法名 | 参数 | 返回值 | 描述 |
|
|
54
|
+
| :--- | :--- | :--- | :--- |
|
|
55
|
+
| `setLogLevel(level)` | `level: 'debug' \| 'info' \| 'warn' \| 'error'` | `void` | 设置日志级别 |
|
|
56
|
+
| `debug(...args)` | `...args: any[]` | `void` | 输出调试日志 |
|
|
57
|
+
| `info(...args)` | `...args: any[]` | `void` | 输出信息日志 |
|
|
58
|
+
| `warn(...args)` | `...args: any[]` | `void` | 输出警告日志 |
|
|
59
|
+
| `createAndHandleError(message, type, context?)` | `message: string`<br>`type: ErrorType`<br>`context?: any` | `MyOpenLayersError` | 创建并处理错误,通知监听器 |
|
|
60
|
+
|
|
61
|
+
## 使用示例
|
|
62
|
+
|
|
63
|
+
### 基本验证
|
|
64
|
+
|
|
65
|
+
```typescript
|
|
66
|
+
import { ErrorHandler } from 'my-openlayer';
|
|
67
|
+
|
|
68
|
+
function setCenter(longitude: number, latitude: number) {
|
|
69
|
+
// 验证坐标,如果不合法会自动抛出异常
|
|
70
|
+
ErrorHandler.validateCoordinates(longitude, latitude);
|
|
71
|
+
|
|
72
|
+
// ...设置中心点逻辑
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### 捕获和处理错误
|
|
77
|
+
|
|
78
|
+
```typescript
|
|
79
|
+
import { ErrorHandler, ErrorType } from 'my-openlayer';
|
|
80
|
+
|
|
81
|
+
try {
|
|
82
|
+
// 可能出错的代码
|
|
83
|
+
throw new Error('Something went wrong');
|
|
84
|
+
} catch (error) {
|
|
85
|
+
ErrorHandler.getInstance().createAndHandleError(
|
|
86
|
+
'Operation failed',
|
|
87
|
+
ErrorType.COMPONENT_ERROR,
|
|
88
|
+
{ originalError: error }
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### 安全执行函数
|
|
94
|
+
|
|
95
|
+
```typescript
|
|
96
|
+
import { ErrorHandler } from 'my-openlayer';
|
|
97
|
+
|
|
98
|
+
const result = ErrorHandler.safeExecute(
|
|
99
|
+
() => {
|
|
100
|
+
// 危险操作
|
|
101
|
+
return JSON.parse(someJsonString);
|
|
102
|
+
},
|
|
103
|
+
'Failed to parse JSON',
|
|
104
|
+
ErrorType.DATA_ERROR
|
|
105
|
+
);
|
|
106
|
+
```
|
package/docs/EventManager.md
CHANGED
|
@@ -1,142 +1,142 @@
|
|
|
1
|
-
# EventManager 事件管理
|
|
2
|
-
|
|
3
|
-
`EventManager` 类用于统一管理地图事件,提供简单的 API 来监听、移除和触发地图事件。它对 OpenLayers 的原生事件系统进行了封装,提供了类型安全的事件处理。
|
|
4
|
-
|
|
5
|
-
## 导入
|
|
6
|
-
|
|
7
|
-
```typescript
|
|
8
|
-
import { EventManager, MapEventData } from 'my-openlayer';
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## 接口定义
|
|
12
|
-
|
|
13
|
-
### MapEventData 接口
|
|
14
|
-
|
|
15
|
-
统一的事件数据结构,回调函数会接收此类型的参数。
|
|
16
|
-
|
|
17
|
-
| 属性名 | 类型 | 描述 |
|
|
18
|
-
| :--- | :--- | :--- |
|
|
19
|
-
| `type` | `MapEventType` | 事件类型 |
|
|
20
|
-
| `originalEvent` | `Event` | 原始 DOM 事件对象 (可选) |
|
|
21
|
-
| `coordinate` | `number[]` | 发生事件的地理坐标 (可选) |
|
|
22
|
-
| `pixel` | `Pixel` | 发生事件的屏幕像素坐标 (可选) |
|
|
23
|
-
| `features` | `FeatureLike[]` | 事件位置处的要素列表 (可选) |
|
|
24
|
-
| `feature` | `FeatureLike` | 事件位置处的第一个要素 (可选) |
|
|
25
|
-
| `zoom` | `number` | 当前地图缩放级别 (可选) |
|
|
26
|
-
| `[key: string]` | `any` | 其他自定义属性 |
|
|
27
|
-
|
|
28
|
-
### MapEventType 类型
|
|
29
|
-
|
|
30
|
-
支持的事件类型字符串:
|
|
31
|
-
`'click'` | `'dblclick'` | `'hover'` | `'moveend'` | `'zoomend'` | `'pointermove'` | `'rendercomplete'` | `'error'`
|
|
32
|
-
|
|
33
|
-
## 构造函数
|
|
34
|
-
|
|
35
|
-
```typescript
|
|
36
|
-
constructor(map: Map)
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
| 参数名 | 类型 | 描述 |
|
|
40
|
-
| :--- | :--- | :--- |
|
|
41
|
-
| `map` | `Map` | OpenLayers 地图实例 |
|
|
42
|
-
|
|
43
|
-
## 方法
|
|
44
|
-
|
|
45
|
-
### 监听事件
|
|
46
|
-
|
|
47
|
-
```typescript
|
|
48
|
-
on(type: MapEventType, callback: EventCallback, options?: { once?: boolean; filter?: (event: MapEventData) => boolean; }): string
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
注册事件监听器。
|
|
52
|
-
|
|
53
|
-
| 参数名 | 类型 | 描述 |
|
|
54
|
-
| :--- | :--- | :--- |
|
|
55
|
-
| `type` | `MapEventType` | 事件类型 |
|
|
56
|
-
| `callback` | `EventCallback` | 事件回调函数 |
|
|
57
|
-
| `options` | `object` | 监听选项 (可选) |
|
|
58
|
-
| `options.once` | `boolean` | 是否只触发一次 |
|
|
59
|
-
| `options.filter` | `function` | 事件过滤器,返回 false 则不触发回调 |
|
|
60
|
-
|
|
61
|
-
**返回值**: `string` - 监听器 ID,用于取消监听。
|
|
62
|
-
|
|
63
|
-
### 移除监听
|
|
64
|
-
|
|
65
|
-
```typescript
|
|
66
|
-
off(id: string): boolean
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
根据监听器 ID 移除事件监听。
|
|
70
|
-
|
|
71
|
-
| 参数名 | 类型 | 描述 |
|
|
72
|
-
| :--- | :--- | :--- |
|
|
73
|
-
| `id` | `string` | 监听器 ID |
|
|
74
|
-
|
|
75
|
-
**返回值**: `boolean` - 是否成功移除。
|
|
76
|
-
|
|
77
|
-
### 移除所有监听
|
|
78
|
-
|
|
79
|
-
```typescript
|
|
80
|
-
clear(): void
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
移除所有已注册的事件监听器。
|
|
84
|
-
|
|
85
|
-
## 使用示例
|
|
86
|
-
|
|
87
|
-
### 基础事件监听
|
|
88
|
-
|
|
89
|
-
```typescript
|
|
90
|
-
import { MyOl } from 'my-openlayer';
|
|
91
|
-
|
|
92
|
-
const myOl = new MyOl('map-container');
|
|
93
|
-
const eventManager = myOl.getEventManager();
|
|
94
|
-
|
|
95
|
-
// 监听点击事件
|
|
96
|
-
const clickId = eventManager.on('click', (event) => {
|
|
97
|
-
console.log('Clicked at:', event.coordinate);
|
|
98
|
-
|
|
99
|
-
if (event.feature) {
|
|
100
|
-
console.log('Clicked feature:', event.feature);
|
|
101
|
-
}
|
|
102
|
-
});
|
|
103
|
-
|
|
104
|
-
// 监听缩放结束
|
|
105
|
-
eventManager.on('zoomend', (event) => {
|
|
106
|
-
console.log('Current zoom:', event.zoom);
|
|
107
|
-
});
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
### 一次性监听
|
|
111
|
-
|
|
112
|
-
```typescript
|
|
113
|
-
// 只监听一次点击
|
|
114
|
-
eventManager.on('click', (event) => {
|
|
115
|
-
console.log('First click only');
|
|
116
|
-
}, { once: true });
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
### 带过滤条件的监听
|
|
120
|
-
|
|
121
|
-
```typescript
|
|
122
|
-
// 只监听包含特定属性要素的点击
|
|
123
|
-
eventManager.on('click', (event) => {
|
|
124
|
-
console.log('Clicked special feature');
|
|
125
|
-
}, {
|
|
126
|
-
filter: (event) => {
|
|
127
|
-
if (!event.feature) return false;
|
|
128
|
-
const props = event.feature.getProperties();
|
|
129
|
-
return props.type === 'special';
|
|
130
|
-
}
|
|
131
|
-
});
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
### 移除监听
|
|
135
|
-
|
|
136
|
-
```typescript
|
|
137
|
-
// 停止监听
|
|
138
|
-
eventManager.off(clickId);
|
|
139
|
-
|
|
140
|
-
// 或清除所有
|
|
141
|
-
eventManager.clear();
|
|
142
|
-
```
|
|
1
|
+
# EventManager 事件管理
|
|
2
|
+
|
|
3
|
+
`EventManager` 类用于统一管理地图事件,提供简单的 API 来监听、移除和触发地图事件。它对 OpenLayers 的原生事件系统进行了封装,提供了类型安全的事件处理。
|
|
4
|
+
|
|
5
|
+
## 导入
|
|
6
|
+
|
|
7
|
+
```typescript
|
|
8
|
+
import { EventManager, MapEventData } from 'my-openlayer';
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 接口定义
|
|
12
|
+
|
|
13
|
+
### MapEventData 接口
|
|
14
|
+
|
|
15
|
+
统一的事件数据结构,回调函数会接收此类型的参数。
|
|
16
|
+
|
|
17
|
+
| 属性名 | 类型 | 描述 |
|
|
18
|
+
| :--- | :--- | :--- |
|
|
19
|
+
| `type` | `MapEventType` | 事件类型 |
|
|
20
|
+
| `originalEvent` | `Event` | 原始 DOM 事件对象 (可选) |
|
|
21
|
+
| `coordinate` | `number[]` | 发生事件的地理坐标 (可选) |
|
|
22
|
+
| `pixel` | `Pixel` | 发生事件的屏幕像素坐标 (可选) |
|
|
23
|
+
| `features` | `FeatureLike[]` | 事件位置处的要素列表 (可选) |
|
|
24
|
+
| `feature` | `FeatureLike` | 事件位置处的第一个要素 (可选) |
|
|
25
|
+
| `zoom` | `number` | 当前地图缩放级别 (可选) |
|
|
26
|
+
| `[key: string]` | `any` | 其他自定义属性 |
|
|
27
|
+
|
|
28
|
+
### MapEventType 类型
|
|
29
|
+
|
|
30
|
+
支持的事件类型字符串:
|
|
31
|
+
`'click'` | `'dblclick'` | `'hover'` | `'moveend'` | `'zoomend'` | `'pointermove'` | `'rendercomplete'` | `'error'`
|
|
32
|
+
|
|
33
|
+
## 构造函数
|
|
34
|
+
|
|
35
|
+
```typescript
|
|
36
|
+
constructor(map: Map)
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
| 参数名 | 类型 | 描述 |
|
|
40
|
+
| :--- | :--- | :--- |
|
|
41
|
+
| `map` | `Map` | OpenLayers 地图实例 |
|
|
42
|
+
|
|
43
|
+
## 方法
|
|
44
|
+
|
|
45
|
+
### 监听事件
|
|
46
|
+
|
|
47
|
+
```typescript
|
|
48
|
+
on(type: MapEventType, callback: EventCallback, options?: { once?: boolean; filter?: (event: MapEventData) => boolean; }): string
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
注册事件监听器。
|
|
52
|
+
|
|
53
|
+
| 参数名 | 类型 | 描述 |
|
|
54
|
+
| :--- | :--- | :--- |
|
|
55
|
+
| `type` | `MapEventType` | 事件类型 |
|
|
56
|
+
| `callback` | `EventCallback` | 事件回调函数 |
|
|
57
|
+
| `options` | `object` | 监听选项 (可选) |
|
|
58
|
+
| `options.once` | `boolean` | 是否只触发一次 |
|
|
59
|
+
| `options.filter` | `function` | 事件过滤器,返回 false 则不触发回调 |
|
|
60
|
+
|
|
61
|
+
**返回值**: `string` - 监听器 ID,用于取消监听。
|
|
62
|
+
|
|
63
|
+
### 移除监听
|
|
64
|
+
|
|
65
|
+
```typescript
|
|
66
|
+
off(id: string): boolean
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
根据监听器 ID 移除事件监听。
|
|
70
|
+
|
|
71
|
+
| 参数名 | 类型 | 描述 |
|
|
72
|
+
| :--- | :--- | :--- |
|
|
73
|
+
| `id` | `string` | 监听器 ID |
|
|
74
|
+
|
|
75
|
+
**返回值**: `boolean` - 是否成功移除。
|
|
76
|
+
|
|
77
|
+
### 移除所有监听
|
|
78
|
+
|
|
79
|
+
```typescript
|
|
80
|
+
clear(): void
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
移除所有已注册的事件监听器。
|
|
84
|
+
|
|
85
|
+
## 使用示例
|
|
86
|
+
|
|
87
|
+
### 基础事件监听
|
|
88
|
+
|
|
89
|
+
```typescript
|
|
90
|
+
import { MyOl } from 'my-openlayer';
|
|
91
|
+
|
|
92
|
+
const myOl = new MyOl('map-container');
|
|
93
|
+
const eventManager = myOl.getEventManager();
|
|
94
|
+
|
|
95
|
+
// 监听点击事件
|
|
96
|
+
const clickId = eventManager.on('click', (event) => {
|
|
97
|
+
console.log('Clicked at:', event.coordinate);
|
|
98
|
+
|
|
99
|
+
if (event.feature) {
|
|
100
|
+
console.log('Clicked feature:', event.feature);
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
|
|
104
|
+
// 监听缩放结束
|
|
105
|
+
eventManager.on('zoomend', (event) => {
|
|
106
|
+
console.log('Current zoom:', event.zoom);
|
|
107
|
+
});
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### 一次性监听
|
|
111
|
+
|
|
112
|
+
```typescript
|
|
113
|
+
// 只监听一次点击
|
|
114
|
+
eventManager.on('click', (event) => {
|
|
115
|
+
console.log('First click only');
|
|
116
|
+
}, { once: true });
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### 带过滤条件的监听
|
|
120
|
+
|
|
121
|
+
```typescript
|
|
122
|
+
// 只监听包含特定属性要素的点击
|
|
123
|
+
eventManager.on('click', (event) => {
|
|
124
|
+
console.log('Clicked special feature');
|
|
125
|
+
}, {
|
|
126
|
+
filter: (event) => {
|
|
127
|
+
if (!event.feature) return false;
|
|
128
|
+
const props = event.feature.getProperties();
|
|
129
|
+
return props.type === 'special';
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### 移除监听
|
|
135
|
+
|
|
136
|
+
```typescript
|
|
137
|
+
// 停止监听
|
|
138
|
+
eventManager.off(clickId);
|
|
139
|
+
|
|
140
|
+
// 或清除所有
|
|
141
|
+
eventManager.clear();
|
|
142
|
+
```
|