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);
    }

在地图上绘制标记和方框是有效的，但是mapcenter，标记和框的定位存在问题，我想OpenLayers.Bounds - 对象似乎不能像预期的那样工作。

任何人都可以帮忙解决这个问题吗？

自从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);
    }

如何通过openlayers绘制矩形？

1 个答案: