OpenLayers是一个开源的js框架,用于在您的浏览器中实现地图浏览的效果和基本的zoom,pan等功能。OpenLayers支持的地图来源 包括了WMS,GoogleMap,KaMap,MSVirtualEarth等等,您也可以用简单的图片作为源,在这一方面OPenLayers提供了 非常多的选择。 
      要使用OpenLayers,您可以到它的官方网站http://www.openlayers.org下载他的压缩 包,解压后可以看到其中的一些目录和 文件。拷贝dist目录下的OpenLayer.js、根目录下的lib目录、根目录下的img目录到你网站的scripts目录下(当然,这个只是例 子,您网站的目录结构您自己说得算,只要保证OpenLayers.js,/lib,/img在同一目录中即可)。 
      OpenLayers中最重要的2个对象Map和Layer.
      OpenLayers.Map的实体化方法:
         var map = new OpenLayers.Map("map");
         这里参数"map"对应页面中显示Map地图的DIV的id名称。
     OpenLayers.Layer为创建图层对象,OpenLayers提供了很多图层的扩展:
         * OpenLayers.Layer.Image 
         * OpenLayers.Layer.HTTPRequest 
         * OpenLayers.Layer.Grid 
         * OpenLayers.Layer.WMS 
         * OpenLayers.Layer.KaMap 
         * OpenLayers.Layer.EventPane 
         * OpenLayers.Layer.Google 
         * OpenLayers.Layer.VirtualEarth 
         * OpenLayers.Layer.Markers 
         * OpenLayers.Layer.Text 
         * OpenLayers.Layer.GeoRSS 
         * OpenLayers.Layer.Boxes 
         * OpenLayers.Layer.TMS

         Image类封装一个实际图象作为图曾内容 
         HTTPRequest类可以接收一个动态生成的图片,你可以通过HTTPRequest类的参数向 服务器发送参数 
         Grid类是HTTPRequest类的子类,提供更加详细的方法 
         WMS类用于连接WMS服务器以获得图象 
         KaMap 类用于连接MapServer 
         EventPane类作为用于接收用户操作的图层 
         Google类用于从Google获得图象,它仍然需 要你从Google获得API KEY,并且include 
         VirtualEarth类用于操作VirtualEarth的图层 
         Markers 类用于生成接收和显示用户本地标记的图层 
         Text类用于接收CSV文件 
         GeoRSS类是Marker类的子类,用于封装接收 GeoRSS并在图层中作出marker 
         Boxes同样也是Marker类的子类,可以用div来做marker,而非image 
         TMS 用于接收TMS服务器的地图

     OpenLayers还提供了丰富的Control类为地图浏览添加一些工具,继承自OpenLayers.Control类 

         * OpenLayers.Control.LayerSwitcher 
         * OpenLayers.Control.MouseDefaults 
         * OpenLayers.Control.MousePosition 
         * OpenLayers.Control.MouseToolbar 
         * OpenLayers.Control.OverviewMap 
         * OpenLayers.Control.PanZoom 
         * OpenLayers.Control.PanZoomBar 
         * OpenLayers.Control.Permalink 
         * OpenLayers.Control.Scale 

     这些类的实例会在地图浏览的“窗口”上增加一些工具栏或是“按钮”,增加互动性和功 能性。 

         OpenLayers对常用的数据结构进行了封装 
         # OpenLayers.LonLat 
         # OpenLayers.Size 
         # OpenLayers.Pixel 
         # OpenLayers.Bounds以便于操作。

     现在写个最简单的例子做记录:
      
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  
<head>
    
<title>WMS MAP INIT</title>
    
<script src="http://localhost:8080/geoserver/openlayers/OpenLayers.js" type="text/javascript"></script>
    
<style type="text/css">
        #map 
{
            width
: 100%;
            height
: 100%;
            border
: 1px solid black;
        
}
    
</style>
    
<script defer="defer" type="text/javascript">
        
function init(){
            
//数据存储的左、下、右、上的范围,默认为NULL
            var bounds = new OpenLayers.Bounds(
                
17831.79991085.208,
                
18221.79991287.26
            );
            
//创建一个OpenLayers.Map构造新的地图。
            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 
1.5234375,
                projection: 
"EPSG:4326",
                units: 'degrees'
            };
            
var map = new OpenLayers.Map('map', options);
            
//创建一个图层信息
            var layer = new OpenLayers.Layer.WMS("State""http://127.0.0.1:8080/geoserver/wms", {
                        layers: 
"dwg:0_line"
                    });
//
            //将创建的图层对象添加到Map对象
            map.addLayer(layer);
            
//显示地图
            map.zoomToMaxExtent();
        }
    
</script>
  
</head>
  
  
<body onload="init()">
    
<div id="map"></div>
  
</body>
</html>