vue&高德：点聚合转点标记或者图片

       有关点聚合可以看这里vue&高德：点聚合水波纹效果

       本篇内容在点聚合的基础上进行修改。

       1、地图初始化
       在地图初始化的时候不去调用addCluster()，调用新增的addMaekers()

this.addMaekers(points.slice(0, 1000));//数据太多，加载会很慢

       2、点标记数组
       在addMaekers()实现添加点标记的数组。

addMaekers(points) {
        for (var i = 0; i < points.length; i++) {
          this.markers.push(
            new AMap.Marker({
              position: points[i].lnglat,//点标记坐标需要
              icon: require('../assets/images/tiger1.png'),
              offset: new AMap.Pixel(0, 0),
            })
          );
          this.markers[i].lnglat = points[i].lnglat;//点聚合坐标需要
        }
        this.addCluster();
      },

tiger1
       3、点聚合点转点标记
       修改_renderClusterMarker()。在里面添加内容如下：

  if (this.map.getZoom() > 9) {//地图放大级别大于9就转为点标记
          for (var i = 0; i < context.clusterData.length; i++) {
            this.map.add(context.clusterData[i])
          }
        }
        else {
          this.map.clearMap();//清除点标记
          ....//div或者content部分
         }

       renderMarker()修改类似，不过不用循环了。

       4、点聚合转图片
       以修改renderMarker()为例：

 _renderMarker(context) {
        var content;
        var url1 = require('../assets/images/tiger.png')
        if (this.map.getZoom() > 9) {
          content = `<img src="${url1}" alt="tiger">`;
        }
        else {
          content = `<div
             ...
            </div>`;
        }

        var offset = new AMap.Pixel(-9, -9);
        context.marker.setContent(content)
        context.marker.setOffset(offset)
      },

tiger
       5、地图放大后的效果及总结
       效果：

       如果不考虑有后续操作可以直接转为图片。