Question

是否可以在点击时放大群集？我也不知道如何禁用群集弹出窗口。我看了this question，但仍然不知道该怎么做。这是代码：

<html>

<script src="../ol/OpenLayers.js"></script>

<script>
var map, select;
var lat = 53.507;
var lon = 28.145;
var zoom = 7;


function init() {
map = new OpenLayers.Map("map",
        { maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                  numZoomLevels: 19,
                  maxResolution: 156543.0399,
                  units: 'm',
                  projection: new OpenLayers.Projection("EPSG:900913"),
                  displayProjection: new OpenLayers.Projection("EPSG:4326"),
                controls: [
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.ScaleLine(),
                    new OpenLayers.Control.Permalink('permalink'),
                    new OpenLayers.Control.Attribution(),
                    new OpenLayers.Control.MousePosition()
                ] });

var osm = new OpenLayers.Layer.OSM("OpenStreetMap");
 map.addLayer(osm);


 var lonLat = new OpenLayers.LonLat(lon, lat).transform(map.displayProjection,  map.projection);
        if (!map.getCenter()) map.setCenter (lonLat, zoom);


         var MyStyle = new OpenLayers.Style({
      //  'cursor' : 'pointer',
        fillColor : "#336699",
        fillOpacity : 0.9,
        fontColor: "#000080",
        fontFamily: "sans-serif, Arial",
    //  fontWeight: "bold",
        externalGraphic: "atm.png",
        graphicWidth: 32,
        graphicHeight: 37,
        label: "${count}",
        labelAlign: "ct",
        fontSize: "15px",

        });



        var layer =   new OpenLayers.Layer.Vector("Atm", {
                          protocol: new OpenLayers.Protocol.HTTP({
                          url: "atm.txt",
                          format: new OpenLayers.Format.Text({extractStyles: true}),
                          params: {
                               extractAttributes:     false,

              }
                }),
               styleMap: MyStyle, <!-- --------------------- style -->                                                                  
                projection:       map.displayProjection,
        strategies:       [
        new OpenLayers.Strategy.BBOX({ratio: 1, resFactor: 1.1}),
        new OpenLayers.Strategy.Cluster({distance: 50, threshold: 3})
                                  ]
            });
              map.addLayer(layer);

                              // Interaction; not needed for initial display.
            selectControl = new OpenLayers.Control.SelectFeature(layer);
            map.addControl(selectControl);
            selectControl.activate();
            layer.events.on({
                'featureselected': onFeatureSelect,
                'featureunselected': onFeatureUnselect
           });
       }


        // Needed only for interaction, not for the display.
       function onPopupClose(evt) {
           // 'this' is the popup.
          var feature = this.feature;
            if (feature.layer) { // The feature is not destroyed
                selectControl.unselect(feature);
            } else { // After "moveend" or "refresh" events on POIs layer all 
                     //     features have been destroyed by the Strategy.BBOX
                this.destroy();
            }
        }
        function onFeatureSelect(evt) {
           feature = evt.feature;
            popup = new OpenLayers.Popup.FramedCloud("featurePopup",
                                     feature.geometry.getBounds().getCenterLonLat(),
                                     new OpenLayers.Size(100,100),
                                    "<h2>"+feature.attributes.title + "</h2>" +
                                     feature.attributes.description,
                                    null, true, onPopupClose);
            feature.popup = popup;
            popup.feature = feature;
            map.addPopup(popup, true);
        }
        function onFeatureUnselect(evt) {
            feature = evt.feature;
            if (feature.popup) {
               popup.feature = null;
                map.removePopup(feature.popup);
               feature.popup.destroy();
                feature.popup = null;
           }

 }


</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>

感谢。你的帖子没有太多的上下文来解释代码部分;请更清楚地解释一下你的情景。

Answer 1

function onFeatureSelect(event) {
    if(!event.feature.cluster) // if not cluster
    {
      // handle your popup code for the individual feature 
    } 
    else
    {
       // fetch the cluster's latlon and set the map center to it and call zoomin function
       // which takes you to a one level zoom in and I hope this solves your purpose :)    
       map.setCenter(event.feature.geometry.getBounds().getCenterLonLat());
       map.zoomIn();
    }
}

Answer 2

使用the linked question中的示例代码我将迭代群集中的所有功能以创建BBX，然后放大到该范围。

var cluster_bounds=new OpenLayers.Bounds();
event.feature.cluster.forEach(function(feature){
    clouster_bounds.extend(feature.geometry);
})
map.zoomToExtent(cluster_bounds)

如果您真的不知道如何禁用弹出窗口，请删除这些功能：

    function onFeatureSelect(evt) {
    function onFeatureUnselect(evt) {

并将其替换为：

function onFeatureSelect(event) {
    var cluster_bounds=new OpenLayers.Bounds();
    event.feature.cluster.forEach(function(feature){
        cluster_bounds.extend(feature.geometry);
    });
    map.zoomToExtent(cluster_bounds);
}

Openlayers放大群集

2 个答案: