昨天完成了在页面上展现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的理解有限，实现方法可能不是最佳的，请谅解。