使用geoserver+openLayers加载google地图
1、 准备工作
安装java环境即JDK
下载geoserver 官网：http://geoserver.org/display/GEOS/Welcome
我的描述使用的是geoserver1.7版本，2.0版本类似，只是1.7是中文的，2.0版本可以再使用过1.7版本后自己摸索，大同小异。
下载openLayers 官网：http://www.openlayers.org/
配置好JAVA_HOME
下载地图（shp格式） 可到此网站：http://nfgis.nsdi.gov.cn/asp/userinfo.asp?action=queding
填写信息后即可下载
2、 启动geoserver（安装目录bin\start.bat）
打开浏览器，访问：http://localhost/:8080/geoserver/
3、 登录geoserver
点“配置”，在登录界面输入用户名 ‘admin’，密码’geoserver’
4、 配置数据
登录成功之后，再点“配置”。在配置界面，点“数据”。
在数据配置界面，点“数据库”。
5、 新建数据集
在Feature数据集配置界面，点“新建”
在新建界面，Feature 数据描述类型，选择Shaperfile，Feature数据集ID，输入“szmap_bingguanjiudian”，点“新建”(此时，由于地图信息还没部署，因此，先将shape格式的数据文件复制到C:\geoserver\data_dir\data\szmapnew。)
在数据文件配置界面中，url填写为：file:data/szmapnew/bingguanjiudian_custom_point.shp
(表示对应C:\geoserver\data_dir\data\szmapnew\bingguanjiudian_custom_point.shp)
Charset填写为：GBK，点“提交”。
6、 新建Feature Type
文件加载成功，进入Feature Type编辑界面，样式选择 point,SRS填写为4326,点生成.
再点“提交”。(千万不要勾上启用缓存，我就是勾上它，结果导致创建的FeaTure Type无法保存，走了弯路)
7、 应用保存配置
然后先点左上角的“应用”，
再点“保存”。
8、 使用openLayers编写测试页面
< html >
< head >
< title > OpenLayers map preview title >
< style type = " text/css " >
#map {
width: 800px;
height: 380px;
border: 1px solid black;
}
style >
< script src = " http://localhost:8080/geoserver/openlayers/OpenLayers.js "
type = " text/javascript " >
script >
< script type = " text/javascript " >
function setHTML(response)
{
OpenLayers.Util.getElement( ' nodelist ' ).innerHTML = response.responseText;
};
function init()
{
var map = new OpenLayers.Map( " map " ,{controls:[], ' projection ' : ' EPSG:4326 ' , ' units ' : ' degrees ' });
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5 ;
var bounds = new OpenLayers.Bounds( 114.08473735 , 22.5444392 , 114.09911765000001 , 22.5517168 );
tiled = new OpenLayers.Layer.WMS( " topp:danwei_font_point " , " http://localhost:8080/geoserver/wms " ,
{height: ' 380 ' ,width: ' 800 ' ,layers: ' topp:danwei_font_point ' ,styles: '' ,srs: ' EPSG:4326 ' ,format: ' image/png ' , tiled: ' true ' , tilesOrigin : " 114.08473735,22.5444392 " },
{maxExtent: bounds, maxResolution: 5.617304687505209E-5 , projection: " EPSG:4326 " , buffer: 0 });
map.addLayer(tiled);
jiaotonggandao_region = new OpenLayers.Layer.WMS( " topp:jiaotonggandao_region " , " http://localhost:8080/geoserver/wms " ,
{height: ' 392 ' ,width: ' 800 ' ,layers: ' topp:jiaotonggandao_region ' ,styles: '' ,srs: ' EPSG:4326 ' , transparent: " true " ,format: ' image/png ' , tiled: ' true ' , tilesOrigin : " 114.0836293,22.543578500000002 " },
{maxExtent: bounds, maxResolution: 6.49429687499814E-5 , projection: " EPSG:4326 " , buffer: 0 });
map.addLayer(jiaotonggandao_region);
daoluzhongxinxian_polyline = new OpenLayers.Layer.WMS( " topp:daoluzhongxinxian_polyline " , " http://localhost:8080/geoserver/wms " ,
{height: ' 392 ' ,width: ' 800 ' ,layers: ' topp:daoluzhongxinxian_polyline ' ,styles: '' ,srs: ' EPSG:4326 ' , transparent: " true " ,format: ' image/png ' , tiled: ' true ' , tilesOrigin : " 114.0836293,22.543578500000002 " },
{maxExtent: bounds, maxResolution: 6.49429687499814E-5 , projection: " EPSG:4326 " , buffer: 0 ,isBaseLayer: false });
map.addLayer(daoluzhongxinxian_polyline);
shangsha_font_point = new OpenLayers.Layer.WMS( " topp:shangsha_font_point " , " http://localhost:8080/geoserver/wms " ,
{width: ' 800 ' ,layers: ' topp:shangsha_font_point ' ,styles: '' ,srs: ' EPSG:4326 ' ,height: ' 381 ' ,format: ' image/png ' , transparent: " true " ,tiled: ' true ' , tilesOrigin : " 114.0838415,22.543650900000003 " },
{maxExtent: bounds, maxResolution: 6.20898437499462E-5 , projection: " EPSG:4326 " , buffer: 0 ,isBaseLayer: false });
map.addLayer(shangsha_font_point);
untiled = new OpenLayers.Layer.WMS.Untiled( " topp:danwei_font_point " , " http://localhost:8080/geoserver/wms " ,
{height: ' 380 ' ,width: ' 800 ' ,layers: ' topp:danwei_font_point ' ,styles: '' ,srs: ' EPSG:4326 ' ,format: ' image/png ' },
{maxExtent: bounds, maxResolution: 5.617304687505209E-5 , projection: " EPSG:4326 " });
untiled.ratio = 1 ;
untiled.setVisibility( false , false );
map.addControl( new OpenLayers.Control.PanZoomBar({div:$( ' nav ' )}));
map.addControl( new OpenLayers.Control.MouseDefaults());
map.addControl( new OpenLayers.Control.Scale($( ' scale ' )));
map.addControl( new OpenLayers.Control.MousePosition({element: $( ' position ' )}));
map.addControl( new OpenLayers.Control.LayerSwitcher());
map.addControl( new OpenLayers.Control.OverviewMap());
map.zoomToExtent(bounds);
map.events.register( ' click ' , map,
function (e)
{
OpenLayers.Util.getElement( ' nodelist ' ).innerHTML = " Loading… please wait... " + map.layers[ 0 ].name;
var url = map.layers[ 0 ].getFullRequestString({
REQUEST: " GetFeatureInfo " ,
EXCEPTIONS: " application/vnd.ogc.se_xml " ,
BBOX: map.getExtent().toBBOX(),
X: e.xy.x,
Y: e.xy.y,
INFO_FORMAT: ' text/html ' ,
QUERY_LAYERS: map.layers[ 0 ]. params .LAYERS,
FEATURE_COUNT: 50 ,
layers: ' topp:danwei_font_point ' ,
styles: '' ,srs: ' EPSG:4326 ' ,WIDTH: map.size.w,HEIGHT: map.size.h},
" http://localhost:8080/geoserver/wms " );
OpenLayers.loadURL(url, '' , this , setHTML, setHTML);
Event.stop(e);
});
}
script >
head >
< body onload = " init() " >
< table >
< tr >
< td style = " width: 40px " valign = " middle " rowspan = " 3 " >
< div id = " nav " > div >
td >
< td colspan = " 3 " align = " right " >
< a id = " untiledLink " href = " # "
onclick = " map.removeLayer(tiled);map.addLayer(untiled); " > Untiled a >
< a id = " tiledLink " href = " # "
onclick = " map.removeLayer(untiled);map.addLayer(tiled); " > Tiled a >
td >
tr >
< tr >
< td colspan = " 3 " >
< div id = " map " > div >
td >
tr >
< tr >
< td >
< div id = " scale " > div >
td >
< td align = " right " >
< div id = " position " > div >
td >
tr >
table >
< div id = " nodelist " >
Click on the map to get feature
div >
body >
html >
9、 部署示例
将该页面保存到C:\geoserver\webapps\geoserver\5.htm
10、查看效果
访问 http://localhost/:8080/geoserver/5.htm 拖动图层，并可点击数据
11、加上googlemap图层
申请Google 地图 API 的key
http://www.google.com/intl/zh-CN/apis/maps/signup.html
申请的url填写为： http://www.618119.com/:8080/
12、 将域名映射到本地
编辑hosts文件（C:\WINDOWS\system32\drivers\etc目录下） 将localhost改为：www.618119.com，也就是将www.618119.com映射为127.0.0.1.否则在本地加载不了google map.
13、 编辑html
添加加载google map的javascript代码
script >
在init方法里加上
var googlesatellite = new OpenLayers.Layer.Google( " Google Satellite " , {type:G_SATELLITE_MAP, ' maxZoomLevel ' : 18 } );
map.addLayers([googlesatellite]);
var googlebybrid = new OpenLayers.Layer.Google( " Google Hybrid " , {type:G_HYBRID_MAP});
map.addLayers([googlebybrid]);
var GMapsStreets = new OpenLayers.Layer.Google( " Google Streets " , {type:G_NORMAL_MAP, ' maxZoomLevel ' : 18 } );
map.addLayers([GMapsStreets]);
14、查看效果
访问 http://localhost/:8080/geoserver/5.htm
15、选择地图右边的上+号，选择Base Layer下的Google Streets
到此，基本的用openLayers+geoserver访问地图的功能就实现了