使用geoserver的wms功能发布地图（多个图层）

图层组名称：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  

转载于:https://www.cnblogs.com/ycsfwhh/archive/2009/12/16/1625680.html