如何通过openlayers绘制矩形？

我想用一个矩形绘制一个矩形与4给定的参数（北，南，西，东）的地图。我已经处理了它与谷歌，地图要做到这一点，但我也wannt得到它与OpenStreetMap的工作（至极使用的OpenLayers-API）如何通过openlayers绘制矩形？

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

 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 -Object看起来不像预期那样工作。

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

sincerly S.Röher

来源

2014-02-12 Sebastian Röher

更新：我设法添加标记和框。但它没有将它们设置在正确的位置，它不会将地图移动到正确的孤立点。所以我想这肯定是我的边界=新的OpenLayers.Bounds（coords.w，coords.s，coords.e，coords.n）;' –

我解决了它。

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

来源

2014-02-14 09:32:21

如何通过openlayers绘制矩形？

回答

相关问题