openlayers之cluster——加载大数据…

<scripttype="text/javascript">
       var dx = 3;
       var dy = 3;
       var px, py;
       var features = [];
       var strategy, clusters;;
       function draw() {
           var ic = "Images/Icon/car_yellow_0.png";
           for (var i = 0; i < 400; i++) {
               var sHtml = "<tr><tdvalign=\"top\">test</td><tdvalign=\"top\">" + i.toString() +"</td></tr>";
               px = Math.random() * (122 - 121 + 0.001) + 121;
               py = Math.random() * (30 - 29 + 0.001) + 29;
               var ll = tranformTo900913(px, py); //将4326坐标转换为900913
               features.push(new OpenLayers.Feature.Vector(
                       new OpenLayers.Geometry.Point(ll.lon, ll.lat), { x: ll.lon, y:ll.lat, html: sHtml, img: ic, name: "浙B" + i.toString() }
                   ));
           }

 

           var style = new OpenLayers.Style({
               fontSize: "9pt",
               fontWeight: "bold"
           }, {
               rules: [
               new OpenLayers.Rule({
                   filter: newOpenLayers.Filter.Comparison({     //设置单点时的图标
                       type:OpenLayers.Filter.Comparison.EQUAL_TO,   
                       property: "count",  //获取合并点数
                       value: 1
                   }),
                   symbolizer: {
                       graphicWidth: 25,
                       graphicHeight: 25,
                       labelYOffset: "-10",  //设置显示文字的偏移量
                       label: "${name}",  //获取显示文字
                       externalGraphic: "${img}"  //获取显示图标
                   }
               }),
                new OpenLayers.Rule({
                    // apply this rule if no others apply
                    elseFilter: true,
                    symbolizer: {
                        pointRadius: "${radius}",  //计算点半径
                        fillColor: "#ffcc66",
                        fillOpacity: 0.8,
                        strokeColor: "#cc6633",
                        strokeWidth: "${width}",
                        labelYOffset: "-8",
                        label: "${count}",  //获取合并点数
                        strokeOpacity: 0.8
                    }
                })
              ],
               context: {
                   width: function (feature) {
                       return (feature.cluster) ? 2 : 1;
                   },
                   radius: function (feature) {
                       var pix = 2;
                       if (feature.cluster) {
                           pix = Math.min(feature.attributes.count, 7) + 2;
                       }
                       return pix;
                   },
                   count: function (feature) {
                       return feature.attributes.count;
                   },
                   img: function (feature) {
                       return feature.cluster[0].data.img;
                   },
                   name: function (feature) {
                       return feature.cluster[0].data.name;
                   }
               }
           });

           strategy = new OpenLayers.Strategy.Cluster();

           clusters = new OpenLayers.Layer.Vector("Clusters", {
               strategies: [strategy],
               styleMap: new OpenLayers.StyleMap(style)
           });

           var select = new OpenLayers.Control.SelectFeature(clusters);
           map.addControl(select);
           select.activate();
           map.addLayer(clusters);
           strategy.distance = 50;  //设置合并范围
          // strategy.threshold =  strategy.threshold;
           clusters.removeFeatures(clusters.features);
           clusters.addFeatures(features);

           //画popup窗
           clusters.events.on({
               featureselected: function (e) {
                   feature = e.feature;
                   var fHtml = "<tablestyle=\"width:150px;height:100px;\">";
                   for (var i = 0; i < feature.cluster.length; i++){
                       fHtml += feature.cluster[i].data.html;
                   }
                   fHtml += "</table>";
                   var lonlat = new OpenLayers.LonLat(feature.cluster[0].geometry.x,feature.cluster[0].geometry.y);
                   popup = new OpenLayers.Popup.FramedCloud("featurePopup",
                                                    lonlat,
                                        new OpenLayers.Size(300, 300),
                                      fHtml,
                                        null, true, function (e) {

                                            select.unselect(this.feature);
                                        });
                   feature.popup = popup;
                   popup.feature = feature;
                   popup.size = new OpenLayers.Size(300, 300);
                   map.addPopup(popup);
               },
               featureunselected: function (e) {
                   feature = e.feature;
                   if (feature.popup) {
                       popup.feature = null;
                       map.removePopup(feature.popup);
                       feature.popup.destroy();
                       feature.popup = null;
                   }
               }
           });
       }

function tranformTo900913(lon, lat) {
    var proj =new OpenLayers.Projection("EPSG:4326");
    var lonlat =new OpenLayers.LonLat(lon + 0.0042, lat - 0.00258);
   lonlat.transform(proj, map.getProjectionObject());
    returnlonlat;
}

   </script>

 

效果图：