【问题标题】:Cluster points from kml for PlaceMarkers but not the LineString来自 kml 的 PlaceMarkers 聚类点,但不是 LineString
【发布时间】:2013-06-15 13:30:57
【问题描述】:

我有一个 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);

【问题讨论】:

    标签: javascript jquery openlayers kml


    【解决方案1】:

    尝试使用:

    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],
        ...
    

    【讨论】:

    • 很抱歉,我无法让它工作,感谢您的评论
    • ...需要threshold: 2
    • 好的,我已经尝试过了,但我什么也没有显示,我在萤火虫中收到错误说.....this.mapStyle.createSymolizer 不是一个函数
    • 见上文,我添加了 styleMap 指示。
    • 它有效,你真的是我的英雄,非常感谢,我也想我明白我哪里出错了。非常感谢
    猜你喜欢
    • 1970-01-01
    • 2012-07-03
    • 2013-12-30
    • 2012-07-05
    • 1970-01-01
    • 2015-11-20
    • 1970-01-01
    • 2012-12-05
    • 1970-01-01
    相关资源
    最近更新 更多