javascript - 如何通过 openlayers 绘制矩形？

Question

我正在尝试使用 javascript 在具有 4 个给定参数(北、南、西、东)的 map 上绘制一个矩形。我已经设法用谷歌地图做到这一点，但我也想让它与 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);
    }

在 map 上绘制标记和方框可以，但是 map 中心、标记和方框的定位存在问题，我猜 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);
    }