Hi everyone,

I need some help with cluster strategy.

I have a layer with over 1000 points and many of them are close to each other. 
I try to use cluster strategy to optimize render time, but I can’t make it 
working.

Where I’m wrong????

I have here an example I work with only 3 points. If I can make it working for 
this I can make it for the rest of layers. Here is my code:



<html>
<head>
<title>OpenLayers Test</title>
<script type="text/javascript" src="js/OpenLayers.js"></script>
<script defer="defer" type="text/javascript">
    /* Variables */
    var map;
    
    function init(){
    /* 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.*/

    map = new OpenLayers.Map("map", {
        controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.LayerSwitcher(),        /* Open the switch 
layers panel */
        ],
        maxResolution: 'auto',
        units: 'meters',
        numZoomLevels: 6
    });
    
    /*Map Constructor*/
        /* The next step to creating a viewer is to add a layer to the Map. 
OpenLayers supports many different data sources, from WMS to Yahoo! Maps to 
WorldWind. */
    var basicMapLayer = new OpenLayers.Layer.Image(
          "Map Image",
          "images/maps/MapImage.jpg",
          new OpenLayers.Bounds(0, 0, 510, 510),
        new OpenLayers.Size(510, 510),
        {wrapDateLine: true}
     );
    
    var strategy = new OpenLayers.Strategy.Cluster({distance: 30, threshold: 
2});
    var style = new OpenLayers.Style({
                    strokeColor: "${strokeColor}",
                    strokeOpacity: 1,
                    strokeWidth: 1,
                    fontColor: "#ffffff",
                    fontSize: "12px",
                    fillColor: "${fillColor}",
                    fillOpacity: 0.5,
                    pointRadius: 6,
                    label : "${name}",
                    labelAlign: "lt",
                    fontColor: "white",
                     }, 
                     {
                    context: {
                      fillColor: 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;
                                    feature.attributes.strokeColor = 
feature.cluster[mainFeature].attributes.strokeColor;
                                    feature.attributes.label = 
feature.cluster[mainFeature].attributes.label;
                                }
                                return feature.attributes.fillColor;
                            }
                    }
                 });
    
    /* Adding an Multipoint Vector Layer */
    var monuments = new OpenLayers.Layer.Vector("Monuments", {
                        strategies: [strategy],
                        styleMap: new OpenLayers.StyleMap({"default": style})
                    });
    
    var point_3 = new OpenLayers.Geometry.Point(262, 200);    
            var point_3_Feature = new OpenLayers.Feature.Vector(point_3);
            point_3_Feature.attributes = {
                name: "Well",
                strokeColor: "red",
                fillColor: "red",
                importance: 10,
            }

    var point_2 = new OpenLayers.Geometry.Point(263, 201);    
        var point_2_Feature = new OpenLayers.Feature.Vector(point_2);
            point_2_Feature.attributes = {
                name: "Cathedral",
                strokeColor: "blue",
                fillColor: "blue",
                importance: 3,
            }
    
    // create a point feature
            var point_1 = new OpenLayers.Geometry.Point(260, 202);
            var point_1_Feature = new OpenLayers.Feature.Vector(point_1);
            point_1_Feature.attributes = {
                name: "City Hall",
                strokeColor: "yellow",
                fillColor: "yellow",
                importance: 5,
            }

    
    var monumentsFeature = new OpenLayers.Feature.Vector(
         new OpenLayers.Geometry.MultiPoint([point_3, point_2, point_1]));
    monuments.addFeatures([point_1_Feature, point_2_Feature, point_3_Feature]);
    

    
    
    /* 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.addControl(new OpenLayers.Control.LayerSwitcher());     /* Open the 
switch layers panel */
    map.zoomToMaxExtent();
    }
</script>
</head>
<body onLoad="init()">
<div style="width:100%; height:100%; border:#000 1px solid; 
background:#143750;" id="map"></div>
</body>
</html>



_______________________________________________
Users mailing list
[email protected]
http://lists.osgeo.org/mailman/listinfo/openlayers-users

Reply via email to