高德地图点位聚合

高德地图 版本2.0

// map地图实例  markerList点位数组 包含lnglat（数组形式），extData（点位相关信息）属性
this.map.plugin(['AMap.MarkerClusterer'], () => { // 异步加载插件
        this.cluster = new this.AMap.MarkerClusterer(this.map, this.markerList,
          {
            renderMarker: this.renderMarker, // 自定义非聚合点样式
            renderClusterMarker: this.renderClusterMarker, // 聚合点位样式
          });
      });


renderMarker(context) {
      const zoom = this.map.getZoom();
      const { extData } = context.data[0];
		// 图标获取
      const { icon } = colorList[extData.info - 1];
      context.marker.setIcon(icon);
      context.marker.setOffset(new this.AMap.Pixel(-5, -5));
      context.marker.on('click', () => {
        this.setLabels(extData);
      });
      if (zoom >= 17) {
        context.marker.setLabel({
          content:
                                            `<div style="height: 20px;
                          background: #fff;
                          padding: 0px 10px;
                          border-radius: 7px;
                          color: #337ded;
                          line-height: 20px;
                          box-shadow: 0 5px 8px #9f9f9fad;">${
  extData.name
}</div><i class='tri'></i>`, // 设置文本标注内容
          direction: 'top', // 设置文本标注方位
        });
      } else {
        context.marker.setLabel({
          content: '<div></div>',
          direction: 'top', // 设置文本标注方位
        });
      }
    },
    renderClusterMarker(context) {
      const content = `<span style="display:inline-block;width: 30px;height:30px;background:#55bd64;
      border-radius:15px;
       border:1px solid #bff0ca;color:#fff;
       line-height:30px;text-align:center;font-size:12px">${context.count}</span>`;
      context.marker.setContent(content);
    },
  },