8

I want to use OpenLayers to draw a simple rectangle (based on 4 coordinates) on my map. I would also like to fill the rectangle with a color.

For example (EPSG:4326):

  • 13.40, 52.50
  • 13.50, 52.50
  • 13.50, 52.60
  • 13.40, 52.60

The documentation tells me to use this: 

var poly = new OpenLayers.Bounds(0,0,10,10).toGeometry();

How I am supposed to convert this?

PolyGeo
  • 65,136
  • 29
  • 109
  • 338
np00
  • 543
  • 1
  • 6
  • 12

4 Answers4

13

Why dont you use the classic way:

 var style = {
   strokeColor: "#00FF00",
   strokeOpacity: 1,
   strokeWidth: 3,
   fillColor: "#00FF00",
   fillOpacity: 0.8
};

var p1 = new OpenLayers.Geometry.Point(lon, lat);
var p2 = new OpenLayers.Geometry.Point(lon, lat);
var p3 = new OpenLayers.Geometry.Point(lon, lat);
var p4 = new OpenLayers.Geometry.Point(lon, lat);
var p5 = new OpenLayers.Geometry.Point(lon, lat);


var pnt= [];
pnt.push(p1,p2,p3,p4,p5);


var ln = new OpenLayers.Geometry.LinearRing(pnt);
var pf = new OpenLayers.Feature.Vector(ln, null, style);


vector.addFeatures([pf]);
PolyGeo
  • 65,136
  • 29
  • 109
  • 338
urcm
  • 22,533
  • 4
  • 57
  • 109
9

You can use the Polygon.createRegularPolygon() method as well when you know the Center of your square but don't know or don't want to calculate the square bounds. Meaning you're drawing a square around some center point.

Now for circle, you'd pass in like 30+ points, and it would look circle-like enough. But square needs 4. But then the side Length gets messed up (and perimeter and area). So note the math below to correct the error:

function makeSquare(center_lat, center_lon, p_radius, p_units)
{
    var radiusMiles = ...my radius...; // however you get it

var arrConversion = [];
arrConversion['degrees'] = ( 1 / (60 * 1.1508) );
arrConversion['dd'] = arrConversion['degrees'];
arrConversion['m'] = ( 1609.344);
arrConversion['ft'] = ( 5280  );
arrConversion['km'] = ( 1.609344 );
arrConversion['mi'] = ( 1 );
arrConversion['inches'] = ( 63360 );

// need to multiply by sqrt(2)/2 or 1.41421356/2  because
// were passing in RADIUS and that's a diagonal when drawing the square.  so we have to 
// adjust by root 2 so we get the actual sides in length that we want

var r = radiusMiles 
        *  arrConversion[ this.map.getProjectionObject().proj.units]
        * 1.41421356 /2 ;

var c = new OpenLayers.Geometry.Point( center_lon, center_lat )
                .transform( new OpenLayers.Projection("EPSG:4326"), this.map.getProjectionObject() );   

var f = new OpenLayers.Feature.Vector();

f.geometry = OpenLayers.Geometry.Polygon.createRegularPolygon(

      c
    , r
    , 4 // SQUARE
    , 0 // no rotation

);

return f;



}
PolyGeo
  • 65,136
  • 29
  • 109
  • 338
Vadim
  • 3,971
  • 2
  • 29
  • 42
4

Create your extent {rectangle}

var box_extents = [
    [-10, 50, 5, 60],
    [-75, 41, -71, 44],
    [-122.6, 37.6, -122.3, 37.9],
    [10, 10, 20, 20]
];
var map;
function init(){
    map = new OpenLayers.Map('map');

var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
    "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'} );

var boxes  = new OpenLayers.Layer.Boxes( "Boxes" );

for (var i = 0; i < box_extents.length; i++) {
    ext = box_extents[i];
    bounds = OpenLayers.Bounds.fromArray(ext);
    box = new OpenLayers.Marker.Box(bounds);
    box.events.register("click", box, function (e) {
        this.setBorder("yellow");
    });
    boxes.addMarker(box);
}

map.addLayers([ol_wms, boxes]);

Source http://dev.openlayers.org/examples/boxes.html

Kadir Şahbaz
  • 76,800
  • 56
  • 247
  • 389
Mapperz
  • 49,701
  • 9
  • 73
  • 132
0

Having EPSG:4326 bbox coordinates I've managed to draw rectangle like this: 

    boxes  = new OpenLayers.Layer.Boxes("Boxes")
    coordinates = [boundingbox.left, boundingbox.bottom,boundingbox.right, boundingbox.top]
    bounds = OpenLayers.Bounds.fromArray(coordinates).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"))
    box = new OpenLayers.Marker.Box(bounds)
    box.setBorder("blue")
    boxes.addMarker(box)
    map.addLayers([boxes])
zzart
  • 101