riku
2024-09-09 cb99768a728002372bcb80885de2b4b2cd52e303
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
/**
 * 高德地图点标记绘制相关
 */
 
import { map } from './index_old';
import { useToolboxStore } from '@/stores/toolbox';
 
const toolboxStore = useToolboxStore();
 
var _massMarks = undefined;
 
export default {
  /**
   * 绘制海量点标记
   * @param fDatas 完整监测数据
   * @param _factor 当前展示的监测因子对象
   */
  drawMassMarks(fDatas, _factor, onClick) {
    if (!toolboxStore.dataMarkerStatus) {
      return;
    }
    this.clearMassMarks();
    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', // 图标地址
      // eslint-disable-next-line no-undef
      size: new AMap.Size(11, 11), // 图标大小
      // eslint-disable-next-line no-undef
      anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量,基准点为图标左上角
    };
    // eslint-disable-next-line no-undef
    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);
    });
    // eslint-disable-next-line no-undef
    var marker = new AMap.Marker({
      content: ' ',
      map: map,
      // eslint-disable-next-line no-undef
      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);
  },
  clearMassMarks() {
    if (_massMarks) {
      map.remove(_massMarks);
      _massMarks = undefined;
    }
  },
 
  /**
   * 创建标记点
   * @param {string | Array} img 图标或图标数组
   * @param {Array} dataList 监测数据
   * @param {boolean} collision 标注避让
   * @returns
   */
  createLabelMarks(img, dataList, collision = true) {
    // eslint-disable-next-line no-undef
    const layer = new AMap.LabelsLayer({
      zooms: [3, 20],
      zIndex: 1000,
      // 开启标注避让,默认为开启,v1.4.15 新增属性
      collision: collision,
      // 开启标注淡入动画,默认为开启,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.name,
        position: [data.longitude, data.latitude],
        zooms: [10, 20],
        opacity: 1,
        zIndex: 10,
        icon: {
          type: 'image',
          image: typeof img === 'string' ? img : img[i],
          // clipOrigin: [14, 92],
          // clipSize: [50, 68],
          size: [30, 30],
          anchor: 'bottom-center',
          angel: 0,
          retina: true
        },
        text: {
          content: data.name,
          direction: 'top',
          offset: [0, -5],
          style: {
            fontSize: 16,
            fontWeight: 'normal',
            fillColor: '#fff',
            strokeColor: '#333',
            strokeWidth: 0,
            backgroundColor: '#122b54a9'
          }
        }
      };
      curData.extData = {
        index: i
      };
 
      // eslint-disable-next-line no-undef
      var labelMarker = new AMap.LabelMarker(curData);
 
      // markers.push(labelMarker);
 
      layer.add(labelMarker);
    }
 
    return layer;
  }
};