創建圓后顯示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屬性包含有關多邊形的所有信息。

創建圓后顯示OpenLayers邊界

問題描述

1 個解決方案

解決方案1
0 已采納 2012-02-07 15:05:57

創建圓后顯示OpenLayers邊界

問題描述

1 個解決方案

解決方案1 0 已采納 2012-02-07 15:05:57

解決方案1
0 已采納 2012-02-07 15:05:57