Con la esperanza de que pueda ser útil...
Definir el estilo
Haga que la característica más importante (icono) represente al grupo.
var siteStyle = new OpenLayers.Style(
{
graphicWidth: ICON_SIZE_WIDTH,
graphicHeight: ICON_SIZE_HEIGHT,
graphicXOffset: -(ICON_SIZE_WIDTH / 2),
graphicYOffset: -(ICON_SIZE_HEIGHT),
externalGraphic: '${icon}',
},
{ context: {
icon: function( feature ) {
if( feature.cluster ) {
var maxImportance = 0;
var mainFeature = 0;
for( var c = 0; c < feature.cluster.length; c++ ) {
var i = feature.cluster[c].attributes.importance;
if( i > maxImportance ) {
maxImportance = i;
mainFeature = c;
}
}
feature.attributes = feature.cluster[mainFeature].attributes;
}
return feature.attributes.icon;
}
}
});
Definir la superposición de iconos
Determina el umbral, en píxeles, que cuantifica la superposición de dos iconos.
// At least 35% of the icon must be visible.
var overlapDistance = Math.round( Math.sqrt(
Math.pow( ICON_SIZE_WIDTH, 2) +
Math.pow( ICON_SIZE_HEIGHT, 2) ) * 0.35 );
Definir la estrategia
Ocultar los sitios que están detrás de otros sitios utilizando la estrategia de Cluster.
var strategy = new OpenLayers.Strategy.Cluster(
{ distance: overlapDistance, threshold: 2 }
);
Aplicar la estrategia
Crear una capa para mostrar los iconos del sitio.
var siteLayer = new OpenLayers.Layer.Vector( 'Sites', {
strategies: [strategy],
styleMap: new OpenLayers.StyleMap( siteStyle )
});
Describa la prioridad de las características
Crear una característica.
var feature = new OpenLayers.Feature.Vector(
getPoint( lon, lat ),
{
uuid: uuid,
icon: getIconPath( classification, MAP_ICON_SUFFIX ),
siteType: classification,
title: label,
importance: priority
}
);
Hallazgos
Esto reduce el número de sitios de ~700 a bastante menos de 400. IE8 sigue siendo ligeramente lento, pero ya no es inutilizable.