<script type="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><td valign=\"top\">test</td><td valign=\"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: new OpenLayers.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 = "<table style=\"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());
return lonlat;
}
</script>
效果图:
![openlayers之cluster——加载大数据量之合并](https://i-blog.csdnimg.cn/blog_migrate/a4c26d1e5885305701be709a3d33442f.gif)