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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
| /**
| * 高德地图点标记绘制相关
| */
|
| import { map, AMap } from './index'
| import util from './util'
|
| var _massMarks = undefined
| var _labelMarks = 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, onClick) {
| if (_labelMarks) {
| map.remove(_labelMarks)
| _labelMarks = undefined
| }
| const layer = new AMap.LabelsLayer({
| zooms: [3, 20],
| zIndex: 1000,
| // 开启标注避让，默认为开启，v1.4.15 新增属性
| collision: false,
| // 开启标注淡入动画，默认为开启，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: [20, 20],
| anchor: 'bottom-center',
| angel: 0,
| retina: true
| },
| text: {
| // content: data.sceneName,
| direction: 'top',
| offset: [0, -5],
| style: {
| fontSize: 12,
| // fontWeight: 'normal',
| fillColor: '#fff',
| // strokeColor: '#333',
| // strokeWidth: 0,
| backgroundColor: '#14428b'
| }
| }
| }
| curData.extData = {
| data: data
| }
|
| var labelMarker = new AMap.LabelMarker(curData)
| labelMarker.on('click', (event) => {
| console.log(labelMarker.getExtData())
| console.log(event)
| util.setFitView([event.target])
| // util.setZoomSmall()
| // util.setCenter(event.lnglat)
| // 自定义点击事件
| if (typeof onClick === 'function') {
| onClick(event.data.data.extData.data)
| }
| })
|
| // markers.push(labelMarker);
|
| layer.add(labelMarker)
| }
|
| _labelMarks = layer
| return layer
| },
|
| drawMarker(title, lnglat, img) {
| const marker = new AMap.Marker({
| position: new AMap.LngLat(lnglat[0], lnglat[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
| title: title,
| // offset: new AMap.Pixel(-13, -12),
| // anchor: 'center',
| icon: new AMap.Icon({
| image: img,
| imageSize: [30, 30]
| })
| })
| map.add(marker)
| }
| }
|
|
