1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
| /**
| * 高德地图点标记绘制相关
| */
|
| import { map, AMap } from './index'
|
| var _massMarks = undefined
|
| export default {
| /**
| * 绘制海量点标记
| * @param fDatas 完整监测数据
| * @param _factor 当前展示的监测因子对象
| */
| drawMassMarks(fDatas, _factor, onClick) {
| if (_massMarks) {
| map.remove(_massMarks)
| _massMarks = undefined
| }
| const lnglats = fDatas.lnglats_GD
| var data = []
| for (let i = 0; i < lnglats.length; i++) {
| data.push({
| lnglat: lnglats[i], //点标记位置
| name: `${fDatas.times[i]}<br/>${_factor.factorName}: ${_factor.datas[i].factorData} mg/m³`,
| id: i
| })
| }
|
| // 创建样式对象
| var styleObject = {
| url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
| // url: './asset/mipmap/ic_up_white.png', // 图标地址
|
| size: new AMap.Size(11, 11), // 图标大小
|
| anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
| }
|
| var massMarks = new AMap.MassMarks(data, {
| zIndex: 5, // 海量点图层叠加的顺序
| zooms: [15, 18], // 在指定地图缩放级别范围内展示海量点图层
| style: styleObject // 设置样式对象
| })
| massMarks.on('click', (event) => {
| const i = event.data.id
| // 3. 自定义点击事件
| onClick(i)
| })
|
| var marker = new AMap.Marker({
| content: ' ',
| map: map,
|
| offset: new AMap.Pixel(13, 12)
| })
| var timeout
| massMarks.on('mouseover', (e) => {
| if (timeout) {
| clearTimeout(timeout)
| }
| marker.setPosition(e.data.lnglat)
| marker.setLabel({ content: e.data.name })
| map.add(marker)
| timeout = setTimeout(() => {
| map.remove(marker)
| }, 2000)
| })
| _massMarks = massMarks
| map.add(massMarks)
| },
|
| createLabelMarks(img, dataList) {
| const layer = new AMap.LabelsLayer({
| zooms: [3, 20],
| zIndex: 1000,
| // 开启标注避让，默认为开启，v1.4.15 新增属性
| collision: true,
| // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
| animation: true
| })
|
| map.add(layer)
|
| // var markers = [];
| for (var i = 0; i < dataList.length; i++) {
| const data = dataList[i]
| var curData = {
| name: data.sceneName,
| position: [data.longitude, data.latitude],
| zooms: [10, 20],
| opacity: 1,
| zIndex: 10,
| icon: {
| type: 'image',
| image: img,
| // clipOrigin: [14, 92],
| // clipSize: [50, 68],
| size: [30, 30],
| anchor: 'bottom-center',
| angel: 0,
| retina: true
| },
| text: {
| content: data.sceneName,
| direction: 'top',
| offset: [0, -5],
| style: {
| fontSize: 16,
| fontWeight: 'normal',
| fillColor: '#fff',
| strokeColor: '#333',
| strokeWidth: 0,
| backgroundColor: '#122b54a9'
| }
| }
| }
| curData.extData = {
| index: i
| }
|
| var labelMarker = new AMap.LabelMarker(curData)
|
| // markers.push(labelMarker);
|
| layer.add(labelMarker)
| }
|
| return layer
| }
| }
|
|
