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,574 +1,574 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
-
<meta
|
|
7
|
-
name="viewport"
|
|
8
|
-
content="initial-scale=1.0, user-scalable=no, width=device-width"
|
|
9
|
-
/>
|
|
10
|
-
<link
|
|
11
|
-
rel="stylesheet"
|
|
12
|
-
href="https://cdn.jsdelivr.net/npm/reset.css@5.0.2/reset.min.css"
|
|
13
|
-
/>
|
|
14
|
-
<link
|
|
15
|
-
rel="stylesheet"
|
|
16
|
-
href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
|
|
17
|
-
/>
|
|
18
|
-
<title>地图显示</title>
|
|
19
|
-
<style>
|
|
20
|
-
html,
|
|
21
|
-
body,
|
|
22
|
-
#container {
|
|
23
|
-
width: 100%;
|
|
24
|
-
height: 100%;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.labelTitle {
|
|
28
|
-
background-color: rgba(27, 204, 253, 0.6588);
|
|
29
|
-
border-radius: 2px;
|
|
30
|
-
padding: 10px 15px;
|
|
31
|
-
font-size: 18px;
|
|
32
|
-
color: #fff;
|
|
33
|
-
border: 1px solid rgba(27, 204, 253, 0.6588);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.control-panel {
|
|
37
|
-
position: fixed;
|
|
38
|
-
top: 10px;
|
|
39
|
-
left: 10px;
|
|
40
|
-
z-index: 1000;
|
|
41
|
-
background-color: white;
|
|
42
|
-
padding: 10px;
|
|
43
|
-
border-radius: 5px;
|
|
44
|
-
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.control-panel button {
|
|
48
|
-
margin: 5px;
|
|
49
|
-
padding: 8px 12px;
|
|
50
|
-
cursor: pointer;
|
|
51
|
-
}
|
|
52
|
-
</style>
|
|
53
|
-
</head>
|
|
54
|
-
<body>
|
|
55
|
-
<div id="container"></div>
|
|
56
|
-
<!-- 控制按钮面板 -->
|
|
57
|
-
<div class="control-panel">
|
|
58
|
-
<button id="addBtn">添加标记</button>
|
|
59
|
-
<button id="removeBtn">删除标记</button>
|
|
60
|
-
<button id="removeByIdBtn">按ID删除</button>
|
|
61
|
-
<br /><br />
|
|
62
|
-
<input type="text" id="markerIdInput" placeholder="输入标记ID" />
|
|
63
|
-
<button id="toggleLabelBtn">切换标签显示</button>
|
|
64
|
-
<button id="refreshIconBtn">刷新图标</button>
|
|
65
|
-
<br /><br />
|
|
66
|
-
<button id="fitViewBtn">自适应视图</button>
|
|
67
|
-
<button id="zoomOutBtn">缩小视图</button>
|
|
68
|
-
<br /><br />
|
|
69
|
-
<button id="showBtn">显示图层</button>
|
|
70
|
-
<button id="hideBtn">隐藏图层</button>
|
|
71
|
-
<button id="getAllBtn">获取所有标记</button>
|
|
72
|
-
<br /><br />
|
|
73
|
-
<button id="clearAllBtn">清空所有标记</button>
|
|
74
|
-
<button id="reloadBtn">重新加载图层</button>
|
|
75
|
-
<button id="destroyBtn">销毁图层</button>
|
|
76
|
-
</div>
|
|
77
|
-
<!-- 加载地图JSAPI脚本 -->
|
|
78
|
-
<!-- <script src="../dist/index.js"></script> -->
|
|
79
|
-
<script>
|
|
80
|
-
const data = [
|
|
81
|
-
{
|
|
82
|
-
id: 5194,
|
|
83
|
-
sydmc: '世茂滨江花园南区',
|
|
84
|
-
sydlx: '1',
|
|
85
|
-
ssqy: '潍坊街道',
|
|
86
|
-
cphm: '沪EB2317',
|
|
87
|
-
jd: 121.515844,
|
|
88
|
-
wd: 31.218427,
|
|
89
|
-
zt: 1,
|
|
90
|
-
sbsj: '2025-07-16 10:09:37',
|
|
91
|
-
dwsx: '1',
|
|
92
|
-
},
|
|
93
|
-
{
|
|
94
|
-
id: 2972,
|
|
95
|
-
sydmc: '滨江兰庭',
|
|
96
|
-
sydlx: '1',
|
|
97
|
-
ssqy: '潍坊街道',
|
|
98
|
-
cphm: '沪EB2317',
|
|
99
|
-
jd: 121.516452,
|
|
100
|
-
wd: 31.220885,
|
|
101
|
-
zt: 1,
|
|
102
|
-
sbsj: '2025-07-16 10:07:29',
|
|
103
|
-
dwsx: '0',
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
id: 2842,
|
|
107
|
-
sydmc: '浦城小区',
|
|
108
|
-
sydlx: '1',
|
|
109
|
-
ssqy: '潍坊街道',
|
|
110
|
-
cphm: '沪EB2317',
|
|
111
|
-
jd: 121.514702,
|
|
112
|
-
wd: 31.225064,
|
|
113
|
-
zt: 1,
|
|
114
|
-
sbsj: '2025-07-16 10:07:29',
|
|
115
|
-
dwsx: '1',
|
|
116
|
-
},
|
|
117
|
-
{
|
|
118
|
-
id: 1182,
|
|
119
|
-
sydmc: '南泉大楼',
|
|
120
|
-
sydlx: '1',
|
|
121
|
-
ssqy: '潍坊街道',
|
|
122
|
-
cphm: '沪EB2317',
|
|
123
|
-
jd: 121.521759,
|
|
124
|
-
wd: 31.219519,
|
|
125
|
-
zt: 1,
|
|
126
|
-
sbsj: '2025-07-16 10:07:29',
|
|
127
|
-
dwsx: '1',
|
|
128
|
-
},
|
|
129
|
-
{
|
|
130
|
-
id: 509,
|
|
131
|
-
sydmc: '东南新村',
|
|
132
|
-
sydlx: '1',
|
|
133
|
-
ssqy: '潍坊街道',
|
|
134
|
-
cphm: '沪EB2317',
|
|
135
|
-
jd: 121.515997,
|
|
136
|
-
wd: 31.225962,
|
|
137
|
-
zt: 1,
|
|
138
|
-
sbsj: '2025-07-16 10:07:29',
|
|
139
|
-
dwsx: '0',
|
|
140
|
-
},
|
|
141
|
-
{
|
|
142
|
-
id: 1603,
|
|
143
|
-
sydmc: '天后宫大楼',
|
|
144
|
-
sydlx: '1',
|
|
145
|
-
ssqy: '潍坊街道',
|
|
146
|
-
cphm: '沪EB2317',
|
|
147
|
-
jd: 121.515854,
|
|
148
|
-
wd: 31.226379,
|
|
149
|
-
zt: 1,
|
|
150
|
-
sbsj: '2025-07-16 10:07:29',
|
|
151
|
-
dwsx: '0',
|
|
152
|
-
},
|
|
153
|
-
{
|
|
154
|
-
id: 974,
|
|
155
|
-
sydmc: '兰园小区',
|
|
156
|
-
sydlx: '1',
|
|
157
|
-
ssqy: '潍坊街道',
|
|
158
|
-
cphm: '沪EB2317',
|
|
159
|
-
jd: 121.513274,
|
|
160
|
-
wd: 31.224613,
|
|
161
|
-
zt: 1,
|
|
162
|
-
sbsj: '2025-07-16 10:07:29',
|
|
163
|
-
dwsx: '0',
|
|
164
|
-
},
|
|
165
|
-
{
|
|
166
|
-
id: 3168,
|
|
167
|
-
sydmc: '百富达公寓',
|
|
168
|
-
sydlx: '1',
|
|
169
|
-
ssqy: '潍坊街道',
|
|
170
|
-
cphm: '沪EB2317',
|
|
171
|
-
jd: 121.517998,
|
|
172
|
-
wd: 31.219241,
|
|
173
|
-
zt: 1,
|
|
174
|
-
sbsj: '2025-07-16 10:07:29',
|
|
175
|
-
dwsx: '1',
|
|
176
|
-
},
|
|
177
|
-
{
|
|
178
|
-
id: 3526,
|
|
179
|
-
sydmc: '蔚蓝海岸天科苑',
|
|
180
|
-
sydlx: '1',
|
|
181
|
-
ssqy: '潍坊街道',
|
|
182
|
-
cphm: '沪EB2317',
|
|
183
|
-
jd: 121.51708,
|
|
184
|
-
wd: 31.220443,
|
|
185
|
-
zt: 1,
|
|
186
|
-
sbsj: '2025-07-16 10:07:29',
|
|
187
|
-
dwsx: '1',
|
|
188
|
-
},
|
|
189
|
-
{
|
|
190
|
-
id: 3059,
|
|
191
|
-
sydmc: '爱建大楼',
|
|
192
|
-
sydlx: '1',
|
|
193
|
-
ssqy: '潍坊街道',
|
|
194
|
-
cphm: '沪EB2317',
|
|
195
|
-
jd: 121.517637,
|
|
196
|
-
wd: 31.222101,
|
|
197
|
-
zt: 1,
|
|
198
|
-
sbsj: '2025-07-16 10:07:29',
|
|
199
|
-
dwsx: '1',
|
|
200
|
-
},
|
|
201
|
-
{
|
|
202
|
-
id: 3253,
|
|
203
|
-
sydmc: '竹南小区',
|
|
204
|
-
sydlx: '1',
|
|
205
|
-
ssqy: '潍坊街道',
|
|
206
|
-
cphm: '沪EB2317',
|
|
207
|
-
jd: 121.529235,
|
|
208
|
-
wd: 31.22615,
|
|
209
|
-
zt: 1,
|
|
210
|
-
sbsj: '2025-07-16 10:07:29',
|
|
211
|
-
dwsx: '1',
|
|
212
|
-
},
|
|
213
|
-
{
|
|
214
|
-
id: 1465,
|
|
215
|
-
sydmc: '地铁4号线世纪大道站',
|
|
216
|
-
sydlx: '0',
|
|
217
|
-
ssqy: '潍坊街道',
|
|
218
|
-
cphm: '沪EB2317',
|
|
219
|
-
jd: 121.528294,
|
|
220
|
-
wd: 31.228321,
|
|
221
|
-
zt: 1,
|
|
222
|
-
sbsj: '2025-07-16 10:07:29',
|
|
223
|
-
dwsx: '1',
|
|
224
|
-
},
|
|
225
|
-
{
|
|
226
|
-
id: 879,
|
|
227
|
-
sydmc: '众城公寓',
|
|
228
|
-
sydlx: '1',
|
|
229
|
-
ssqy: '潍坊街道',
|
|
230
|
-
cphm: '沪EB2317',
|
|
231
|
-
jd: 121.530018,
|
|
232
|
-
wd: 31.224475,
|
|
233
|
-
zt: 1,
|
|
234
|
-
sbsj: '2025-07-16 10:07:29',
|
|
235
|
-
dwsx: '0',
|
|
236
|
-
},
|
|
237
|
-
{
|
|
238
|
-
id: 3067,
|
|
239
|
-
sydmc: '爵士大厦',
|
|
240
|
-
sydlx: '1',
|
|
241
|
-
ssqy: '潍坊街道',
|
|
242
|
-
cphm: '沪EB2317',
|
|
243
|
-
jd: 121.529722,
|
|
244
|
-
wd: 31.225217,
|
|
245
|
-
zt: 1,
|
|
246
|
-
sbsj: '2025-07-16 10:07:29',
|
|
247
|
-
dwsx: '1',
|
|
248
|
-
},
|
|
249
|
-
{
|
|
250
|
-
id: 2726,
|
|
251
|
-
sydmc: '浦东南路1780弄',
|
|
252
|
-
sydlx: '1',
|
|
253
|
-
ssqy: '潍坊街道',
|
|
254
|
-
cphm: '沪EB2317',
|
|
255
|
-
jd: 121.518546,
|
|
256
|
-
wd: 31.216307,
|
|
257
|
-
zt: 1,
|
|
258
|
-
sbsj: '2025-07-16 10:07:29',
|
|
259
|
-
dwsx: '0',
|
|
260
|
-
},
|
|
261
|
-
{
|
|
262
|
-
id: 913,
|
|
263
|
-
sydmc: '保利One56',
|
|
264
|
-
sydlx: '1',
|
|
265
|
-
ssqy: '潍坊街道',
|
|
266
|
-
cphm: '沪EB2317',
|
|
267
|
-
jd: 121.513294,
|
|
268
|
-
wd: 31.21825,
|
|
269
|
-
zt: 1,
|
|
270
|
-
sbsj: '2025-07-16 10:07:29',
|
|
271
|
-
dwsx: '0',
|
|
272
|
-
},
|
|
273
|
-
{
|
|
274
|
-
id: 582,
|
|
275
|
-
sydmc: '东港公寓',
|
|
276
|
-
sydlx: '1',
|
|
277
|
-
ssqy: '潍坊街道',
|
|
278
|
-
cphm: '沪EB2317',
|
|
279
|
-
jd: 121.518218,
|
|
280
|
-
wd: 31.218001,
|
|
281
|
-
zt: 1,
|
|
282
|
-
sbsj: '2025-07-16 10:07:29',
|
|
283
|
-
dwsx: '0',
|
|
284
|
-
},
|
|
285
|
-
];
|
|
286
|
-
|
|
287
|
-
window.onload = () => {
|
|
288
|
-
const { createMapUtils } =
|
|
289
|
-
|
|
290
|
-
const loaderOpts = {
|
|
291
|
-
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
292
|
-
plugins: ['AMap.MapType', 'AMap.MoveAnimation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
293
|
-
key: '9506c73ed67acb0a09f1aabf88df4819',
|
|
294
|
-
};
|
|
295
|
-
|
|
296
|
-
test();
|
|
297
|
-
|
|
298
|
-
async function test() {
|
|
299
|
-
const mapUtils = await createMapUtils(
|
|
300
|
-
{
|
|
301
|
-
viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
|
|
302
|
-
zoom: 11, // 初始化地图层级
|
|
303
|
-
center: [data[0].jd, data[1].wd], // 初始化地图中心点
|
|
304
|
-
mountSelector: 'container',
|
|
305
|
-
},
|
|
306
|
-
loaderOpts
|
|
307
|
-
);
|
|
308
|
-
|
|
309
|
-
window.cleanPointLayer = mapUtils.createBaseMarkerLayer({
|
|
310
|
-
layerType: 'labelMarkerLayer',
|
|
311
|
-
layerName: 'cleanLabelMarkerPointLayer',
|
|
312
|
-
getIconUrl(item) {
|
|
313
|
-
if (window.flag) {
|
|
314
|
-
return '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png';
|
|
315
|
-
}
|
|
316
|
-
return '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png';
|
|
317
|
-
},
|
|
318
|
-
getOverlayOpts(item, index, MapUtils) {
|
|
319
|
-
return {
|
|
320
|
-
name: item.name,
|
|
321
|
-
text: {
|
|
322
|
-
direction: 'top',
|
|
323
|
-
content: item.overlayData.title,
|
|
324
|
-
style: {
|
|
325
|
-
fontSize: 18,
|
|
326
|
-
fillColor: '#fff',
|
|
327
|
-
strokeColor: '#37e9bd',
|
|
328
|
-
strokeWidth: 5,
|
|
329
|
-
},
|
|
330
|
-
zooms: [1, 20],
|
|
331
|
-
},
|
|
332
|
-
/* label: {
|
|
333
|
-
content: `<div class="labelTitle">${item.overlayData.title}</div>`,
|
|
334
|
-
offset: MapUtils.Pixel(0, -5),
|
|
335
|
-
direction: 'top',
|
|
336
|
-
}, */
|
|
337
|
-
};
|
|
338
|
-
},
|
|
339
|
-
overlayList: data.slice(0, 10).map(item => {
|
|
340
|
-
return {
|
|
341
|
-
overlayData: {
|
|
342
|
-
lon: item.jd,
|
|
343
|
-
lat: item.wd,
|
|
344
|
-
title: item.sydmc,
|
|
345
|
-
id: item.id,
|
|
346
|
-
extData: item,
|
|
347
|
-
},
|
|
348
|
-
id: item.id,
|
|
349
|
-
labelShowed: true,
|
|
350
|
-
};
|
|
351
|
-
}),
|
|
352
|
-
});
|
|
353
|
-
|
|
354
|
-
cleanPointLayer.bindEventOverlays('click', () => {
|
|
355
|
-
console.log('哈哈哈哈');
|
|
356
|
-
});
|
|
357
|
-
// 图层适配
|
|
358
|
-
cleanPointLayer.overlayFitMap();
|
|
359
|
-
|
|
360
|
-
// 为add和remove方法添加测试代码
|
|
361
|
-
const addBtn = document.getElementById('addBtn');
|
|
362
|
-
const removeBtn = document.getElementById('removeBtn');
|
|
363
|
-
const removeByIdBtn = document.getElementById('removeByIdBtn');
|
|
364
|
-
|
|
365
|
-
// 添加新标记的计数器
|
|
366
|
-
let newMarkerId = 10000;
|
|
367
|
-
|
|
368
|
-
// 点击添加标记按钮
|
|
369
|
-
addBtn.addEventListener('click', () => {
|
|
370
|
-
// 创建一个新的标记数据
|
|
371
|
-
const newMarker = {
|
|
372
|
-
overlayData: {
|
|
373
|
-
lon: 121.515844 + Math.random() * 0.02 - 0.01, // 在中心点附近随机生成经度
|
|
374
|
-
lat: 31.218427 + Math.random() * 0.02 - 0.01, // 在中心点附近随机生成纬度
|
|
375
|
-
title: `新标记${newMarkerId}`,
|
|
376
|
-
id: newMarkerId,
|
|
377
|
-
extData: { id: newMarkerId, sydmc: `新标记${newMarkerId}` },
|
|
378
|
-
},
|
|
379
|
-
id: newMarkerId,
|
|
380
|
-
labelShowed: true,
|
|
381
|
-
};
|
|
382
|
-
|
|
383
|
-
// 调用add方法添加标记
|
|
384
|
-
cleanPointLayer.add([newMarker]);
|
|
385
|
-
|
|
386
|
-
console.log(`添加了新标记: ${newMarkerId}`);
|
|
387
|
-
newMarkerId++;
|
|
388
|
-
});
|
|
389
|
-
|
|
390
|
-
// 点击删除标记按钮
|
|
391
|
-
removeBtn.addEventListener('click', () => {
|
|
392
|
-
// 获取所有标记的ID
|
|
393
|
-
const markerIds = cleanPointLayer.getAllOverlay();
|
|
394
|
-
|
|
395
|
-
if (markerIds.length > 0) {
|
|
396
|
-
// 随机选择一个标记ID
|
|
397
|
-
const randomId = markerIds.pop();
|
|
398
|
-
|
|
399
|
-
// 调用remove方法删除标记
|
|
400
|
-
cleanPointLayer.remove([randomId]);
|
|
401
|
-
|
|
402
|
-
console.log(`删除了标记`, randomId);
|
|
403
|
-
} else {
|
|
404
|
-
console.log('没有可删除的标记');
|
|
405
|
-
}
|
|
406
|
-
});
|
|
407
|
-
|
|
408
|
-
// 点击按ID删除按钮
|
|
409
|
-
removeByIdBtn.addEventListener('click', () => {
|
|
410
|
-
// 输入要删除的标记ID
|
|
411
|
-
const markerId = prompt('请输入要删除的标记ID:');
|
|
412
|
-
|
|
413
|
-
if (markerId) {
|
|
414
|
-
try {
|
|
415
|
-
const id = parseInt(markerId);
|
|
416
|
-
|
|
417
|
-
// 调用remove方法按ID删除标记
|
|
418
|
-
cleanPointLayer.remove([id]);
|
|
419
|
-
|
|
420
|
-
console.log(`删除了标记: ${id}`);
|
|
421
|
-
} catch (error) {
|
|
422
|
-
console.error('无效的标记ID');
|
|
423
|
-
}
|
|
424
|
-
}
|
|
425
|
-
});
|
|
426
|
-
|
|
427
|
-
// 点击切换标签显示按钮
|
|
428
|
-
const toggleLabelBtn = document.getElementById('toggleLabelBtn');
|
|
429
|
-
const markerIdInput = document.getElementById('markerIdInput');
|
|
430
|
-
const refreshIconBtn = document.getElementById('refreshIconBtn');
|
|
431
|
-
|
|
432
|
-
toggleLabelBtn.addEventListener('click', () => {
|
|
433
|
-
const markerId = markerIdInput.value;
|
|
434
|
-
|
|
435
|
-
if (markerId) {
|
|
436
|
-
try {
|
|
437
|
-
const id = parseInt(markerId);
|
|
438
|
-
|
|
439
|
-
// 查找该标记当前的标签显示状态
|
|
440
|
-
const overlayIndex = cleanPointLayer.overlayList.findIndex(
|
|
441
|
-
item => item.id === id
|
|
442
|
-
);
|
|
443
|
-
|
|
444
|
-
if (overlayIndex !== -1) {
|
|
445
|
-
// 获取当前标签显示状态并取反
|
|
446
|
-
const currentLabelShow =
|
|
447
|
-
cleanPointLayer.overlayList[overlayIndex].labelShowed;
|
|
448
|
-
|
|
449
|
-
cleanPointLayer.overlayList[overlayIndex].labelShowed = !currentLabelShow;
|
|
450
|
-
|
|
451
|
-
// 调用refreshOverlayLabel方法切换标签显示状态
|
|
452
|
-
cleanPointLayer.refreshOverlayLabel(id);
|
|
453
|
-
|
|
454
|
-
console.log(
|
|
455
|
-
`标记 ${id} 的标签显示状态已切换为: ${cleanPointLayer.overlayList[overlayIndex].labelShowed ? '显示' : '隐藏'}`
|
|
456
|
-
);
|
|
457
|
-
} else {
|
|
458
|
-
console.error('未找到指定ID的标记');
|
|
459
|
-
}
|
|
460
|
-
} catch (error) {
|
|
461
|
-
console.error('无效的标记ID',error);
|
|
462
|
-
}
|
|
463
|
-
} else {
|
|
464
|
-
console.error('请输入标记ID');
|
|
465
|
-
}
|
|
466
|
-
});
|
|
467
|
-
|
|
468
|
-
// 点击刷新图标按钮
|
|
469
|
-
refreshIconBtn.addEventListener('click', () => {
|
|
470
|
-
const markerId = markerIdInput.value;
|
|
471
|
-
|
|
472
|
-
if (markerId) {
|
|
473
|
-
try {
|
|
474
|
-
const id = parseInt(markerId);
|
|
475
|
-
|
|
476
|
-
// 查找该标记
|
|
477
|
-
const overlayIndex = cleanPointLayer.overlayList.findIndex(
|
|
478
|
-
item => item.id === id
|
|
479
|
-
);
|
|
480
|
-
|
|
481
|
-
if (overlayIndex !== -1) {
|
|
482
|
-
// 切换窗口标记，用于改变图标
|
|
483
|
-
window.flag = !window.flag;
|
|
484
|
-
|
|
485
|
-
// 调用refreshOverlayIcon方法刷新图标
|
|
486
|
-
cleanPointLayer.refreshOverlayIcon(id);
|
|
487
|
-
|
|
488
|
-
console.log(`标记 ${id} 的图标已刷新`);
|
|
489
|
-
} else {
|
|
490
|
-
console.error('未找到指定ID的标记');
|
|
491
|
-
}
|
|
492
|
-
} catch (error) {
|
|
493
|
-
console.error('无效的标记ID');
|
|
494
|
-
}
|
|
495
|
-
} else {
|
|
496
|
-
console.error('请输入标记ID');
|
|
497
|
-
}
|
|
498
|
-
});
|
|
499
|
-
|
|
500
|
-
// 点击自适应视图按钮
|
|
501
|
-
const fitViewBtn = document.getElementById('fitViewBtn');
|
|
502
|
-
const zoomOutBtn = document.getElementById('zoomOutBtn');
|
|
503
|
-
|
|
504
|
-
fitViewBtn.addEventListener('click', () => {
|
|
505
|
-
// 调用overlayFitMap方法，使地图自适应显示所有标记
|
|
506
|
-
cleanPointLayer.overlayFitMap();
|
|
507
|
-
console.log('已调用overlayFitMap方法，地图已自适应显示所有标记');
|
|
508
|
-
});
|
|
509
|
-
|
|
510
|
-
// 点击缩小视图按钮
|
|
511
|
-
zoomOutBtn.addEventListener('click', () => {
|
|
512
|
-
// 先缩小地图视图
|
|
513
|
-
const currentZoom = mapUtils.map.getZoom();
|
|
514
|
-
mapUtils.map.setZoom(currentZoom - 2);
|
|
515
|
-
console.log('地图已缩小，当前缩放级别:', mapUtils.map.getZoom());
|
|
516
|
-
|
|
517
|
-
// 提示用户可以点击"自适应视图"按钮来测试效果
|
|
518
|
-
console.log(
|
|
519
|
-
'现在可以点击"自适应视图"按钮，测试overlayFitMap方法的效果'
|
|
520
|
-
);
|
|
521
|
-
});
|
|
522
|
-
|
|
523
|
-
// 点击显示图层按钮
|
|
524
|
-
const showBtn = document.getElementById('showBtn');
|
|
525
|
-
showBtn.addEventListener('click', () => {
|
|
526
|
-
cleanPointLayer.show();
|
|
527
|
-
console.log('已调用show方法，图层已显示');
|
|
528
|
-
});
|
|
529
|
-
|
|
530
|
-
// 点击隐藏图层按钮
|
|
531
|
-
const hideBtn = document.getElementById('hideBtn');
|
|
532
|
-
hideBtn.addEventListener('click', () => {
|
|
533
|
-
cleanPointLayer.hide();
|
|
534
|
-
console.log('已调用hide方法，图层已隐藏');
|
|
535
|
-
});
|
|
536
|
-
|
|
537
|
-
// 点击获取所有标记按钮
|
|
538
|
-
const getAllBtn = document.getElementById('getAllBtn');
|
|
539
|
-
getAllBtn.addEventListener('click', () => {
|
|
540
|
-
const allOverlays = cleanPointLayer.getAllOverlay();
|
|
541
|
-
console.log('已调用getAllOverlay方法，所有标记:', allOverlays);
|
|
542
|
-
alert(`当前共有 ${allOverlays.length} 个标记`);
|
|
543
|
-
});
|
|
544
|
-
|
|
545
|
-
// 点击清空所有标记按钮
|
|
546
|
-
const clearAllBtn = document.getElementById('clearAllBtn');
|
|
547
|
-
clearAllBtn.addEventListener('click', () => {
|
|
548
|
-
if (confirm('确定要清空所有标记吗？')) {
|
|
549
|
-
cleanPointLayer.clearAllOverlay();
|
|
550
|
-
console.log('已调用clearAllOverlay方法，所有标记已清空');
|
|
551
|
-
}
|
|
552
|
-
});
|
|
553
|
-
|
|
554
|
-
// 点击重新加载图层按钮
|
|
555
|
-
const reloadBtn = document.getElementById('reloadBtn');
|
|
556
|
-
reloadBtn.addEventListener('click', () => {
|
|
557
|
-
window.flag = !window.flag;
|
|
558
|
-
cleanPointLayer.reload();
|
|
559
|
-
console.log('已调用reload方法，图层已重新加载');
|
|
560
|
-
});
|
|
561
|
-
|
|
562
|
-
// 点击销毁图层按钮
|
|
563
|
-
const destroyBtn = document.getElementById('destroyBtn');
|
|
564
|
-
destroyBtn.addEventListener('click', () => {
|
|
565
|
-
if (confirm('确定要销毁图层吗？销毁后将无法恢复')) {
|
|
566
|
-
cleanPointLayer.destroy();
|
|
567
|
-
console.log('已调用destroy方法，图层已销毁');
|
|
568
|
-
}
|
|
569
|
-
});
|
|
570
|
-
}
|
|
571
|
-
};
|
|
572
|
-
</script>
|
|
573
|
-
</body>
|
|
574
|
-
</html>
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta
|
|
7
|
+
name="viewport"
|
|
8
|
+
content="initial-scale=1.0, user-scalable=no, width=device-width"
|
|
9
|
+
/>
|
|
10
|
+
<link
|
|
11
|
+
rel="stylesheet"
|
|
12
|
+
href="https://cdn.jsdelivr.net/npm/reset.css@5.0.2/reset.min.css"
|
|
13
|
+
/>
|
|
14
|
+
<link
|
|
15
|
+
rel="stylesheet"
|
|
16
|
+
href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
|
|
17
|
+
/>
|
|
18
|
+
<title>地图显示</title>
|
|
19
|
+
<style>
|
|
20
|
+
html,
|
|
21
|
+
body,
|
|
22
|
+
#container {
|
|
23
|
+
width: 100%;
|
|
24
|
+
height: 100%;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.labelTitle {
|
|
28
|
+
background-color: rgba(27, 204, 253, 0.6588);
|
|
29
|
+
border-radius: 2px;
|
|
30
|
+
padding: 10px 15px;
|
|
31
|
+
font-size: 18px;
|
|
32
|
+
color: #fff;
|
|
33
|
+
border: 1px solid rgba(27, 204, 253, 0.6588);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.control-panel {
|
|
37
|
+
position: fixed;
|
|
38
|
+
top: 10px;
|
|
39
|
+
left: 10px;
|
|
40
|
+
z-index: 1000;
|
|
41
|
+
background-color: white;
|
|
42
|
+
padding: 10px;
|
|
43
|
+
border-radius: 5px;
|
|
44
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.control-panel button {
|
|
48
|
+
margin: 5px;
|
|
49
|
+
padding: 8px 12px;
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
}
|
|
52
|
+
</style>
|
|
53
|
+
</head>
|
|
54
|
+
<body>
|
|
55
|
+
<div id="container"></div>
|
|
56
|
+
<!-- 控制按钮面板 -->
|
|
57
|
+
<div class="control-panel">
|
|
58
|
+
<button id="addBtn">添加标记</button>
|
|
59
|
+
<button id="removeBtn">删除标记</button>
|
|
60
|
+
<button id="removeByIdBtn">按ID删除</button>
|
|
61
|
+
<br /><br />
|
|
62
|
+
<input type="text" id="markerIdInput" placeholder="输入标记ID" />
|
|
63
|
+
<button id="toggleLabelBtn">切换标签显示</button>
|
|
64
|
+
<button id="refreshIconBtn">刷新图标</button>
|
|
65
|
+
<br /><br />
|
|
66
|
+
<button id="fitViewBtn">自适应视图</button>
|
|
67
|
+
<button id="zoomOutBtn">缩小视图</button>
|
|
68
|
+
<br /><br />
|
|
69
|
+
<button id="showBtn">显示图层</button>
|
|
70
|
+
<button id="hideBtn">隐藏图层</button>
|
|
71
|
+
<button id="getAllBtn">获取所有标记</button>
|
|
72
|
+
<br /><br />
|
|
73
|
+
<button id="clearAllBtn">清空所有标记</button>
|
|
74
|
+
<button id="reloadBtn">重新加载图层</button>
|
|
75
|
+
<button id="destroyBtn">销毁图层</button>
|
|
76
|
+
</div>
|
|
77
|
+
<!-- 加载地图JSAPI脚本 -->
|
|
78
|
+
<!-- <script src="../dist/index.js"></script> -->
|
|
79
|
+
<script>
|
|
80
|
+
const data = [
|
|
81
|
+
{
|
|
82
|
+
id: 5194,
|
|
83
|
+
sydmc: '世茂滨江花园南区',
|
|
84
|
+
sydlx: '1',
|
|
85
|
+
ssqy: '潍坊街道',
|
|
86
|
+
cphm: '沪EB2317',
|
|
87
|
+
jd: 121.515844,
|
|
88
|
+
wd: 31.218427,
|
|
89
|
+
zt: 1,
|
|
90
|
+
sbsj: '2025-07-16 10:09:37',
|
|
91
|
+
dwsx: '1',
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
id: 2972,
|
|
95
|
+
sydmc: '滨江兰庭',
|
|
96
|
+
sydlx: '1',
|
|
97
|
+
ssqy: '潍坊街道',
|
|
98
|
+
cphm: '沪EB2317',
|
|
99
|
+
jd: 121.516452,
|
|
100
|
+
wd: 31.220885,
|
|
101
|
+
zt: 1,
|
|
102
|
+
sbsj: '2025-07-16 10:07:29',
|
|
103
|
+
dwsx: '0',
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
id: 2842,
|
|
107
|
+
sydmc: '浦城小区',
|
|
108
|
+
sydlx: '1',
|
|
109
|
+
ssqy: '潍坊街道',
|
|
110
|
+
cphm: '沪EB2317',
|
|
111
|
+
jd: 121.514702,
|
|
112
|
+
wd: 31.225064,
|
|
113
|
+
zt: 1,
|
|
114
|
+
sbsj: '2025-07-16 10:07:29',
|
|
115
|
+
dwsx: '1',
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
id: 1182,
|
|
119
|
+
sydmc: '南泉大楼',
|
|
120
|
+
sydlx: '1',
|
|
121
|
+
ssqy: '潍坊街道',
|
|
122
|
+
cphm: '沪EB2317',
|
|
123
|
+
jd: 121.521759,
|
|
124
|
+
wd: 31.219519,
|
|
125
|
+
zt: 1,
|
|
126
|
+
sbsj: '2025-07-16 10:07:29',
|
|
127
|
+
dwsx: '1',
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
id: 509,
|
|
131
|
+
sydmc: '东南新村',
|
|
132
|
+
sydlx: '1',
|
|
133
|
+
ssqy: '潍坊街道',
|
|
134
|
+
cphm: '沪EB2317',
|
|
135
|
+
jd: 121.515997,
|
|
136
|
+
wd: 31.225962,
|
|
137
|
+
zt: 1,
|
|
138
|
+
sbsj: '2025-07-16 10:07:29',
|
|
139
|
+
dwsx: '0',
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
id: 1603,
|
|
143
|
+
sydmc: '天后宫大楼',
|
|
144
|
+
sydlx: '1',
|
|
145
|
+
ssqy: '潍坊街道',
|
|
146
|
+
cphm: '沪EB2317',
|
|
147
|
+
jd: 121.515854,
|
|
148
|
+
wd: 31.226379,
|
|
149
|
+
zt: 1,
|
|
150
|
+
sbsj: '2025-07-16 10:07:29',
|
|
151
|
+
dwsx: '0',
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
id: 974,
|
|
155
|
+
sydmc: '兰园小区',
|
|
156
|
+
sydlx: '1',
|
|
157
|
+
ssqy: '潍坊街道',
|
|
158
|
+
cphm: '沪EB2317',
|
|
159
|
+
jd: 121.513274,
|
|
160
|
+
wd: 31.224613,
|
|
161
|
+
zt: 1,
|
|
162
|
+
sbsj: '2025-07-16 10:07:29',
|
|
163
|
+
dwsx: '0',
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
id: 3168,
|
|
167
|
+
sydmc: '百富达公寓',
|
|
168
|
+
sydlx: '1',
|
|
169
|
+
ssqy: '潍坊街道',
|
|
170
|
+
cphm: '沪EB2317',
|
|
171
|
+
jd: 121.517998,
|
|
172
|
+
wd: 31.219241,
|
|
173
|
+
zt: 1,
|
|
174
|
+
sbsj: '2025-07-16 10:07:29',
|
|
175
|
+
dwsx: '1',
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
id: 3526,
|
|
179
|
+
sydmc: '蔚蓝海岸天科苑',
|
|
180
|
+
sydlx: '1',
|
|
181
|
+
ssqy: '潍坊街道',
|
|
182
|
+
cphm: '沪EB2317',
|
|
183
|
+
jd: 121.51708,
|
|
184
|
+
wd: 31.220443,
|
|
185
|
+
zt: 1,
|
|
186
|
+
sbsj: '2025-07-16 10:07:29',
|
|
187
|
+
dwsx: '1',
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
id: 3059,
|
|
191
|
+
sydmc: '爱建大楼',
|
|
192
|
+
sydlx: '1',
|
|
193
|
+
ssqy: '潍坊街道',
|
|
194
|
+
cphm: '沪EB2317',
|
|
195
|
+
jd: 121.517637,
|
|
196
|
+
wd: 31.222101,
|
|
197
|
+
zt: 1,
|
|
198
|
+
sbsj: '2025-07-16 10:07:29',
|
|
199
|
+
dwsx: '1',
|
|
200
|
+
},
|
|
201
|
+
{
|
|
202
|
+
id: 3253,
|
|
203
|
+
sydmc: '竹南小区',
|
|
204
|
+
sydlx: '1',
|
|
205
|
+
ssqy: '潍坊街道',
|
|
206
|
+
cphm: '沪EB2317',
|
|
207
|
+
jd: 121.529235,
|
|
208
|
+
wd: 31.22615,
|
|
209
|
+
zt: 1,
|
|
210
|
+
sbsj: '2025-07-16 10:07:29',
|
|
211
|
+
dwsx: '1',
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
id: 1465,
|
|
215
|
+
sydmc: '地铁4号线世纪大道站',
|
|
216
|
+
sydlx: '0',
|
|
217
|
+
ssqy: '潍坊街道',
|
|
218
|
+
cphm: '沪EB2317',
|
|
219
|
+
jd: 121.528294,
|
|
220
|
+
wd: 31.228321,
|
|
221
|
+
zt: 1,
|
|
222
|
+
sbsj: '2025-07-16 10:07:29',
|
|
223
|
+
dwsx: '1',
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
id: 879,
|
|
227
|
+
sydmc: '众城公寓',
|
|
228
|
+
sydlx: '1',
|
|
229
|
+
ssqy: '潍坊街道',
|
|
230
|
+
cphm: '沪EB2317',
|
|
231
|
+
jd: 121.530018,
|
|
232
|
+
wd: 31.224475,
|
|
233
|
+
zt: 1,
|
|
234
|
+
sbsj: '2025-07-16 10:07:29',
|
|
235
|
+
dwsx: '0',
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
id: 3067,
|
|
239
|
+
sydmc: '爵士大厦',
|
|
240
|
+
sydlx: '1',
|
|
241
|
+
ssqy: '潍坊街道',
|
|
242
|
+
cphm: '沪EB2317',
|
|
243
|
+
jd: 121.529722,
|
|
244
|
+
wd: 31.225217,
|
|
245
|
+
zt: 1,
|
|
246
|
+
sbsj: '2025-07-16 10:07:29',
|
|
247
|
+
dwsx: '1',
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
id: 2726,
|
|
251
|
+
sydmc: '浦东南路1780弄',
|
|
252
|
+
sydlx: '1',
|
|
253
|
+
ssqy: '潍坊街道',
|
|
254
|
+
cphm: '沪EB2317',
|
|
255
|
+
jd: 121.518546,
|
|
256
|
+
wd: 31.216307,
|
|
257
|
+
zt: 1,
|
|
258
|
+
sbsj: '2025-07-16 10:07:29',
|
|
259
|
+
dwsx: '0',
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
id: 913,
|
|
263
|
+
sydmc: '保利One56',
|
|
264
|
+
sydlx: '1',
|
|
265
|
+
ssqy: '潍坊街道',
|
|
266
|
+
cphm: '沪EB2317',
|
|
267
|
+
jd: 121.513294,
|
|
268
|
+
wd: 31.21825,
|
|
269
|
+
zt: 1,
|
|
270
|
+
sbsj: '2025-07-16 10:07:29',
|
|
271
|
+
dwsx: '0',
|
|
272
|
+
},
|
|
273
|
+
{
|
|
274
|
+
id: 582,
|
|
275
|
+
sydmc: '东港公寓',
|
|
276
|
+
sydlx: '1',
|
|
277
|
+
ssqy: '潍坊街道',
|
|
278
|
+
cphm: '沪EB2317',
|
|
279
|
+
jd: 121.518218,
|
|
280
|
+
wd: 31.218001,
|
|
281
|
+
zt: 1,
|
|
282
|
+
sbsj: '2025-07-16 10:07:29',
|
|
283
|
+
dwsx: '0',
|
|
284
|
+
},
|
|
285
|
+
];
|
|
286
|
+
|
|
287
|
+
window.onload = () => {
|
|
288
|
+
const { createMapUtils } = GdMapUtils;
|
|
289
|
+
|
|
290
|
+
const loaderOpts = {
|
|
291
|
+
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
292
|
+
plugins: ['AMap.MapType', 'AMap.MoveAnimation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
293
|
+
key: '9506c73ed67acb0a09f1aabf88df4819',
|
|
294
|
+
};
|
|
295
|
+
|
|
296
|
+
test();
|
|
297
|
+
|
|
298
|
+
async function test() {
|
|
299
|
+
const mapUtils = await createMapUtils(
|
|
300
|
+
{
|
|
301
|
+
viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
|
|
302
|
+
zoom: 11, // 初始化地图层级
|
|
303
|
+
center: [data[0].jd, data[1].wd], // 初始化地图中心点
|
|
304
|
+
mountSelector: 'container',
|
|
305
|
+
},
|
|
306
|
+
loaderOpts
|
|
307
|
+
);
|
|
308
|
+
|
|
309
|
+
window.cleanPointLayer = mapUtils.createBaseMarkerLayer({
|
|
310
|
+
layerType: 'labelMarkerLayer',
|
|
311
|
+
layerName: 'cleanLabelMarkerPointLayer',
|
|
312
|
+
getIconUrl(item) {
|
|
313
|
+
if (window.flag) {
|
|
314
|
+
return '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png';
|
|
315
|
+
}
|
|
316
|
+
return '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png';
|
|
317
|
+
},
|
|
318
|
+
getOverlayOpts(item, index, MapUtils) {
|
|
319
|
+
return {
|
|
320
|
+
name: item.name,
|
|
321
|
+
text: {
|
|
322
|
+
direction: 'top',
|
|
323
|
+
content: item.overlayData.title,
|
|
324
|
+
style: {
|
|
325
|
+
fontSize: 18,
|
|
326
|
+
fillColor: '#fff',
|
|
327
|
+
strokeColor: '#37e9bd',
|
|
328
|
+
strokeWidth: 5,
|
|
329
|
+
},
|
|
330
|
+
zooms: [1, 20],
|
|
331
|
+
},
|
|
332
|
+
/* label: {
|
|
333
|
+
content: `<div class="labelTitle">${item.overlayData.title}</div>`,
|
|
334
|
+
offset: MapUtils.Pixel(0, -5),
|
|
335
|
+
direction: 'top',
|
|
336
|
+
}, */
|
|
337
|
+
};
|
|
338
|
+
},
|
|
339
|
+
overlayList: data.slice(0, 10).map(item => {
|
|
340
|
+
return {
|
|
341
|
+
overlayData: {
|
|
342
|
+
lon: item.jd,
|
|
343
|
+
lat: item.wd,
|
|
344
|
+
title: item.sydmc,
|
|
345
|
+
id: item.id,
|
|
346
|
+
extData: item,
|
|
347
|
+
},
|
|
348
|
+
id: item.id,
|
|
349
|
+
labelShowed: true,
|
|
350
|
+
};
|
|
351
|
+
}),
|
|
352
|
+
});
|
|
353
|
+
|
|
354
|
+
cleanPointLayer.bindEventOverlays('click', () => {
|
|
355
|
+
console.log('哈哈哈哈');
|
|
356
|
+
});
|
|
357
|
+
// 图层适配
|
|
358
|
+
cleanPointLayer.overlayFitMap();
|
|
359
|
+
|
|
360
|
+
// 为add和remove方法添加测试代码
|
|
361
|
+
const addBtn = document.getElementById('addBtn');
|
|
362
|
+
const removeBtn = document.getElementById('removeBtn');
|
|
363
|
+
const removeByIdBtn = document.getElementById('removeByIdBtn');
|
|
364
|
+
|
|
365
|
+
// 添加新标记的计数器
|
|
366
|
+
let newMarkerId = 10000;
|
|
367
|
+
|
|
368
|
+
// 点击添加标记按钮
|
|
369
|
+
addBtn.addEventListener('click', () => {
|
|
370
|
+
// 创建一个新的标记数据
|
|
371
|
+
const newMarker = {
|
|
372
|
+
overlayData: {
|
|
373
|
+
lon: 121.515844 + Math.random() * 0.02 - 0.01, // 在中心点附近随机生成经度
|
|
374
|
+
lat: 31.218427 + Math.random() * 0.02 - 0.01, // 在中心点附近随机生成纬度
|
|
375
|
+
title: `新标记${newMarkerId}`,
|
|
376
|
+
id: newMarkerId,
|
|
377
|
+
extData: { id: newMarkerId, sydmc: `新标记${newMarkerId}` },
|
|
378
|
+
},
|
|
379
|
+
id: newMarkerId,
|
|
380
|
+
labelShowed: true,
|
|
381
|
+
};
|
|
382
|
+
|
|
383
|
+
// 调用add方法添加标记
|
|
384
|
+
cleanPointLayer.add([newMarker]);
|
|
385
|
+
|
|
386
|
+
console.log(`添加了新标记: ${newMarkerId}`);
|
|
387
|
+
newMarkerId++;
|
|
388
|
+
});
|
|
389
|
+
|
|
390
|
+
// 点击删除标记按钮
|
|
391
|
+
removeBtn.addEventListener('click', () => {
|
|
392
|
+
// 获取所有标记的ID
|
|
393
|
+
const markerIds = cleanPointLayer.getAllOverlay();
|
|
394
|
+
|
|
395
|
+
if (markerIds.length > 0) {
|
|
396
|
+
// 随机选择一个标记ID
|
|
397
|
+
const randomId = markerIds.pop();
|
|
398
|
+
|
|
399
|
+
// 调用remove方法删除标记
|
|
400
|
+
cleanPointLayer.remove([randomId]);
|
|
401
|
+
|
|
402
|
+
console.log(`删除了标记`, randomId);
|
|
403
|
+
} else {
|
|
404
|
+
console.log('没有可删除的标记');
|
|
405
|
+
}
|
|
406
|
+
});
|
|
407
|
+
|
|
408
|
+
// 点击按ID删除按钮
|
|
409
|
+
removeByIdBtn.addEventListener('click', () => {
|
|
410
|
+
// 输入要删除的标记ID
|
|
411
|
+
const markerId = prompt('请输入要删除的标记ID:');
|
|
412
|
+
|
|
413
|
+
if (markerId) {
|
|
414
|
+
try {
|
|
415
|
+
const id = parseInt(markerId);
|
|
416
|
+
|
|
417
|
+
// 调用remove方法按ID删除标记
|
|
418
|
+
cleanPointLayer.remove([id]);
|
|
419
|
+
|
|
420
|
+
console.log(`删除了标记: ${id}`);
|
|
421
|
+
} catch (error) {
|
|
422
|
+
console.error('无效的标记ID');
|
|
423
|
+
}
|
|
424
|
+
}
|
|
425
|
+
});
|
|
426
|
+
|
|
427
|
+
// 点击切换标签显示按钮
|
|
428
|
+
const toggleLabelBtn = document.getElementById('toggleLabelBtn');
|
|
429
|
+
const markerIdInput = document.getElementById('markerIdInput');
|
|
430
|
+
const refreshIconBtn = document.getElementById('refreshIconBtn');
|
|
431
|
+
|
|
432
|
+
toggleLabelBtn.addEventListener('click', () => {
|
|
433
|
+
const markerId = markerIdInput.value;
|
|
434
|
+
|
|
435
|
+
if (markerId) {
|
|
436
|
+
try {
|
|
437
|
+
const id = parseInt(markerId);
|
|
438
|
+
|
|
439
|
+
// 查找该标记当前的标签显示状态
|
|
440
|
+
const overlayIndex = cleanPointLayer.overlayList.findIndex(
|
|
441
|
+
item => item.id === id
|
|
442
|
+
);
|
|
443
|
+
|
|
444
|
+
if (overlayIndex !== -1) {
|
|
445
|
+
// 获取当前标签显示状态并取反
|
|
446
|
+
const currentLabelShow =
|
|
447
|
+
cleanPointLayer.overlayList[overlayIndex].labelShowed;
|
|
448
|
+
|
|
449
|
+
cleanPointLayer.overlayList[overlayIndex].labelShowed = !currentLabelShow;
|
|
450
|
+
|
|
451
|
+
// 调用refreshOverlayLabel方法切换标签显示状态
|
|
452
|
+
cleanPointLayer.refreshOverlayLabel(id);
|
|
453
|
+
|
|
454
|
+
console.log(
|
|
455
|
+
`标记 ${id} 的标签显示状态已切换为: ${cleanPointLayer.overlayList[overlayIndex].labelShowed ? '显示' : '隐藏'}`
|
|
456
|
+
);
|
|
457
|
+
} else {
|
|
458
|
+
console.error('未找到指定ID的标记');
|
|
459
|
+
}
|
|
460
|
+
} catch (error) {
|
|
461
|
+
console.error('无效的标记ID',error);
|
|
462
|
+
}
|
|
463
|
+
} else {
|
|
464
|
+
console.error('请输入标记ID');
|
|
465
|
+
}
|
|
466
|
+
});
|
|
467
|
+
|
|
468
|
+
// 点击刷新图标按钮
|
|
469
|
+
refreshIconBtn.addEventListener('click', () => {
|
|
470
|
+
const markerId = markerIdInput.value;
|
|
471
|
+
|
|
472
|
+
if (markerId) {
|
|
473
|
+
try {
|
|
474
|
+
const id = parseInt(markerId);
|
|
475
|
+
|
|
476
|
+
// 查找该标记
|
|
477
|
+
const overlayIndex = cleanPointLayer.overlayList.findIndex(
|
|
478
|
+
item => item.id === id
|
|
479
|
+
);
|
|
480
|
+
|
|
481
|
+
if (overlayIndex !== -1) {
|
|
482
|
+
// 切换窗口标记，用于改变图标
|
|
483
|
+
window.flag = !window.flag;
|
|
484
|
+
|
|
485
|
+
// 调用refreshOverlayIcon方法刷新图标
|
|
486
|
+
cleanPointLayer.refreshOverlayIcon(id);
|
|
487
|
+
|
|
488
|
+
console.log(`标记 ${id} 的图标已刷新`);
|
|
489
|
+
} else {
|
|
490
|
+
console.error('未找到指定ID的标记');
|
|
491
|
+
}
|
|
492
|
+
} catch (error) {
|
|
493
|
+
console.error('无效的标记ID');
|
|
494
|
+
}
|
|
495
|
+
} else {
|
|
496
|
+
console.error('请输入标记ID');
|
|
497
|
+
}
|
|
498
|
+
});
|
|
499
|
+
|
|
500
|
+
// 点击自适应视图按钮
|
|
501
|
+
const fitViewBtn = document.getElementById('fitViewBtn');
|
|
502
|
+
const zoomOutBtn = document.getElementById('zoomOutBtn');
|
|
503
|
+
|
|
504
|
+
fitViewBtn.addEventListener('click', () => {
|
|
505
|
+
// 调用overlayFitMap方法，使地图自适应显示所有标记
|
|
506
|
+
cleanPointLayer.overlayFitMap();
|
|
507
|
+
console.log('已调用overlayFitMap方法，地图已自适应显示所有标记');
|
|
508
|
+
});
|
|
509
|
+
|
|
510
|
+
// 点击缩小视图按钮
|
|
511
|
+
zoomOutBtn.addEventListener('click', () => {
|
|
512
|
+
// 先缩小地图视图
|
|
513
|
+
const currentZoom = mapUtils.map.getZoom();
|
|
514
|
+
mapUtils.map.setZoom(currentZoom - 2);
|
|
515
|
+
console.log('地图已缩小，当前缩放级别:', mapUtils.map.getZoom());
|
|
516
|
+
|
|
517
|
+
// 提示用户可以点击"自适应视图"按钮来测试效果
|
|
518
|
+
console.log(
|
|
519
|
+
'现在可以点击"自适应视图"按钮，测试overlayFitMap方法的效果'
|
|
520
|
+
);
|
|
521
|
+
});
|
|
522
|
+
|
|
523
|
+
// 点击显示图层按钮
|
|
524
|
+
const showBtn = document.getElementById('showBtn');
|
|
525
|
+
showBtn.addEventListener('click', () => {
|
|
526
|
+
cleanPointLayer.show();
|
|
527
|
+
console.log('已调用show方法，图层已显示');
|
|
528
|
+
});
|
|
529
|
+
|
|
530
|
+
// 点击隐藏图层按钮
|
|
531
|
+
const hideBtn = document.getElementById('hideBtn');
|
|
532
|
+
hideBtn.addEventListener('click', () => {
|
|
533
|
+
cleanPointLayer.hide();
|
|
534
|
+
console.log('已调用hide方法，图层已隐藏');
|
|
535
|
+
});
|
|
536
|
+
|
|
537
|
+
// 点击获取所有标记按钮
|
|
538
|
+
const getAllBtn = document.getElementById('getAllBtn');
|
|
539
|
+
getAllBtn.addEventListener('click', () => {
|
|
540
|
+
const allOverlays = cleanPointLayer.getAllOverlay();
|
|
541
|
+
console.log('已调用getAllOverlay方法，所有标记:', allOverlays);
|
|
542
|
+
alert(`当前共有 ${allOverlays.length} 个标记`);
|
|
543
|
+
});
|
|
544
|
+
|
|
545
|
+
// 点击清空所有标记按钮
|
|
546
|
+
const clearAllBtn = document.getElementById('clearAllBtn');
|
|
547
|
+
clearAllBtn.addEventListener('click', () => {
|
|
548
|
+
if (confirm('确定要清空所有标记吗？')) {
|
|
549
|
+
cleanPointLayer.clearAllOverlay();
|
|
550
|
+
console.log('已调用clearAllOverlay方法，所有标记已清空');
|
|
551
|
+
}
|
|
552
|
+
});
|
|
553
|
+
|
|
554
|
+
// 点击重新加载图层按钮
|
|
555
|
+
const reloadBtn = document.getElementById('reloadBtn');
|
|
556
|
+
reloadBtn.addEventListener('click', () => {
|
|
557
|
+
window.flag = !window.flag;
|
|
558
|
+
cleanPointLayer.reload();
|
|
559
|
+
console.log('已调用reload方法，图层已重新加载');
|
|
560
|
+
});
|
|
561
|
+
|
|
562
|
+
// 点击销毁图层按钮
|
|
563
|
+
const destroyBtn = document.getElementById('destroyBtn');
|
|
564
|
+
destroyBtn.addEventListener('click', () => {
|
|
565
|
+
if (confirm('确定要销毁图层吗？销毁后将无法恢复')) {
|
|
566
|
+
cleanPointLayer.destroy();
|
|
567
|
+
console.log('已调用destroy方法，图层已销毁');
|
|
568
|
+
}
|
|
569
|
+
});
|
|
570
|
+
}
|
|
571
|
+
};
|
|
572
|
+
</script>
|
|
573
|
+
</body>
|
|
574
|
+
</html>
|