百度地圖（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: {
    //     width: 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