百度地图（32）-GL 聚合

1. 三维GL库的聚合样式竟然比二维库的样式要丑那么一点点，实在有点不可思议。

2. 聚合调用的 mapvgl 中的clusterLayer，这完全是另外一个库了，以后会专题讲。

https://mapv.baidu.com/gl/docs/index.html

3. 代码参考

var view = new mapvgl.View({
    map: map
  });

  var clusterLayer = new mapvgl.ClusterLayer({
    minSize: 30, // 聚合点显示的最小直径
    maxSize: 50, // 聚合点显示的最大直径
    clusterRadius: 150, // 聚合范围半径
    gradient: {0: 'blue', 0.5: 'green', 1.0: 'red'}, // 聚合点颜色梯度
    maxZoom: 15, // 聚合的最大级别，当地图放大级别高于此值将不再聚合
    minZoom: 5, // 聚合的最小级别，当地图放大级别低于此值将不再聚合
    // 是否显示文字
    showText: true,
    // 开始聚合的最少点数，点数多于此值才会被聚合
    minPoints: 5,
    // 设置文字样式
    textOptions: {
      fontSize: 12,
      color: 'white',
      // 格式化数字显示
      format: function (count) {
        return count >= 10000 ? Math.round(count / 1000) + 'k'
          : count >= 1000 ? Math.round(count / 100) / 10 + 'k' : count;
      }
    },
    // 设置非聚合的点的icon
    // iconOptions: {
    //      100 / 4,
    //     height: 153 / 4,
    //     icon: 'images/marker.png',
    // },
    enablePicked: true,
    onClick(e) {
      if (e.dataItem) {
        // 可通过dataItem下面的children属性拿到被聚合的所有点
        console.log(e.dataItem);
      }
    }
  });

  view.addLayer(clusterLayer);
  clusterLayer.setData(data);

4. 页面显示

5. 源码地址

https://github.com/WhatGIS/bdMap