OpenLayers实现根据经纬度范围在地图上定位并画出区域

昨天完成了在页面上展现WMS服务地图。
之后的业务是在地图上定位数据的显示区域。用于定位的元数据在新建时会初始化一个经纬度范围，定位的原理是根据这个经纬度范围确定在地图上显示的范围，并将区域用一个矩形框起来。
由于是头一次做地图定位，走了很多的冤枉路。下面把过程记录下来，和大家一起分享。

尝试1：在得到经纬度（四个点，分别是东经，西经，南纬，北纬），根据上述的经纬度取区域中心点的经纬度，然后根据这个中心点的经纬度定位。这期间遇到的问题是显示地图和定位按钮不在同一个frame中，导致了，定位按钮所触发的js函数始终得不到地图的属性。之后改了按钮js函数的调用路径才得以解决。一个很奇葩的路径：

 

window.parent.frames['right'].Location()

 

下面是尝试1的代码片段：

 

 

if(marker != null){

map.display(false); //隐藏上一次的标记

}

//冲map页面获取map的属性值

var lon = (parseFloat(west) + parseFloat(east))/2;

var lat = (parseFloat(south) + parseFloat(north))/2;

var lonlat = new OpenLayers.LonLat(lon,lat);  //得到区域中心点的范围

//alert(lonlat);

map.zoomTo(3);

map.panTo(lonlat);

//定一个Mark层

var markers = new OpenLayers.Layer.Markers( "Markers" );

        map.addLayer(markers);

    var size = new OpenLayers.Size(22,34);

    var offset = new OpenLayers.Pixel(-(size.w), -size.h);

    var icon = new OpenLayers.Icon('../images/hover.png',size,offset);

    markers.addMarker(new OpenLayers.Marker(lonlat,icon));

 

上面的代码片段采用的是Markers来标记一个点，和定位区域在理解上有所出入，所以果断把代码注释掉，改用box来做区域标记。下面是代码片段：

 

 

var lon = (parseFloat(west) + parseFloat(east))/2;

var lat = (parseFloat(south) + parseFloat(north))/2;

var lonlat = new OpenLayers.LonLat(lon,lat);  //得到区域中心点的范围

//定义一个box层

    var boxes  = new OpenLayers.Layer.Boxes( "Boxes" );

    if(this.box != null){

    this.box.display(false); //清除上一次的区域标记

    }

    //定义一个Bounds

    bounds = new OpenLayers.Bounds(); 

    //有参数生成两个经纬度

    var lonlat1 = new OpenLayers.LonLat(parseFloat(west),parseFloat(south));

    var lonlat2 = new OpenLayers.LonLat(parseFloat(east),parseFloat(north));

    bounds.extend(lonlat1);

    bounds.extend(lonlat2);//生成一个经纬度范围的bounds

 

    box = new OpenLayers.Marker.Box(bounds);

    box.events.register("click", box, function (e) {

                      this.setBorder("blue");

                    });//注册box的点击事件

    boxes.addMarker(box);

    map.addLayer(boxes);

    map.zoomTo(3); //以第3级方式显示地图

map.panTo(lonlat); //平移到范围的中心点

 

上面就是一个使用OpenLayers实现在地图上以一个区域定位的例子。鉴于个人对OpenLayers的理解有限，实现方法可能不是最佳的，请谅解。