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的理解有限，实现方法可能不是最佳的，请谅解。
转载自：https://blog.csdn.net/lovinghong/article/details/84177236
