0

我有一个 OpenLayers 项目，我在其中生成地图和动态加载的 KML。这一切都按预期工作。我的位置标记（猎人拍摄或看到的不同事物）如何都在彼此之上，而您无法阅读标签。

我想要实现的是在您放大和缩小时重新渲染的聚类，但聚类点而不是显示猎人所在位置的 lineString。

我是 javascript 新手（2 个月），我无法在网络上的任何地方找到解决方案。

这是我的代码，

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);
4

1 回答 1

2

尝试使用：

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;
        }
    }
});

现在我试了一下。这段代码是好的......
但你的 styleMap 不是，使用：

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;
                }
            }
    })
});

...并这样使用它：

kmlLayer = new OpenLayers.Layer.Vector("Trip", {
    styleMap: myStyles,
    projection: map.displayProjection,      
    strategies: [new OpenLayers.Strategy.Fixed(),
                myCluster],
    ...
于 2013-06-15T14:18:44.283 回答