2011-11-24 63 views
2

是否有可能放大上點擊集羣?我也不知道如何禁用羣集彈出。我讀this question,但仍然不知道該怎麼做。 下面是代碼:的OpenLayers放大集羣

<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> 

感謝。您的文章沒有什麼太大的上下文解釋代碼段;請更清楚地解釋你的情況。

回答

1

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