Many thanks and kisses Paul, you saved me.
(I was able to create activate() function using your example.)
here is the final code for all who are interested in optimizing cluster
strategy:
-------------------------
<html>
<head>
<title>Cluster</title>
<script src="js/lib/Firebug/firebug.js"></script>
<script type="text/javascript" src="js/OpenLayers.js"></script>
<script defer="defer" type="text/javascript">
function init(){
// styles for cluster strategy
var style = new OpenLayers.Style({
fillColor: "${fill_color}",
fillOpacity: 0.4,
pointRadius: "${radius}",
strokeColor: "${stroke_color}",
strokeOpacity: 1,
strokeWidth: 1
},
{
context: {
radius: function(feature) {
var pix = 8;
if(feature.cluster) {
pix = Math.min(feature.attributes.count, 11)
+ 8;
}
return pix;
},
fill_color: function(feature) {
if(feature.cluster) {
maxImportance = 0;
for(var c = 0; c <
feature.cluster.length; c++) {
i =
feature.cluster[c].attributes.importance;
if(i > maxImportance) {
maxImportance = i;
mainFeature = c;
}
}
feature.attributes.fillColor =
feature.cluster[mainFeature].attributes.fillColor;
}
return feature.attributes.fillColor;
},
stroke_color: function(feature) {
if(feature.cluster) {
maxImportance = 0;
for(var c = 0; c <
feature.cluster.length; c++) {
i =
feature.cluster[c].attributes.importance;
if(i > maxImportance) {
maxImportance = i;
mainFeature = c;
}
}
feature.attributes.strokeColor =
feature.cluster[mainFeature].attributes.strokeColor;
}
return feature.attributes.strokeColor;
}
}
});
/* Creating the Map Viewer */
/*In order to create the viewer, you must first create a map. The
OpenLayers.Map constructor requires one argument: This argument must either
be an HTML Element, or the ID of an HTML element. This is the element in
which the map will be placed.*/
var map = new OpenLayers.Map("map", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanPanel(),
new OpenLayers.Control.ZoomPanel(),
new OpenLayers.Control.LayerSwitcher() /* Open the switch
layers panel */
],
maxResolution: 'auto',
numZoomLevels: 6 // levels of zoom
});
/*Map Constructor*/
/* The next step to creating a viewer is to add a basic layer to the
Map. */
var basicMapLayer = new OpenLayers.Layer.Image(
"Map Image",
"images/maps/MapImage.jpg",
new OpenLayers.Bounds(0, 0, 510, 510),
new OpenLayers.Size(510, 510)
);
/* Adding an Multipoint Vector Layer with cluster strategy */
var clusterStrategy = new OpenLayers.Strategy.Cluster({
distance: 20,
deactivate: function() {
var deactivated =
OpenLayers.Strategy.prototype.deactivate.call(this);
if(deactivated) {
var features = [];
var clusters = this.layer.features;
for (var i=0; i<clusters.length;
i++) {
var cluster = clusters[i];
if (cluster.cluster) {
for (var j=0;
j<cluster.cluster.length; j++) {
features.push(cluster.cluster[j]);
}
} else {
features.push(cluster);
}
}
this.layer.removeAllFeatures();
this.layer.events.un({
"beforefeaturesadded":
this.cacheFeatures,
"moveend": this.cluster,
scope: this
});
this.layer.addFeatures(features);
this.clearCache();
}
return deactivated;
},
activate: function() {
var activated =
OpenLayers.Strategy.prototype.activate.call(this);
if(activated) {
var features = [];
var clusters = this.layer.features;
for (var i=0; i<clusters.length;
i++) {
var cluster = clusters[i];
if (cluster.cluster) {
for (var j=0;
j<cluster.cluster.length; j++) {
features.push(cluster.cluster[j]);
}
} else {
features.push(cluster);
}
}
this.layer.removeAllFeatures();
this.layer.events.on({
"beforefeaturesadded":
this.cacheFeatures,
"moveend": this.cluster,
scope: this
});
this.layer.addFeatures(features);
this.clearCache();
}
return activated;
}
});
var monuments = new OpenLayers.Layer.Vector("Monuments", {
strategies: [clusterStrategy],
styleMap: new OpenLayers.StyleMap({"default":
style})
});
// cluster threshold
var clusterMaxZoom = 0; // maximum zoom level is 5. Zoom level start at
0.
map.events.register("move", null, function() { // respond to map extent
change
var zoom = map.getZoom();
console.log('zoom is ' + zoom);
// disable cluster when zoom greater than threshold
if (zoom > clusterMaxZoom) { // read current zoom
clusterStrategy.deactivate(); // disable cluster strategy
//clusterStrategy.clearCache(); // clear cluster cache
console.log('deactivate cluster');
} else {
clusterStrategy.activate(); // disable cluster strategy
console.log('activate cluster');
}
});
//here is a hint:
//----------------------------
// filter features based on bounding box
var extent = map.getExtent(); // how to read visible bounds
// reload features here, it depends on how you read your features in now
});
// If you are not using a Protocol like WFS () with your layer then the BBOX
strategy will have no effect and you will have to manually reload features
using whatever mechanism you are using now.
//----------------------------
// create vector points to be added to layer
var point_1 = new OpenLayers.Geometry.Point(270, 205);
var point_1_Feature = new OpenLayers.Feature.Vector(point_1);
point_1_Feature.attributes = {
strokeColor: "#ffffff",
fillColor: "#ffffff",
importance: 9
}
var point_2 = new OpenLayers.Geometry.Point(263, 201);
var point_2_Feature = new OpenLayers.Feature.Vector(point_2);
point_2_Feature.attributes = {
strokeColor: "blue",
fillColor: "blue",
importance: 3
}
var point_3 = new OpenLayers.Geometry.Point(260, 202);
var point_3_Feature = new OpenLayers.Feature.Vector(point_3);
point_3_Feature.attributes = {
strokeColor: "yellow",
fillColor: "yellow",
importance: 5
}
var point_4 = new OpenLayers.Geometry.Point(261, 202);
var point_4_Feature = new OpenLayers.Feature.Vector(point_4);
point_4_Feature.attributes = {
strokeColor: "yellow",
fillColor: "yellow",
importance: 5
}
var point_5 = new OpenLayers.Geometry.Point(263, 202);
var point_5_Feature = new OpenLayers.Feature.Vector(point_5);
point_5_Feature.attributes = {
strokeColor: "yellow",
fillColor: "yellow",
importance: 5
}
/* Layer Constructor */
/* In order to display the map, you must set a center and zoom
level. In order to zoom to fit the map into the window, you can use the
zoomToMaxExtent function, which will zoom as close as possible while still
fitting the full extents within the window. */
map.addLayers([basicMapLayer, monuments]);
map.zoomToMaxExtent();
// features for layer with cluster strategy must me declared after
layer is added in order to work
var monumentsFeature = new OpenLayers.Feature.Vector(
new
OpenLayers.Geometry.MultiPoint([point_1, point_2, point_3, point_4,
point_5])
);
monuments.addFeatures([point_1_Feature, point_2_Feature,
point_3_Feature, point_4_Feature, point_5_Feature]);
// end of init function
}
</script>
</head>
<body onLoad="init()">
<div style="width:100%; height:100%; border:#000 1px solid;
background:#000000;" id="map"></div>
</body>
</html>
-------------------------
-----Original Message-----
From: Paul Spencer
Sent: Thursday, February 17, 2011 4:29 AM
To: Misu Visan
Cc: OpenLayers User list
Subject: Re: [OpenLayers-Users] cluster strategy
There was a syntax error, replace the inner if with this:
...
----------------------------
On Wed, Feb 16, 2011 at 5:21 PM, Paul Spencer <[email protected]> wrote:
change it to be
-------------------------
On 2011-02-16, at 9:54 AM, Mihai Visan wrote:
Hi Paul,
...
....................................................................
-----Original Message-----
From: Paul Spencer
Sent: Wednesday, February 16, 2011 3:37 PM
To: Mihai Visan
Cc: OpenLayers User list
Subject: Re: [OpenLayers-Users] cluster strategy
I don't know your code but I would assume that you are looking for
something like this:
var map = new OpenLayers.Map('mapDiv', mapOptions);
var clusterStrategy = new OpenLayers.Strategy.Cluster(clusterOptions);
var layerOptions = {
strategies: [clusterStrategy]
};
var vectorLayers = new OpenLayers.Layer.Vector('features',
layerOptions);
// cluster threshold
var clusterMaxZoom = 10;
map.events.register('move', null, function() { // #2, #3 respond to map
extent change
// disable cluster when zoom greater than threshold
if (map.getZoom() > clusterMaxZoom) { // #2.1 how to read current zoom
clusterStrategy.deactivate(); // #2.2 how to disable cluster
strategy
} else {
clusterStrategy.activate();
}
// filter features based on bounding box
var extent = map.getExtent(); // #3.1
// reload features here, it depends on how you read your features in
now
});
If you are not using a Protocol like WFS () with your layer then the
BBOX strategy will have no effect and you will have to manually reload
features using whatever mechanism you are using now.
Cheers
Paul
On 2011-02-16, at 7:58 AM, Mihai Visan wrote:
Thanks Paul,
I already read the documentation and all tutorial and user discusions I
could found.
But I'm a week at javascript, so I could use some examples or tutorials
I could transform
-----Original Message----- From: Paul Spencer
Sent: Wednesday, February 16, 2011 2:43 PM
To: Mihai Visan
Subject: Re: [OpenLayers-Users] cluster strategy
Mihai, all of your questions have answers in the documentation ...
On 2011-02-16, at 7:29 AM, Mihai Visan wrote:
2. disable cluster strategy at certain zoom level.
Problems: 2.1. I don’t know how to read current zoom
http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers/Map-js.html#OpenLayers.Map.getZoom
2.2. I don’t know to disable cluster strategy
http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers/Strategy/Cluster-js.html#OpenLayers.Strategy.Cluster.deactivate
3. use (BBOX strategy and) ajax to disable features outside visible
bounds
Problems: 3.1. I don’t know how to read visible bounds
http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers/Map-js.html#OpenLayers.Map.getExtent
3.2. I don’t know how to integrate ajax with
(BBOX and) mouse drag or zoom in/out
http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers/Map-js.html#OpenLayers.Map.EVENT_TYPES
Cheers
Paul
_______________________________________________
Users mailing list
[email protected]
http://lists.osgeo.org/mailman/listinfo/openlayers-users
