gdmap-utils 1.2.3 → 1.2.5
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/.husky/pre-commit +1 -1
- package/.prettierrc.json +17 -17
- package/README.md +467 -2
- package/dist/index.js +127 -7
- package/dist/index.js.map +1 -1
- package/docs/classes/MapUtils.md +153 -0
- package/docs/functions/createMapUtils.md +18 -0
- package/docs/functions/initMapSource.md +14 -0
- package/docs/globals.md +11 -0
- package/examples/1_init.html +23 -23
- package/examples/2_mapInit.html +48 -48
- package/examples/3_MarkerLayer.html +565 -565
- package/examples/4_LabelMarkerLayer.html +574 -574
- package/examples/5_markerCluster.html +528 -0
- package/index.html +134 -134
- package/package.json +54 -51
- package/scripts/cleanDocs.js +220 -0
- package/scripts/mergeDocs.js +129 -0
- package/src/LayerManager.ts +17 -1
- package/src/MapSourceImport.ts +23 -23
- package/src/MapUtils.ts +198 -22
- package/src/gdMap/gdHelper.ts +113 -85
- package/src/index.ts +3 -1
- package/src/layers/baseMarkerLayer/LabelMarkerLayer.ts +240 -240
- package/src/layers/baseMarkerLayer/MarkerLayer.ts +208 -208
- package/src/layers/baseMarkerLayer/index.ts +369 -354
- package/src/layers/clusterMarkerLayer/MarkerClusterLayer.ts +53 -53
- package/src/layers/clusterMarkerLayer/index.ts +204 -177
- package/src/layers/index.ts +9 -9
- package/src/types/MapUtils.d.ts +53 -53
- package/src/types/amap.d.ts +11 -11
- package/src/types/{BaseMarkerLayer.d.ts → baseMarkerLayer.d.ts} +86 -87
- package/src/types/clusterMarkerLayer.d.ts +89 -88
- package/src/types/index.d.ts +14 -14
- package/tsconfig.json +26 -26
- package/typedoc.json +22 -0
- package/webpack.config.js +125 -126
- package/src/gdMap/gdHelper.js +0 -194
|
@@ -1,354 +1,369 @@
|
|
|
1
|
-
import LabelMarkerLayer from './LabelMarkerLayer';
|
|
2
|
-
import MarkerLayer from './MarkerLayer';
|
|
3
|
-
import type {
|
|
4
|
-
MarkerLayerBaseType,
|
|
5
|
-
LayerOpts,
|
|
6
|
-
BaseMarkerLayerInfo,
|
|
7
|
-
OverlayData,
|
|
8
|
-
} from '@/types';
|
|
9
|
-
import { MapUtils } from '@/MapUtils';
|
|
10
|
-
import type { MapUtilsConstructor, mapUtilsIns } from '@/MapUtils';
|
|
11
|
-
|
|
12
|
-
class BaseMarkerLayer<
|
|
13
|
-
U extends object,
|
|
14
|
-
T extends MarkerLayerBaseType = 'markerLayer',
|
|
15
|
-
V extends BaseMarkerLayerInfo[T] = BaseMarkerLayerInfo[T],
|
|
16
|
-
> {
|
|
17
|
-
// 图层类型与控制器类的映射关系
|
|
18
|
-
static layerClassMap = new Map<string, BaseMarkerLayerTypeClass>();
|
|
19
|
-
/**
|
|
20
|
-
* 注册图层类型与控制器类的关联
|
|
21
|
-
* @param {string} layerType - 图层类型
|
|
22
|
-
* @param {Function} layerClass - 图层控制器类
|
|
23
|
-
*/
|
|
24
|
-
static registerLayer(
|
|
25
|
-
layerType: MarkerLayerBaseType,
|
|
26
|
-
layerClass: BaseMarkerLayerTypeClass
|
|
27
|
-
) {
|
|
28
|
-
if (typeof layerType !== 'string' || typeof layerClass !== 'function') {
|
|
29
|
-
MapUtils.error('[LayerManager Error]: Invalid layer type or layer class');
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
BaseMarkerLayer.layerClassMap.set(layerType, layerClass);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
overlayList: Array<OverlayData<U
|
|
37
|
-
// 策略模式
|
|
38
|
-
rawLayerIns: V['layerIns'];
|
|
39
|
-
|
|
40
|
-
layerVisible: boolean = true;
|
|
41
|
-
|
|
42
|
-
layerName: string;
|
|
43
|
-
|
|
44
|
-
mapUtils: mapUtilsIns;
|
|
45
|
-
|
|
46
|
-
getIconUrl: (item: OverlayData<U>) => string;
|
|
47
|
-
|
|
48
|
-
layerType: MarkerLayerBaseType;
|
|
49
|
-
|
|
50
|
-
getOverlayOpts: (
|
|
51
|
-
item: OverlayData<U>,
|
|
52
|
-
index: number,
|
|
53
|
-
MapUtils: MapUtilsConstructor
|
|
54
|
-
) => V['overlayOpts'];
|
|
55
|
-
|
|
56
|
-
constructor(opts: LayerOpts<U, T>, mapUtils: mapUtilsIns) {
|
|
57
|
-
const { layerType, layerName, ...rest } = opts;
|
|
58
|
-
|
|
59
|
-
const OverlaysLayer = BaseMarkerLayer.layerClassMap.get(layerType);
|
|
60
|
-
|
|
61
|
-
if (OverlaysLayer) {
|
|
62
|
-
this.rawLayerIns = new OverlaysLayer(mapUtils.map, opts.overlayLayer);
|
|
63
|
-
} else {
|
|
64
|
-
throw new Error(
|
|
65
|
-
`[BaseMarkerLayer Error]: Invalid layer type ${layerType}`
|
|
66
|
-
);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
this.layerName = layerName;
|
|
70
|
-
|
|
71
|
-
this.mapUtils = mapUtils; //上层,mapUtils的实例
|
|
72
|
-
|
|
73
|
-
this.overlayList = opts.overlayList;
|
|
74
|
-
|
|
75
|
-
this.getIconUrl = opts.getIconUrl;
|
|
76
|
-
|
|
77
|
-
this.getOverlayOpts = opts.getOverlayOpts;
|
|
78
|
-
|
|
79
|
-
this.layerType = opts.layerType;
|
|
80
|
-
|
|
81
|
-
Object.assign(this, rest);
|
|
82
|
-
|
|
83
|
-
this.initLayer();
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// 图层事件,覆盖物初始化
|
|
87
|
-
initLayer() {
|
|
88
|
-
this.createOverlays(this.overlayList);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
/**
|
|
92
|
-
* 将覆盖物数据转换为覆盖物配置
|
|
93
|
-
* @param overlayList 覆盖物数据列表
|
|
94
|
-
* @returns 覆盖物配置列表
|
|
95
|
-
*/
|
|
96
|
-
convertOverlayDataToOpts(
|
|
97
|
-
overlayList: Array<OverlayData<U>>
|
|
98
|
-
): Array<V['overlayOpts']> {
|
|
99
|
-
const OverlaysLayer = BaseMarkerLayer.layerClassMap.get(this.layerType)!;
|
|
100
|
-
|
|
101
|
-
return overlayList.map((item, index) => {
|
|
102
|
-
return OverlaysLayer.convertOverlayDataToOvlOpts(
|
|
103
|
-
item,
|
|
104
|
-
index,
|
|
105
|
-
this.getIconUrl,
|
|
106
|
-
this.getOverlayOpts,
|
|
107
|
-
MapUtils
|
|
108
|
-
);
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
createOverlays(overlayList: Array<OverlayData>): Array<V['ovIns']> {
|
|
113
|
-
const markerListOpts: Array<V['overlayOpts']> =
|
|
114
|
-
this.convertOverlayDataToOpts(overlayList as Array<OverlayData<U>>);
|
|
115
|
-
|
|
116
|
-
return this.rawLayerIns.createOverlays(
|
|
117
|
-
// @ts-ignore
|
|
118
|
-
markerListOpts
|
|
119
|
-
);
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
overlayFitMap() {
|
|
123
|
-
this.rawLayerIns.overlayFitMap();
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
bindEventOverlays(clickType: AMap.EventType, callback: () => void) {
|
|
127
|
-
this.rawLayerIns.bindEventOverlay(clickType, callback);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
hide() {
|
|
131
|
-
this.layerVisible = false;
|
|
132
|
-
this.rawLayerIns.hide();
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
show() {
|
|
136
|
-
this.layerVisible = true;
|
|
137
|
-
this.rawLayerIns.show();
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
getAllOverlay() {
|
|
141
|
-
// 数据进行D会影响覆盖物,浅拷贝
|
|
142
|
-
return [...this.rawLayerIns.getAllOverlay()!];
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
destroy() {
|
|
146
|
-
// @ts-ignore
|
|
147
|
-
this.mapUtils.removeLayer(this); //从MapUtils中移除
|
|
148
|
-
this.rawLayerIns.destroy(); //地图层面移除
|
|
149
|
-
this.overlayList = [];
|
|
150
|
-
|
|
151
|
-
//TODO layer实例怎么销毁
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
clearAllOverlay() {
|
|
155
|
-
this.overlayList = [];
|
|
156
|
-
this.rawLayerIns.clearAllOvl();
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
reload() {
|
|
160
|
-
this.rawLayerIns.reload();
|
|
161
|
-
|
|
162
|
-
this.createOverlays(this.overlayList);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
findLayerOverlay(ovId: string | number) {
|
|
166
|
-
return this.rawLayerIns.findLayerOverlay(ovId);
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
add(overlayList: Array<OverlayData<U>>) {
|
|
170
|
-
const markerListOpts: Array<V['overlayOpts']> =
|
|
171
|
-
this.convertOverlayDataToOpts(overlayList as Array<OverlayData<U>>);
|
|
172
|
-
|
|
173
|
-
this.overlayList.push(...overlayList);
|
|
174
|
-
// 类型守卫 缩小实例范围
|
|
175
|
-
if (this.rawLayerIns instanceof MarkerLayer) {
|
|
176
|
-
this.rawLayerIns.add(markerListOpts as AMap.MarkerOptions[]);
|
|
177
|
-
} else if (this.rawLayerIns instanceof LabelMarkerLayer) {
|
|
178
|
-
this.rawLayerIns.add(markerListOpts as AMap.LabelMarkerOptions[]);
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
remove(ovs: Array<V['ovIns']> | string[]) {
|
|
183
|
-
// 处理MarkerLayer类型
|
|
184
|
-
if (this.rawLayerIns instanceof MarkerLayer) {
|
|
185
|
-
// 类型守卫:检查是否为Marker实例数组
|
|
186
|
-
const isMarkerArray = (arr: any[]): arr is AMap.Marker[] =>
|
|
187
|
-
arr[0] instanceof AMap.Marker;
|
|
188
|
-
|
|
189
|
-
if (!isMarkerArray(ovs)) {
|
|
190
|
-
// 根据ID查找覆盖物实例
|
|
191
|
-
const overlayInstances = ovs
|
|
192
|
-
.map(id => this.findLayerOverlay(id as string | number))
|
|
193
|
-
.filter((ovl): ovl is AMap.Marker => !!ovl);
|
|
194
|
-
|
|
195
|
-
this.rawLayerIns.remove(overlayInstances);
|
|
196
|
-
|
|
197
|
-
this.overlayList = this.overlayList.filter(
|
|
198
|
-
item => !(ovs as Array<string | number>).includes(item.id)
|
|
199
|
-
);
|
|
200
|
-
} else {
|
|
201
|
-
const ids = ovs.map(item => item.getExtData().id);
|
|
202
|
-
|
|
203
|
-
this.overlayList = this.overlayList.filter(
|
|
204
|
-
item => !(ids as Array<string | number>).includes(item.id)
|
|
205
|
-
);
|
|
206
|
-
// 直接使用覆盖物实例数组
|
|
207
|
-
this.rawLayerIns.remove(ovs as AMap.Marker[]);
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
// 处理LabelMarkerLayer类型
|
|
211
|
-
else if (this.rawLayerIns instanceof LabelMarkerLayer) {
|
|
212
|
-
// 类型守卫:检查是否为LabelMarker实例数组
|
|
213
|
-
const isLabelMarkerArray = (arr: any[]): arr is AMap.LabelMarker[] =>
|
|
214
|
-
arr[0] instanceof AMap.LabelMarker;
|
|
215
|
-
|
|
216
|
-
if (!isLabelMarkerArray(ovs)) {
|
|
217
|
-
// 根据ID查找覆盖物实例
|
|
218
|
-
const overlayInstances = ovs
|
|
219
|
-
.map(id => this.findLayerOverlay(id as string | number))
|
|
220
|
-
.filter((ovl): ovl is AMap.LabelMarker => !!ovl);
|
|
221
|
-
|
|
222
|
-
this.rawLayerIns.remove(overlayInstances);
|
|
223
|
-
|
|
224
|
-
this.overlayList = this.overlayList.filter(
|
|
225
|
-
item => !(ovs as Array<string | number>).includes(item.id)
|
|
226
|
-
);
|
|
227
|
-
} else {
|
|
228
|
-
const ids = ovs.map(item => item.getExtData().id);
|
|
229
|
-
|
|
230
|
-
this.overlayList = this.overlayList.filter(
|
|
231
|
-
item => !(ids as Array<string | number>).includes(item.id)
|
|
232
|
-
);
|
|
233
|
-
// 直接使用覆盖物实例数组
|
|
234
|
-
this.rawLayerIns.remove(ovs as AMap.LabelMarker[]);
|
|
235
|
-
}
|
|
236
|
-
}
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
refreshOverlayIcon(overlayId: string) {
|
|
240
|
-
const ovlDataIndex = this.overlayList.findIndex(
|
|
241
|
-
ovl => ovl.id === overlayId
|
|
242
|
-
);
|
|
243
|
-
|
|
244
|
-
if (ovlDataIndex === -1) {
|
|
245
|
-
//抛异常
|
|
246
|
-
return MapUtils.error(
|
|
247
|
-
`[BaseMarkerLayer Error]: Invalid overlayId ${overlayId}`
|
|
248
|
-
);
|
|
249
|
-
}
|
|
250
|
-
const OvlLayer = BaseMarkerLayer.layerClassMap.get(this.layerType);
|
|
251
|
-
|
|
252
|
-
const marker = this.rawLayerIns.findLayerOverlay(overlayId);
|
|
253
|
-
// 函数可以动态计算label,
|
|
254
|
-
const ovlOpts = OvlLayer!.convertOverlayDataToOvlOpts(
|
|
255
|
-
this.overlayList[ovlDataIndex],
|
|
256
|
-
ovlDataIndex,
|
|
257
|
-
this.getIconUrl,
|
|
258
|
-
this.getOverlayOpts,
|
|
259
|
-
MapUtils
|
|
260
|
-
);
|
|
261
|
-
|
|
262
|
-
const iconImageUrl = this.getIconUrl(this.overlayList[ovlDataIndex]);
|
|
263
|
-
|
|
264
|
-
if (this.rawLayerIns instanceof MarkerLayer) {
|
|
265
|
-
let icon = ovlOpts.icon! as AMap.Icon | string;
|
|
266
|
-
|
|
267
|
-
if (typeof icon === 'string') {
|
|
268
|
-
icon = iconImageUrl;
|
|
269
|
-
} else {
|
|
270
|
-
(icon as AMap.Icon).setImage(iconImageUrl);
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
(this.rawLayerIns as MarkerLayerIns).refreshOverlayIcon(
|
|
274
|
-
(marker as AMap.Marker)!,
|
|
275
|
-
icon
|
|
276
|
-
);
|
|
277
|
-
} else {
|
|
278
|
-
let icon = ovlOpts.icon! as AMap.LabelMarkerIconOptions;
|
|
279
|
-
|
|
280
|
-
icon.image = iconImageUrl;
|
|
281
|
-
|
|
282
|
-
this.rawLayerIns.refreshOverlayIcon((marker as AMap.LabelMarker)!, icon);
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
refreshOverlayLabel(overlayId: string | number) {
|
|
287
|
-
const ovlDataIndex = this.overlayList.findIndex(
|
|
288
|
-
ovl => ovl.id === overlayId
|
|
289
|
-
);
|
|
290
|
-
|
|
291
|
-
if (ovlDataIndex === -1) {
|
|
292
|
-
//抛异常
|
|
293
|
-
return MapUtils.error(`[Layer Error]: Invalid overlayId ${overlayId}`);
|
|
294
|
-
}
|
|
295
|
-
const OvlLayer = BaseMarkerLayer.layerClassMap.get(this.layerType);
|
|
296
|
-
|
|
297
|
-
// marker拿到手
|
|
298
|
-
const marker = this.rawLayerIns.findLayerOverlay(overlayId)!;
|
|
299
|
-
|
|
300
|
-
// 函数可以动态计算label,
|
|
301
|
-
const ovlOpts = OvlLayer!.convertOverlayDataToOvlOpts(
|
|
302
|
-
this.overlayList[ovlDataIndex],
|
|
303
|
-
ovlDataIndex,
|
|
304
|
-
this.getIconUrl,
|
|
305
|
-
this.getOverlayOpts,
|
|
306
|
-
MapUtils
|
|
307
|
-
);
|
|
308
|
-
|
|
309
|
-
if (this.rawLayerIns instanceof MarkerLayer) {
|
|
310
|
-
this.rawLayerIns.refreshOverlayLabel(
|
|
311
|
-
marker as AMap.Marker,
|
|
312
|
-
(ovlOpts as AMap.MarkerOptions).label as {
|
|
313
|
-
content: string;
|
|
314
|
-
direction: string;
|
|
315
|
-
offset: [number, number] | Array<number>;
|
|
316
|
-
}
|
|
317
|
-
);
|
|
318
|
-
} else {
|
|
319
|
-
this.rawLayerIns.refreshOverlayLabel(
|
|
320
|
-
marker as AMap.LabelMarker,
|
|
321
|
-
ovlOpts.text as AMap.LabelMarkerTextOptions
|
|
322
|
-
);
|
|
323
|
-
}
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
// 返回原始图层对象
|
|
327
|
-
getRawLayer() {
|
|
328
|
-
return this.rawLayerIns.rawLayer;
|
|
329
|
-
}
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
BaseMarkerLayer.registerLayer('markerLayer', MarkerLayer);
|
|
333
|
-
BaseMarkerLayer.registerLayer('labelMarkerLayer', LabelMarkerLayer);
|
|
334
|
-
|
|
335
|
-
// MarkerLayer 类型
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
export type
|
|
340
|
-
|
|
341
|
-
//
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
1
|
+
import LabelMarkerLayer from './LabelMarkerLayer';
|
|
2
|
+
import MarkerLayer from './MarkerLayer';
|
|
3
|
+
import type {
|
|
4
|
+
MarkerLayerBaseType,
|
|
5
|
+
LayerOpts,
|
|
6
|
+
BaseMarkerLayerInfo,
|
|
7
|
+
OverlayData,
|
|
8
|
+
} from '@/types';
|
|
9
|
+
import { MapUtils } from '@/MapUtils';
|
|
10
|
+
import type { MapUtilsConstructor, mapUtilsIns } from '@/MapUtils';
|
|
11
|
+
|
|
12
|
+
class BaseMarkerLayer<
|
|
13
|
+
U extends object,
|
|
14
|
+
T extends MarkerLayerBaseType = 'markerLayer',
|
|
15
|
+
V extends BaseMarkerLayerInfo[T] = BaseMarkerLayerInfo[T],
|
|
16
|
+
> {
|
|
17
|
+
// 图层类型与控制器类的映射关系
|
|
18
|
+
static layerClassMap = new Map<string, BaseMarkerLayerTypeClass>();
|
|
19
|
+
/**
|
|
20
|
+
* 注册图层类型与控制器类的关联
|
|
21
|
+
* @param {string} layerType - 图层类型
|
|
22
|
+
* @param {Function} layerClass - 图层控制器类
|
|
23
|
+
*/
|
|
24
|
+
static registerLayer(
|
|
25
|
+
layerType: MarkerLayerBaseType,
|
|
26
|
+
layerClass: BaseMarkerLayerTypeClass
|
|
27
|
+
) {
|
|
28
|
+
if (typeof layerType !== 'string' || typeof layerClass !== 'function') {
|
|
29
|
+
MapUtils.error('[LayerManager Error]: Invalid layer type or layer class');
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
BaseMarkerLayer.layerClassMap.set(layerType, layerClass);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
overlayList: Array<OverlayData<U>> = [];
|
|
37
|
+
// 策略模式
|
|
38
|
+
rawLayerIns: V['layerIns'];
|
|
39
|
+
|
|
40
|
+
layerVisible: boolean = true;
|
|
41
|
+
|
|
42
|
+
layerName: string;
|
|
43
|
+
|
|
44
|
+
mapUtils: mapUtilsIns;
|
|
45
|
+
|
|
46
|
+
getIconUrl: (item: OverlayData<U>) => string;
|
|
47
|
+
|
|
48
|
+
layerType: MarkerLayerBaseType;
|
|
49
|
+
|
|
50
|
+
getOverlayOpts: (
|
|
51
|
+
item: OverlayData<U>,
|
|
52
|
+
index: number,
|
|
53
|
+
MapUtils: MapUtilsConstructor
|
|
54
|
+
) => V['overlayOpts'];
|
|
55
|
+
|
|
56
|
+
constructor(opts: LayerOpts<U, T>, mapUtils: mapUtilsIns) {
|
|
57
|
+
const { layerType, layerName, ...rest } = opts;
|
|
58
|
+
|
|
59
|
+
const OverlaysLayer = BaseMarkerLayer.layerClassMap.get(layerType);
|
|
60
|
+
|
|
61
|
+
if (OverlaysLayer) {
|
|
62
|
+
this.rawLayerIns = new OverlaysLayer(mapUtils.map, opts.overlayLayer);
|
|
63
|
+
} else {
|
|
64
|
+
throw new Error(
|
|
65
|
+
`[BaseMarkerLayer Error]: Invalid layer type ${layerType}`
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
this.layerName = layerName;
|
|
70
|
+
|
|
71
|
+
this.mapUtils = mapUtils; //上层,mapUtils的实例
|
|
72
|
+
|
|
73
|
+
this.overlayList = opts.overlayList;
|
|
74
|
+
|
|
75
|
+
this.getIconUrl = opts.getIconUrl;
|
|
76
|
+
|
|
77
|
+
this.getOverlayOpts = opts.getOverlayOpts;
|
|
78
|
+
|
|
79
|
+
this.layerType = opts.layerType;
|
|
80
|
+
|
|
81
|
+
Object.assign(this, rest);
|
|
82
|
+
|
|
83
|
+
this.initLayer();
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// 图层事件,覆盖物初始化
|
|
87
|
+
initLayer() {
|
|
88
|
+
this.createOverlays(this.overlayList);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* 将覆盖物数据转换为覆盖物配置
|
|
93
|
+
* @param overlayList 覆盖物数据列表
|
|
94
|
+
* @returns 覆盖物配置列表
|
|
95
|
+
*/
|
|
96
|
+
convertOverlayDataToOpts(
|
|
97
|
+
overlayList: Array<OverlayData<U>>
|
|
98
|
+
): Array<V['overlayOpts']> {
|
|
99
|
+
const OverlaysLayer = BaseMarkerLayer.layerClassMap.get(this.layerType)!;
|
|
100
|
+
|
|
101
|
+
return overlayList.map((item, index) => {
|
|
102
|
+
return OverlaysLayer.convertOverlayDataToOvlOpts(
|
|
103
|
+
item,
|
|
104
|
+
index,
|
|
105
|
+
this.getIconUrl,
|
|
106
|
+
this.getOverlayOpts,
|
|
107
|
+
MapUtils
|
|
108
|
+
);
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
createOverlays(overlayList: Array<OverlayData>): Array<V['ovIns']> {
|
|
113
|
+
const markerListOpts: Array<V['overlayOpts']> =
|
|
114
|
+
this.convertOverlayDataToOpts(overlayList as Array<OverlayData<U>>);
|
|
115
|
+
|
|
116
|
+
return this.rawLayerIns.createOverlays(
|
|
117
|
+
// @ts-ignore
|
|
118
|
+
markerListOpts
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
overlayFitMap() {
|
|
123
|
+
this.rawLayerIns.overlayFitMap();
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
bindEventOverlays(clickType: AMap.EventType, callback: () => void) {
|
|
127
|
+
this.rawLayerIns.bindEventOverlay(clickType, callback);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
hide() {
|
|
131
|
+
this.layerVisible = false;
|
|
132
|
+
this.rawLayerIns.hide();
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
show() {
|
|
136
|
+
this.layerVisible = true;
|
|
137
|
+
this.rawLayerIns.show();
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
getAllOverlay() {
|
|
141
|
+
// 数据进行D会影响覆盖物,浅拷贝
|
|
142
|
+
return [...this.rawLayerIns.getAllOverlay()!];
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
destroy() {
|
|
146
|
+
// @ts-ignore
|
|
147
|
+
this.mapUtils.removeLayer(this); //从MapUtils中移除
|
|
148
|
+
this.rawLayerIns.destroy(); //地图层面移除
|
|
149
|
+
this.overlayList = [];
|
|
150
|
+
|
|
151
|
+
//TODO layer实例怎么销毁
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
clearAllOverlay() {
|
|
155
|
+
this.overlayList = [];
|
|
156
|
+
this.rawLayerIns.clearAllOvl();
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
reload() {
|
|
160
|
+
this.rawLayerIns.reload();
|
|
161
|
+
|
|
162
|
+
this.createOverlays(this.overlayList);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
findLayerOverlay(ovId: string | number) {
|
|
166
|
+
return this.rawLayerIns.findLayerOverlay(ovId);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
add(overlayList: Array<OverlayData<U>>) {
|
|
170
|
+
const markerListOpts: Array<V['overlayOpts']> =
|
|
171
|
+
this.convertOverlayDataToOpts(overlayList as Array<OverlayData<U>>);
|
|
172
|
+
|
|
173
|
+
this.overlayList.push(...overlayList);
|
|
174
|
+
// 类型守卫 缩小实例范围
|
|
175
|
+
if (this.rawLayerIns instanceof MarkerLayer) {
|
|
176
|
+
this.rawLayerIns.add(markerListOpts as AMap.MarkerOptions[]);
|
|
177
|
+
} else if (this.rawLayerIns instanceof LabelMarkerLayer) {
|
|
178
|
+
this.rawLayerIns.add(markerListOpts as AMap.LabelMarkerOptions[]);
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
remove(ovs: Array<V['ovIns']> | string[]) {
|
|
183
|
+
// 处理MarkerLayer类型
|
|
184
|
+
if (this.rawLayerIns instanceof MarkerLayer) {
|
|
185
|
+
// 类型守卫:检查是否为Marker实例数组
|
|
186
|
+
const isMarkerArray = (arr: any[]): arr is AMap.Marker[] =>
|
|
187
|
+
arr[0] instanceof AMap.Marker;
|
|
188
|
+
|
|
189
|
+
if (!isMarkerArray(ovs)) {
|
|
190
|
+
// 根据ID查找覆盖物实例
|
|
191
|
+
const overlayInstances = ovs
|
|
192
|
+
.map(id => this.findLayerOverlay(id as string | number))
|
|
193
|
+
.filter((ovl): ovl is AMap.Marker => !!ovl);
|
|
194
|
+
|
|
195
|
+
this.rawLayerIns.remove(overlayInstances);
|
|
196
|
+
|
|
197
|
+
this.overlayList = this.overlayList.filter(
|
|
198
|
+
item => !(ovs as Array<string | number>).includes(item.id)
|
|
199
|
+
);
|
|
200
|
+
} else {
|
|
201
|
+
const ids = ovs.map(item => item.getExtData().id);
|
|
202
|
+
|
|
203
|
+
this.overlayList = this.overlayList.filter(
|
|
204
|
+
item => !(ids as Array<string | number>).includes(item.id)
|
|
205
|
+
);
|
|
206
|
+
// 直接使用覆盖物实例数组
|
|
207
|
+
this.rawLayerIns.remove(ovs as AMap.Marker[]);
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
// 处理LabelMarkerLayer类型
|
|
211
|
+
else if (this.rawLayerIns instanceof LabelMarkerLayer) {
|
|
212
|
+
// 类型守卫:检查是否为LabelMarker实例数组
|
|
213
|
+
const isLabelMarkerArray = (arr: any[]): arr is AMap.LabelMarker[] =>
|
|
214
|
+
arr[0] instanceof AMap.LabelMarker;
|
|
215
|
+
|
|
216
|
+
if (!isLabelMarkerArray(ovs)) {
|
|
217
|
+
// 根据ID查找覆盖物实例
|
|
218
|
+
const overlayInstances = ovs
|
|
219
|
+
.map(id => this.findLayerOverlay(id as string | number))
|
|
220
|
+
.filter((ovl): ovl is AMap.LabelMarker => !!ovl);
|
|
221
|
+
|
|
222
|
+
this.rawLayerIns.remove(overlayInstances);
|
|
223
|
+
|
|
224
|
+
this.overlayList = this.overlayList.filter(
|
|
225
|
+
item => !(ovs as Array<string | number>).includes(item.id)
|
|
226
|
+
);
|
|
227
|
+
} else {
|
|
228
|
+
const ids = ovs.map(item => item.getExtData().id);
|
|
229
|
+
|
|
230
|
+
this.overlayList = this.overlayList.filter(
|
|
231
|
+
item => !(ids as Array<string | number>).includes(item.id)
|
|
232
|
+
);
|
|
233
|
+
// 直接使用覆盖物实例数组
|
|
234
|
+
this.rawLayerIns.remove(ovs as AMap.LabelMarker[]);
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
refreshOverlayIcon(overlayId: string) {
|
|
240
|
+
const ovlDataIndex = this.overlayList.findIndex(
|
|
241
|
+
ovl => ovl.id === overlayId
|
|
242
|
+
);
|
|
243
|
+
|
|
244
|
+
if (ovlDataIndex === -1) {
|
|
245
|
+
//抛异常
|
|
246
|
+
return MapUtils.error(
|
|
247
|
+
`[BaseMarkerLayer Error]: Invalid overlayId ${overlayId}`
|
|
248
|
+
);
|
|
249
|
+
}
|
|
250
|
+
const OvlLayer = BaseMarkerLayer.layerClassMap.get(this.layerType);
|
|
251
|
+
|
|
252
|
+
const marker = this.rawLayerIns.findLayerOverlay(overlayId);
|
|
253
|
+
// 函数可以动态计算label,
|
|
254
|
+
const ovlOpts = OvlLayer!.convertOverlayDataToOvlOpts(
|
|
255
|
+
this.overlayList[ovlDataIndex],
|
|
256
|
+
ovlDataIndex,
|
|
257
|
+
this.getIconUrl,
|
|
258
|
+
this.getOverlayOpts,
|
|
259
|
+
MapUtils
|
|
260
|
+
);
|
|
261
|
+
|
|
262
|
+
const iconImageUrl = this.getIconUrl(this.overlayList[ovlDataIndex]);
|
|
263
|
+
|
|
264
|
+
if (this.rawLayerIns instanceof MarkerLayer) {
|
|
265
|
+
let icon = ovlOpts.icon! as AMap.Icon | string;
|
|
266
|
+
|
|
267
|
+
if (typeof icon === 'string') {
|
|
268
|
+
icon = iconImageUrl;
|
|
269
|
+
} else {
|
|
270
|
+
(icon as AMap.Icon).setImage(iconImageUrl);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
(this.rawLayerIns as MarkerLayerIns).refreshOverlayIcon(
|
|
274
|
+
(marker as AMap.Marker)!,
|
|
275
|
+
icon
|
|
276
|
+
);
|
|
277
|
+
} else {
|
|
278
|
+
let icon = ovlOpts.icon! as AMap.LabelMarkerIconOptions;
|
|
279
|
+
|
|
280
|
+
icon.image = iconImageUrl;
|
|
281
|
+
|
|
282
|
+
this.rawLayerIns.refreshOverlayIcon((marker as AMap.LabelMarker)!, icon);
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
refreshOverlayLabel(overlayId: string | number) {
|
|
287
|
+
const ovlDataIndex = this.overlayList.findIndex(
|
|
288
|
+
ovl => ovl.id === overlayId
|
|
289
|
+
);
|
|
290
|
+
|
|
291
|
+
if (ovlDataIndex === -1) {
|
|
292
|
+
//抛异常
|
|
293
|
+
return MapUtils.error(`[Layer Error]: Invalid overlayId ${overlayId}`);
|
|
294
|
+
}
|
|
295
|
+
const OvlLayer = BaseMarkerLayer.layerClassMap.get(this.layerType);
|
|
296
|
+
|
|
297
|
+
// marker拿到手
|
|
298
|
+
const marker = this.rawLayerIns.findLayerOverlay(overlayId)!;
|
|
299
|
+
|
|
300
|
+
// 函数可以动态计算label,
|
|
301
|
+
const ovlOpts = OvlLayer!.convertOverlayDataToOvlOpts(
|
|
302
|
+
this.overlayList[ovlDataIndex],
|
|
303
|
+
ovlDataIndex,
|
|
304
|
+
this.getIconUrl,
|
|
305
|
+
this.getOverlayOpts,
|
|
306
|
+
MapUtils
|
|
307
|
+
);
|
|
308
|
+
|
|
309
|
+
if (this.rawLayerIns instanceof MarkerLayer) {
|
|
310
|
+
this.rawLayerIns.refreshOverlayLabel(
|
|
311
|
+
marker as AMap.Marker,
|
|
312
|
+
(ovlOpts as AMap.MarkerOptions).label as {
|
|
313
|
+
content: string;
|
|
314
|
+
direction: string;
|
|
315
|
+
offset: [number, number] | Array<number>;
|
|
316
|
+
}
|
|
317
|
+
);
|
|
318
|
+
} else {
|
|
319
|
+
this.rawLayerIns.refreshOverlayLabel(
|
|
320
|
+
marker as AMap.LabelMarker,
|
|
321
|
+
ovlOpts.text as AMap.LabelMarkerTextOptions
|
|
322
|
+
);
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
// 返回原始图层对象
|
|
327
|
+
getRawLayer() {
|
|
328
|
+
return this.rawLayerIns.rawLayer;
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
BaseMarkerLayer.registerLayer('markerLayer', MarkerLayer);
|
|
333
|
+
BaseMarkerLayer.registerLayer('labelMarkerLayer', LabelMarkerLayer);
|
|
334
|
+
|
|
335
|
+
// MarkerLayer 类型
|
|
336
|
+
/**
|
|
337
|
+
* @ignore
|
|
338
|
+
*/
|
|
339
|
+
export type MarkerLayerIns = InstanceType<typeof MarkerLayer>;
|
|
340
|
+
|
|
341
|
+
// LabelMarkerLayer 类型
|
|
342
|
+
/**
|
|
343
|
+
* @ignore
|
|
344
|
+
*/
|
|
345
|
+
export type LabelMarkerLayerIns = InstanceType<typeof LabelMarkerLayer>;
|
|
346
|
+
|
|
347
|
+
// 所有图层类型的联合类型
|
|
348
|
+
/**
|
|
349
|
+
* @ignore
|
|
350
|
+
*/
|
|
351
|
+
export type BaseMarkerLayerTypeIns = MarkerLayerIns | LabelMarkerLayerIns;
|
|
352
|
+
/**
|
|
353
|
+
* @ignore
|
|
354
|
+
*/
|
|
355
|
+
export type BaseMarkerLayerTypeClass =
|
|
356
|
+
| typeof MarkerLayer
|
|
357
|
+
| typeof LabelMarkerLayer;
|
|
358
|
+
/**
|
|
359
|
+
* @ignore
|
|
360
|
+
*/
|
|
361
|
+
export type BaseMarkerLayerClass = typeof BaseMarkerLayer;
|
|
362
|
+
/**
|
|
363
|
+
* @ignore
|
|
364
|
+
*/
|
|
365
|
+
export type BaseMarkerLayerIns = InstanceType<BaseMarkerLayerClass>;
|
|
366
|
+
|
|
367
|
+
export { LabelMarkerLayer, MarkerLayer };
|
|
368
|
+
|
|
369
|
+
export default BaseMarkerLayer;
|