百度地图解决加载大量点时卡顿问题

需求如下：地图上加载上万个点。使用marker发现点太多页面会卡死，研究发现可以使用聚合及海量点实现。

js代码如下：

//聚合实现代码
function ss(markerArr){//markerArr数据库数据查询的结果
    var markers = [];
    var pt = null;
    var i = 0;
    for (; i < markerArr.length; i++) {
       pt = new BMap.Point(markerArr[i].longitude, markerArr[i].latitude);
       markers.push(new BMap.Marker(pt));
    }
    var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
}

//海量点实现代码
function sss(){
    var points = [];  // 添加海量点数据
    for (var i = 0; i < markerArr.length; i++) {
        points.push(new BMap.Point(markerArr[i].longitude, markerArr[i].latitude));
    }
    var options = {
            size: 6,
            shape: 2,
            color: '#d340c3'
        };
    basestationPointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
    basestationPointCollection.addEventListener('click', function (e) {
          var basestationName="";//名称
          var basestationType="";//地址
          //关于自定义信息 修改json [[经度,维度,1,名称,地址,电话]]
          //循环查出值
          for (var i = 0; i < markerArr.length; i++) {
              points.push(new BMap.Point(markerArr[i].longitude,markerArr[i].latitude));
              if(markerArr[i].longitude==e.point.lng&&markerArr[i].latitude==e.point.lat){//经度==点击的,维度
                  basestationName=markerArr[i].basestationName;
                  basestationType=markerArr[i].basestationType;
                  break;
              }
          }
          var point = new BMap.Point(e.point.lng, e.point.lat);
          var opts = {
               250, // 信息窗口宽度
              height: 70, // 信息窗口高度
              title:"", // 信息窗口标题
              enableMessage: false,//设置允许信息窗发送短息
          }
          var infowindow = new BMap.InfoWindow("基站名称:"+basestationName+"<br/>基站类型:"+basestationType);
          map.openInfoWindow(infowindow, point);
      });
    map.addOverlay(basestationPointCollection);  // 添加Overlay
}

//地图上自定义控件：自定义多选框
function showMap(){
    map = new BMap.Map("information_date",{minZoom:6,maxZoom:17}); // 创建地图实例
    if(city==""){
        map.centerAndZoom("西安",14); // 初始化地图,设置中心点坐标和地图级别。
    }else{
        map.centerAndZoom(city,14); // 初始化地图,设置中心点坐标和地图级别。
    }
    map.enableScrollWheelZoom(true); //启用滚轮放大缩小
    //向地图中添加缩放控件
    var ctrlNav = new window.BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        type: BMAP_NAVIGATION_CONTROL_LARGE
    });
    map.addControl(ctrlNav);

    //向地图中添加比例尺控件
    var ctrlSca = new window.BMap.ScaleControl({
        anchor: BMAP_ANCHOR_BOTTOM_LEFT
    });
    map.addControl(ctrlSca);

     // 定义一个控件类,即function
    function ZoomControl(){
      // 默认停靠位置和偏移量
      this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
      this.defaultOffset = new BMap.Size(10, 10);
    }

    // 通过JavaScript的prototype属性继承于BMap.Control
    ZoomControl.prototype = new BMap.Control();

    // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
    // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
    ZoomControl.prototype.initialize = function(map){
      // 创建一个DOM元素
      var div = document.createElement("div");
      var business = div.appendChild(document.createElement("input"));
      div.appendChild(document.createTextNode("营业厅信息"));
      div.appendChild(document.createElement("br"))

      var cell = div.appendChild(document.createElement("input"));
      div.appendChild(document.createTextNode("4G工参信息"));
      div.appendChild(document.createElement("br"))

      var basestation = div.appendChild(document.createElement("input"));
      div.appendChild(document.createTextNode("规划基站信息"));
      business.type="checkbox";
      business.name="message";
      business.id="bus"
      business.checked="checked";
      cell.type="checkbox";
      cell.name="message";
      cell.id="cel"
      cell.checked="checked";
      basestation.type="checkbox";
      basestation.name="message";
      basestation.id="bas";
      basestation.checked="checked";


      // 设置样式
      div.style.cursor = "pointer";
//      div.style.border = "1px solid gray";
      div.style.backgroundColor = "white";
      div.style.width='120px'
      // 绑定事件,点击一次放大两级
      business.onclick = function(e){//营业厅
         if(document.getElementById("bus").checked){//是否被选中
             showMapMessage(true,false,false);
         }else{
             showHall();
         }
      }
      cell.onclick = function(e){//4G工参
         if(document.getElementById("cel").checked){//是否被选中
             showMapMessage(false,false,true);
         }else{
             showCell();
         }
      }
      basestation.onclick = function(e){//规划基站
         if(document.getElementById("bas").checked){//是否被选中
             showMapMessage(false,true,false);
         }else{
             showBasestation();
         }
      }
      // 添加DOM元素到地图中
      map.getContainer().appendChild(div);
      // 将DOM元素返回
      return div;
    }
    // 创建控件
    var myZoomCtrl = new ZoomControl();
    // 添加到地图当中
    map.addControl(myZoomCtrl);

}

jsp页面代码如下：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script type="text/javascript">
    var path = "<%=request.getContextPath()%>";
    var hall = "<%=request.getContextPath()%>/common/my_resource/picture/hall.png";
</script>
</head>
<body style="height:100%; 100%">
      <!-- 数据div -->
      <div id="information_date" ></div>
</body>