Openlayers 放大集群

发布于 2024-12-17 20:04:50 字数 4665 浏览 0 评论 0原文

是否可以通过单击放大集群？我也不知道如何禁用集群弹出窗口。我读了这个问题，但仍然不知道该怎么做。这是代码：

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

谢谢。您的帖子没有太多上下文来解释代码部分；请更清楚地解释您的情况。

原文

Is it possible to zoom in on cluster on click? I also don't know how to disable cluster popup. I read this question , but still have no idea how to do it.
Here is the code:

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

Thanks. Your post does not have much context to explain the code sections; please explain your scenario more clearly.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

燃情 2024-12-24 20:04:50

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

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

回复收藏 0 原文

雨巷深深 2024-12-24 20:04:50

使用链接的问题中的示例代码我将迭代集群中的所有功能创建 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);
}

Using the example code in the linked question I would iterate over all features in the cluster to create a BBX, and then zoom into that extent.

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

If you really don't know how to disable the popups then remove these functions:

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

And replace it with:

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

回复收藏 0 原文

~没有更多了~