如何通过openlayers绘制矩形？

Question

我正在尝试使用javascript在具有4个给定参数（北，南，西，东）的地图上绘制一个矩形。 我已经设法用google-maps做到这一点，但我也想将它与openstreetmap一起使用（目前正在使用openlayers-api）

到目前为止，这是我的代码：

        openstreetRectangle : function(param) {
        var map, bounds, coords, defaults;
        var mapnik = new OpenLayers.Layer.OSM();
        defaults = {
            n : 50.930985,
            s : 50.92991,
            w : 11.587115,
            e : 11.588392
        };
        coords = $.extend(defaults, param);
        bounds = new OpenLayers.Bounds(coords.w, coords.s, coords.e, coords.n);
        map = new OpenLayers.Map("map");
        if ((coords.s == coords.n) && (coords.w == coords.e)) {
            var marker = new OpenLayers.Layer.Markers("marker");
            var size = new OpenLayers.Size(21, 25);
            var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
            var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
            marker.addMarker(new OpenLayers.Marker(bounds.getCenterLonLat(), icon));
            map.addLayer(marker);
            // Note that if you pass an icon into the Marker constructor, it will
            // take that icon and use it. This means that you should not share icons
            // between markers -- you use them once, but you should clone() for any
            // additional markers using that same icon.
        } else {
            var boxes = new OpenLayers.Layer.Boxes("Boxes");
            var box = new OpenLayers.Marker.Box(bounds, "#008DCF", 4);
            boxes.addMarker(box);
            map.addLayer(boxes);
        }
        map.addLayer(mapnik);
        map.setCenter(bounds.getCenterLonLat(), 15);
    }

在地图上绘制标记和框是可行的，但是在地图中心，标记和框的位置存在问题，我猜想OpenLayers.Bounds -Object似乎无法正常工作。

谁能帮忙解决此问题？

真诚的S.Röher

Answer 1

我解决了

    openstreetRectangle : function(param) {
        var map, bounds, coords, defaults;
        var mapnik = new OpenLayers.Layer.OSM();
        defaults = {
            n : 50.930985,
            s : 50.9301,
            w : 11.58725,
            e : 11.58825
        };
        coords = $.extend(defaults, param);
        bounds = new OpenLayers.Bounds();
        bounds.extend(new OpenLayers.LonLat(coords.w, coords.s));
        bounds.extend(new OpenLayers.LonLat(coords.e, coords.n));
        bounds.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
        map = new OpenLayers.Map("map");
        if ((coords.s == coords.n) && (coords.w == coords.e)) {
            var marker = new OpenLayers.Layer.Markers("marker");
            var size = new OpenLayers.Size(21, 25);
            var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
            var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
            marker.addMarker(new OpenLayers.Marker(bounds.getCenterLonLat(), icon));
            map.addLayer(marker);
            // Note that if you pass an icon into the Marker constructor, it will
            // take that icon and use it. This means that you should not share icons
            // between markers -- you use them once, but you should clone() for any
            // additional markers using that same icon.
        } else {
            var boxes = new OpenLayers.Layer.Boxes("Boxes");
            var box = new OpenLayers.Marker.Box(bounds, "#008DCF", 4);
            boxes.addMarker(box);
            map.addLayer(boxes);
        }
        map.addLayer(mapnik);
        map.zoomToExtent(bounds);
    }