创建圈子后显示OpenLayers界限

我在地图上做了两个功能。

导航
绘制多边形

我已经40个侧到我的多边形这原来是一个圆。绘制我的圆后，我想显示圆的边框的坐标。所以在画一个圆后，我希望能够在警告框中显示该圆的顶部，左侧，底部和右侧坐标？

我的代码被附加及以下：

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

来源

2012-02-06 Blake Loizides

我没有在任何意义上的OpenLayers专家，将竭诚为读者究竟是谁知道一些有关的OpenLayers被纠正，但...

当您建立DrawFeature控制，如果更换

{handlerOptions: polyOptions}

与

{handlerOptions: polyOptions, featureAdded: noteAdded}

，并定义noteAdded沿着这些线路

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

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

来源

2012-02-07 15:05:57

创建圈子后显示OpenLayers界限

回答

相关问题