百度地图离线开发demo-聚合图（vue+百度地图3.0+百度瓦片）（仅供参考，学习探讨）

聚合点分组功能有进行修改，即对应聚合层级，数值将有实际意义，可在对应的数值范围设置对应的图标与样式，修改了对应的服务器js文件

所以本地调用是，修改了全局的变量，在desroty时需要恢复默认值

mounted() {
  // 需destroy时清空，否则全局污染
  // eslint-disable-next-line no-undef
  bmapConfig.polymerizationStyle = [
    {
      url: require('./images/m0test.png'),
      belong: [1, 0],
      size: new BMap.Size(53, 53),
      textColor: '#130c0e',
      textSize: 12
    },
    {
      url: require('./images/m1.png'),
      belong: [3, 2],
      size: new BMap.Size(56, 56),
      textColor: '#009ad6',
      textSize: 14
    },
    {
      url: require('./images/m2.png'),
      belong: [5, 4],
      size: new BMap.Size(66, 66),
      textColor: '#ffc20e',
      textSize: 16
    },
    {
      url: require('./images/m3.png'),
      belong: [7, 6],
      size: new BMap.Size(78, 78),
      textColor: '#494e8f',
      textSize: 18
    },
    {
      url: require('./images/m4.png'),
      belong: [1000, 8],
      size: new BMap.Size(90, 90),
      textColor: '#ed1941',
      textSize: 20
    }
  ]
  this.$refs.baiduMapRefs.initMap()
  this.addPolymerization()
},

beforeDestroy() {
  // eslint-disable-next-line no-undef
  bmapConfig.polymerizationStyle = []
},

/**
 * 添加聚合图
 */
addPolymerization(points = [], layer) {
  const markers = []
  let pt = null
  points.forEach((item) => {
    pt = new BMap.Point(item.lng, item.lat)
    markers.push(new BMap.Marker(pt))
  })
  // 最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
  this[layer] = new BMapLib.MarkerClusterer(this.map, {
    markers: markers
  })
  // 也可在MarkerClusterer构造函数的第二个参数中加入styles属性，直接将样式写入，两种方式都行
  // markerClusterer.setStyles(myStyles);
},