创建圆后显示 OpenLayers 边界

Question

我已经制作了一个 OpenLayers 地图。

我在地图上做了两个特征。

• 导航

• 绘制多边形

我已经为我的多边形制作了 40 个边，结果是一个圆形。画完圆圈后，我想显示圆圈边界框的坐标。所以在我画了一个圆之后，我希望能够在 ALERT BOX 中显示该圆的上、左、下和右坐标？

我的代码附在下面：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    html, body, #map {
        margin: 0;
        width: 100%;
        height: 100%;
    }
</style>

<style type="text/css">
    #controls {
        width: 512px;
        position: absolute;
        bottom: 1em;
        left: 1em;
        width: 512px;
        z-index: 20000;
        background-color: white;
        padding: 0 0.5em 0.5em 0.5em;
    }
    #controlToggle {
        padding-left: 1em;
    }
    #controlToggle li {
        list-style: none;
    }
</style>

<script src="js/firebug.js"></script>
<script src="http://www.openlayers.org/dev/OpenLayers.js"></script>

<script type="text/javascript">
var lon = 24.0000000000; 
var lat = -29.000000000000;

var zoom = 4;
var map, layer, vectors, controls;

function init(){
    // Because the Streetmaps system uses 300x300 tiles, we need to set up the scaling variables to work with these
    var aRes =     [90,45,22.500000,11.250000,5.625000,2.812500,1.406250,0.703125,0.351563,0.175781,0.087891,0.043945,       0.021973,0.010986,0.005493,0.002747,0.001373,0.000687,0.000343];
    for (var l=0;l<aRes.length;l++) { 
        aRes[l] = aRes[l]/300; 
    }

    // Normal init, but we pass through the info about the zoom/scaling as options
    map = new OpenLayers.Map( 'map', 
    { 
        tileSize: new OpenLayers.Size(300, 300), 
        projection: 'CRS:84', 
        numZoomLevels: aRes.length, 
        resolutions:aRes, 
        maxResolution:360/300 
    });

    // At this point the control is used as per normal            
    layer1 = new OpenLayers.Layer.WMS( 
        'Streetmaps Streets',
        'http://www.streetmaps.co.za/WMS/?',
        {
            key:                                    'HZPGNWPNDYPREPTIKSIHWKYKQYYOQVYX',
            service:                                'WMS',
            request:                                'GetMap',
            version:                                '1.3.0',
            layers:                                 'sm.maps.tiled',
            format:                                 'image/png'
        }
    );

    layer2 = new OpenLayers.Layer.WMS( 
        'Streetmaps Imagery',
        'http://www.streetmaps.co.za/WMS/?', 
        {
            key:                                    'HZPGNWPNDYPREPTIKSIHWKYKQYYOQVYX',
            service:                                'WMS',
            request:                                'GetMap',
            version:                                '1.3.0',
            layers:                                 'sm.imagery',
            format:                                 'image/png'
        }
    );

    // This loads the map
    map.addLayer(layer1);
    map.addLayer(layer2);

    map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
    map.addControl( new OpenLayers.Control.LayerSwitcher() );
    var vectors = new OpenLayers.Layer.Vector("vector", {isBaseLayer: true});
    map.addLayers([vectors]);

    // This loads the overlays
    var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
        "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'}); 

    var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");

    map.addLayers([wmsLayer, polygonLayer]);
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.MousePosition());

    polyOptions = {sides: 40};
    polygonControl = new OpenLayers.Control.DrawFeature(polygonLayer,
        OpenLayers.Handler.RegularPolygon,
        {handlerOptions: polyOptions});

    map.addControl(polygonControl);          

    document.getElementById('noneToggle').checked = true;
    document.getElementById('irregularToggle').checked = false;
}

function setOptions(options) {
    polygonControl.handler.setOptions(options);
}

function toggleControl(element) {
    for(key in controls) {
        var control = controls[key];
        if(element.value == key && element.checked) {
            control.activate();
        } else {
            control.deactivate();
        }
    }
}

   </script>
   </head>
   <body onLoad="init()">
<div id="map" class="smallmap"></div>
    <div id="controls">
        <ul id="controlToggle">
            <li>
                <input type="radio" name="type"
                    value="none" id="noneToggle"
                    onclick="polygonControl.deactivate()"
                    checked="checked" />
                <label for="noneToggle">navigate</label>
            </li>
            <li>
                <input type="radio" name="type"
                    value="polygon" id="polygonToggle"
                    onclick="polygonControl.activate()" />
                <label for="polygonToggle">draw polygon</label>
            </li>
        </ul>          
    </div>
      </div>
    </body>
 </html>

Answer 1

我在任何意义上都不是 OpenLayers 专家，很高兴得到真正了解 OpenLayers 的读者的指正，但是...

当你创建 DrawFeature 控件时，如果你替换

{handlerOptions: polyOptions}

与

{handlerOptions: polyOptions, featureAdded: noteAdded}

并按照这些思路定义noteAdded

function noteAdded(f) {
  alert(f.geometry.getBounds());
}

那么您将得到您所要求的确切通知。一般来说，传递给featureAdded指定的函数的是一个特征对象；在这种情况下，它是一个OpenLayers.Feature.Vector，其geometry 属性包含有关您的多边形的所有信息。