如何通过 openlayers 绘制矩形？答案

【问题标题】：How can I draw a rectangle via openlayers?如何通过 openlayers 绘制矩形？
【发布时间】：2014-02-12 11:11:29
【问题描述】：

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

【问题讨论】：

更新：我设法添加了标记和框。但它没有将它们设置到正确的位置，也没有将地图移动到正确的 lonlat 点。所以我想这一定是我的bounds = new OpenLayers.Bounds(coords.w, coords.s, coords.e, coords.n);有问题

标签： javascript jquery openlayers

【解决方案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);
    }

【讨论】：