个人中心
gpt4 book ai didi

javascript - 创建圆后显示 OpenLayers 边界

转载 作者：行者123 更新时间：2023-11-28 10:01:18 25 4
gpt4 key购买 nike

我制作了 OpenLayers map 。

我在 map 上制作了两个要素。

  • 导航

  • 绘制多边形

我的多边形有 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>

最佳答案

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

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

{handlerOptions: polyOptions}

与

{handlerOptions: polyOptions, featureAdded: noteAdded}

并沿着这些线定义noteAdded

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

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

关于javascript - 创建圆后显示 OpenLayers 边界，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9164552/

25 4 0
文章推荐： javascript - 卡住了动态构建 JavaScript 对象
文章推荐： javascript - 使用 jquery 获取 Id 以进行 jeditable
文章推荐： javascript - 现在使用 jQuery - Backbone.Js 调用页面方法
文章推荐： javascript - 将数据绑定(bind)到repeater控件中onclientclick()的链接按钮
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com