概述：
前面的文章中，讲述了Arcgis for js中聚类分析与展示，在本文，讲述如何在Openlayers2中聚类分析的实现。
实现效果：
实现：
主要分为：1、点的聚类；2、聚类点随着地图缩放的更新；3、聚类点的详细。
1、点的聚类与更新
var style = new OpenLayers.Style({
pointRadius: "${radius}",
fillColor: "#ff0000",
label: "${name}",
fontSize: "8px",
cursor : "pointer",
fontWeight:"bold",
fontColor: "#ffffff",
fontFamily:"sans-serif",
fillOpacity: 0.8,
strokeColor: "#ff0000",
strokeWidth: "3",
strokeOpacity: 1
}, {
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 ) + 5;
}
return pix;
},
name: function ( feature ) {
var name;
if ( feature.attributes.count > 1 ) {
name = feature.attributes.count;
} else {
name = feature.cluster[0].attributes.name;
}
return name;
}
}
});
strategy = new OpenLayers.Strategy.Cluster();
clusters = new OpenLayers.Layer.Vector( "Clusters", {
strategies: [strategy],
styleMap: new OpenLayers.StyleMap( {
"default": style,
"select": {
fillColor: "#0000ff",
strokeColor: "#0000ff"
}
} )
});
map.addLayer(clusters);
var distance = 150;
var threshold = 1;
strategy.distance = distance || strategy.distance;
strategy.threshold = threshold || strategy.threshold;
clusters.addFeatures(features2);2、点的详细
var vectors = new OpenLayers.Layer.Vector("select",{
styleMap: new OpenLayers.StyleMap({
"default": {
fillColor: "#00ffff",
strokeColor: "#00ffff",
pointRadius: "2"
}
})
});
map.addLayer(vectors);
var select = new OpenLayers.Control.SelectFeature(
clusters,
{
clickout: true,
toggle: false,
multiple: false,
hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey", // shift key adds to selection
box: false
}
);
map.addControl(select);
select.activate();
clusters.events.on({
'featureselected': function(feature) {
vectors.removeAllFeatures();
var cluster = feature.feature.cluster;
vectors.addFeatures(cluster);
},
'featureunselected': function(feature) {
vectors.removeAllFeatures();
}
});
map.events.register("zoomend",map,function(){
vectors.removeAllFeatures();
});详细代码如下：
openlayers map
