使用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&v=2&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访问地图的功能就实现了  

你可能感兴趣的:(使用geoserver+openLayers加载google地图)