要使用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.799 , 91085.208 ,
18221.799 , 91287.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 >
<! 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.799 , 91085.208 ,
18221.799 , 91287.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 >