创建圆后显示 OpenLayers 边界

发布于 2025-01-03 13:25:21 字数 5282 浏览 1 评论 0原文

我制作了一个 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>

原文

I have made an OpenLayers map.

I have made two features on the map.

Navigate
Draw Polygon

I have made 40 sides to my polygon which turns out to be a circle. After I have drawn my circle I want to show the coordinates of the bounding box of the circle. So after I draw a circle I want to be able show the top, left, bottom and right coordinates for that circle in an ALERT BOX?

My code is attached and below:

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

分享到QQ

分享到微博

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

发布评论

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

小姐丶请自重 2025-01-10 13:25:22

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

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

{handlerOptions: polyOptions}

为

{handlerOptions: polyOptions, featureAdded: noteAdded}

并定义 noteAdded< /code> 沿着这些线

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

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

I am not in any sense an OpenLayers expert, and will be glad to be corrected by readers who actually know something about OpenLayers, but ...

When you're creating your DrawFeature control, if you replace

{handlerOptions: polyOptions}

with

{handlerOptions: polyOptions, featureAdded: noteAdded}

and define noteAdded along these lines

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

then you will get exactly the notification you're asking for. In general, what gets passed to the function specified by featureAdded is a feature object; in this case it's an OpenLayers.Feature.Vector whose geometry property contains all the information about your polygon.

回复收藏 0 原文

~没有更多了~