如何通過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繪製矩形？

回答

相關問題