使用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编写测试页面

　　

<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.01 Transitional//EN " >
< 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 charset = " utf-8 "  src = " http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAB6A1_oyBce6PP1YjsfO0_hQNFBmrp5F93wWCsYm0Hw_cwNHkjhT-j-A3DS2sOTKDXHL3iAgKKdglFQ "  type = " text/javascript " >
</ script >  

　　在init方法里加上

　　

// 加载google地图
            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访问地图的功能就实现了