使用geoserver的wms功能发布地图(多个图层)

使用geoserver的wms功能发布地图(多个图层)_第1张图片

图层组名称:layTest(可随便起)

topp:bou2和topp:bou2p为geoserver连接mysql数据库取出的地图数据(两个图层)

提交后就可在 Mapbuiler客户端查看地图

 

1、使用java代码调用使用wms发布的地图 (可选择图层)

     页面代码:

 

代码
<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.01 Transitional//EN " >
< html >
  
< head >
    
< title > 调用geoserver发布好的图层(可选择图层) </ 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 " >
        var map;     
        function init(){
            map 
=   new  OpenLayers.Map( ' map ' );
            var options 
=  {numZoomLevels:  3 };            
            var graphic 
=   new  OpenLayers.Layer.WMS( " 图层1 " ,
                
" http://localhost:8080/geoserver/wms "
                {layers: 
" topp:bou2 " }, options);
            var jpl_wms 
=   new  OpenLayers.Layer.WMS( " 图层2 " ,
                
" http://localhost:8080/geoserver/wms "
                {layers: 
" topp:bou2p " }, options);

            map.addLayers([graphic, jpl_wms]);
            map.addControl(
new  OpenLayers.Control.LayerSwitcher());
            map.zoomToMaxExtent(); 
        }
        
</ script >
  
</ head >
  
   
< body onload = " init() " >
          
< div id = " map " ></ div >
   
</ body >
</ html >


2、使用java代码调用使用wms发布的地图 (不选择图层) 

 

代码
<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.01 Transitional//EN " >
< html >
  
< head >
    
< title > 调用geoserver发布好的图层 </ 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 " >
        var map;     
        function init(){
            map 
=   new  OpenLayers.Map( ' map ' , options);
            var options 
=  {
                 controls: [
new  OpenLayers.Control.KeyboardDefaults()]
             };            
             var wms 
=   new  OpenLayers.Layer.WMS( " 图层 " ,
                
" http://localhost:8080/geoserver/wms "
                {layers: 
" layTest " },options);
             map.addLayer(wms);
             map.zoomToMaxExtent(); 
        }
        
</ script >
  
</ head >
  
  
< body onload = " init() " >
     
< div id = " map " ></ div >
  
</ body >
</ html >

以下是本人做的一个调用google 地图和 调用 geoserver使用wms发布的地图的例子

/Files/ycsfwhh/openLayerTest.rar  

你可能感兴趣的:(geoserver)