0
votes

I have a OpenLayers project where I am producing a map and a dynamically loaded KML. this all works as expected. how ever my place markers (different things a hunter has shot or seen) are all on top of each other and you can't read the Labels.

what I am trying to achieve is clustering that re-renders as you zoom in and out, but clusters the points but NOT the lineString showing the hunter where he has been.

I am new to javascript (2 months) and this I can't find a solution for anywhere on the web.

here is my code,

map = new OpenLayers.Map("map");
//var layer=  new OpenLayers.Layer.OSM();
var layer = new OpenLayers.Layer.Google(
        "Google Hybrid",
        {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20});
        layer.wrapDateLine=false;
    map.addLayer(layer);



myStyles = new OpenLayers.StyleMap({ 
                "default": new OpenLayers.Style({ 
                strokeColor: "#00ffff", 
                strokeWidth:4, 
                strokeOpacity:1, 
                fillColor:"#003333", 
          fillOpacity: 1, 
            labelYOffset: 15,
            pointRadius: 5,
             label:"${label}", 
            fontColor:"#ff0000",
            context: {
            getLabel: function(f) {   
            if(f.attributes.label===""){
                 return "here"; }
                 return f.attributes.label;
                                   }  
                               }
            })
        })



    var clusterStyle = new OpenLayers.StyleMap({ 
        "default": new OpenLayers.Style({ 
                                   strokeColor: "#00ffff", 
                                   strokeWidth:5, 
                                   strokeOpacity:1, 
                                   fillColor:"#003399", 
                                   fillOpacity: 1,
                         //  externalGraphic: "icons/redcircle.png",
                           labelYOffset: 15,
                           pointRadius: 5,
                                   label:"${label}", 
                                   fontColor:"#ff0000",
                                   context: {
                                 getLabel: function(f) {   

                        var label="init";
                        if(f.cluster[0].attributes.label!=" "){
                            label=" "+f.cluster.getClusterCount+" "+f.cluster[0].attributes.label;}
                        return label;

                            }
                        }
                    })
    })





kmlLayer = new OpenLayers.Layer.Vector("Trip", {
        styleMap: myStyles,
        projection: map.displayProjection,      
        strategies: [new OpenLayers.Strategy.Fixed()],
                    // new OpenLayers.Strategy.Cluster()], //causing the problem         
        protocol: new OpenLayers.Protocol.HTTP({
            params:{ tripid:tripid},    
        url: "kml2.php",
        readWithPOST:true,
        //{userid:userid,tripid:tripid},
        format: new OpenLayers.Format.KML({
                  //  extractStyles: true,
                    extractAttributes: true             
                })          
            })          
        });

    map.addLayer(kmlLayer);

     var clat=(parseFloat(minlat)+parseFloat(maxlat))/2;
        var clon=(parseFloat(minlon)+parseFloat(maxlon))/2;
        var lonlat = new OpenLayers.LonLat(clon,clat).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"));
        map.setCenter(lonlat);
        map.zoomTo(15);
1

1 Answers

2
votes

Try use:

var myCluster = new OpenLayers.Strategy.Cluster({
    threshold: 2, // single clusters are shown as features
    shouldCluster: function(cluster, feature) {
        if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point" &&
            cluster.cluster[0].geometry.CLASS_NAME == 
                                           "OpenLayers.Geometry.Point") {
            return OpenLayers.Strategy.Cluster.prototype.shouldCluster.apply(this, arguments);
        } else {
            return false;
        }
    }
});

Now I tried it. This code is ok...
but your styleMap not, use:

var myStyles = new OpenLayers.StyleMap({ 
    "default": new OpenLayers.Style({ 
            strokeColor: "#00ffff", 
            strokeWidth:5, 
            strokeOpacity:1, 
            fillColor:"#003399", 
            fillOpacity: 1,
            //  externalGraphic: "icons/redcircle.png",
            labelYOffset: 15,
            pointRadius: 5,
            label:"${getLabel}", 
            fontColor:"#ff0000"
        }, {
            context: {
                getLabel: function(f) {
                    var label="init";
                    if (f.cluster) { // is a cluster
                        if (f.cluster[0].attributes.label!=" ") {
                            label= " " + f.attributes.count  + " " +
                                f.cluster[0].attributes.label;
                        } else {
                            label= " " + f.attributes.count + "init";
                        }
                    } else { // is not cluster
                        if (f.attributes.label!=" ") {
                            label= " " + f.attributes.label;
                        }
                    }
                    return label;
                }
            }
    })
});

...and use it so:

kmlLayer = new OpenLayers.Layer.Vector("Trip", {
    styleMap: myStyles,
    projection: map.displayProjection,      
    strategies: [new OpenLayers.Strategy.Fixed(),
                myCluster],
    ...