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

版权声明：本文为ycsfwhh原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/ycsfwhh/archive/2009/12/16/1625680.html