Показать границы OpenLayers после создания круга - PullRequest
Новая
       41

Показать границы OpenLayers после создания круга

1 голос
/ 06 февраля 2012

Я сделал карту 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>

1 Ответ

0 голосов
/ 07 февраля 2012

Я ни в коем случае не эксперт OpenLayers, и буду рад, если меня поправят читатели, которые действительно что-то знают об OpenLayers, но ...

Если вы создаете свой элемент управления DrawFeature, если вы замените 

{handlerOptions: polyOptions}

с 

{handlerOptions: polyOptions, featureAdded: noteAdded}

и определите noteAdded по этим линиям 

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

тогда вы получите именно то уведомление, о котором вы просили. В общем, то, что передается в функцию, указанную featureAdded, является объектом-объектом; в данном случае это OpenLayers.Feature.Vector, свойство geometry которого содержит всю информацию о вашем полигоне.

...