遵循Java EE标准规范的开源GIS服务平台之三：数据发布与访问

最新推荐文章于 2024-09-13 09:50:09 发布

yanjun880416

最新推荐文章于 2024-09-13 09:50:09 发布

阅读量354

点赞数

出处http://blog.csdn.net/leverage_1229

在GIS服务平台构建完毕之后，我们就要着手在此平台上提供服务以供客户端请求访问。

1数据发布

1.1添加源数据

打开Tomcat服务器安装目录的\geoserver\data\data子目录，在该目录下新建名为usr的文件夹，将一张.TIFF图像（栅格数据）存放到这里。

1.2登录GeoServer

访问 http://localhost:8080/geoserver/web/ 页面，输入admin和geoserver后，点击“登录”按钮。

1.3设置工作区

点击左边Data栏的Workspaces选项，设置自己的工作区间。并填写区间名称和命名空间URL，点击“提交”按钮。

进入刚创建好的工作区间，开启该区间的WMS服务功能。点击“保存”按钮。

1.4设置数据源

点击左边Data栏的Stores选项，设置自己的数据源。我们的源数据是TIF格式的，所以选择数据源时注意对应数据类型。

添加数据源，工作区间选择刚刚创建好的sample，并填写数据源名称。最后选择连接参数（这里要关联到第一步存放的TIF文件），找到该文件后，点击“保存”按钮。

1.5设置图层

点击左边Data栏的Layers选项，添加图层的来源选择前面几步设置好的sample:university。

点击“Publish”链接来到如下页面，为当前图层配置资源和发布信息。填写“Declared SRS”和“Lat/Lon Bounding Box”两项后，点击“保存”按钮。

1.6预览图层

点击左边Data栏的Layer Preview，找到前面设置好的图层：sample:wuhanuniversity。

点击该图层的“OpenLayers”链接，出现如下界面，标示数据已经发布成功。

2数据访问

GeoServer已经成功发布了数据，也就是说GIS服务平台已经提供了WMS服务，接下来客户端浏览器就要请求该服务。

2.1构建html静态网页

使用OpenLayers类库结合动态网页技术构建wuda.html，用于向服务端发送请求。

[html]view plaincopyprint? 
    
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  <html>  
   <head>  
    <title> WuHan University : WMS </title>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <link rel="stylesheet" href="./script/OpenLayers/theme/default/style.css" type="text/css" />  
    <link rel="stylesheet" href="./script/OpenLayers/style.css" type="text/css">  
    <script type="text/javascript" src="./script/OpenLayers/OpenLayers.js"></script>  
    <script type="text/javascript">  
   
      var map, drawControls;  
      var bounds = new OpenLayers.Bounds(114.34795499999998, 30.524327, 114.36603512820511, 30.536327);  
        
      function init() {  
        map = new OpenLayers.Map({  
          div: 'map',  
          maxExtent: bounds,  
          projection: "EPSG:4326",  
          units: 'degrees'  
        });  
   
        var wmsLayer = new OpenLayers.Layer.WMS(  
          "University WMS",   
          "http://127.0.0.1:8080/geoserver/sample/wms?", {  
             layers: "sample:wuhanuniversity",   
             format: "image/png",  
             singleTile: true  
          }  
        );  
          
        var pointLayer = new OpenLayers.Layer.Vector("Point Layer");  
        var lineLayer = new OpenLayers.Layer.Vector("Line Layer");  
        var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");  
        var boxLayer = new OpenLayers.Layer.Vector("Box Layer");   
            
        map.addLayers([wmsLayer, pointLayer, lineLayer, polygonLayer, boxLayer]);  
          
        map.addControl(new OpenLayers.Control.PanZoomBar());  
        map.addControl(new OpenLayers.Control.LayerSwitcher());  
        /*map.addControl(new OpenLayers.Control.ScaleLine());  
        map.addControl(new OpenLayers.Control.Permalink('permalink'));*/  
        map.addControl(new OpenLayers.Control.MousePosition());  
        /*map.addControl(new OpenLayers.Control.OverviewMap());  
        map.addControl(new OpenLayers.Control.KeyboardDefaults());*/  
          
        drawControls = {  
          point : new OpenLayers.Control.DrawFeature(pointLayer, OpenLayers.Handler.Point),  
          line : new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path),  
          polygon : new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Polygon),  
          box : new OpenLayers.Control.DrawFeature(boxLayer,   
            OpenLayers.Handler.RegularPolygon, {  
              handlerOptions: {  
                sides: 4,  
                irregular: true  
              }  
            }  
          )  
        };  
          
        for(var key in drawControls) {  
          map.addControl(drawControls[key]);  
        }  
          
        map.zoomToExtent(bounds);  
          
        document.getElementById('noneToggle').checked = true;  
      }  
        
      function toggleControl(element) {  
        for(key in drawControls) {  
          var control = drawControls[key];  
          if(element.value == key && element.checked) {  
            control.activate();  
          } else {  
            control.deactivate();  
          }  
        }  
      }  
        
      function allowPan(element) {  
        var stop = !element.checked;  
        for(var key in drawControls) {  
          drawControls[key].handler.stopDown = stop;  
          drawControls[key].handler.stopUp = stop;  
        }  
      }  
    </script>  
   </head>  
   <body onload="init()">  
    <div id="map" class="smallmap"></div>  
    <ul id="controlToggle">  
      <li>  
        <input type="radio" name="type" value="none" id="noneToggle" onclick="toggleControl(this);" checked="checked" />  
        <label for="noneToggle">Navigate</label>  
      </li>  
      <li>  
        <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />  
        <label for="pointToggle">Draw Point</label>  
      </li>  
      <li>  
        <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />  
        <label for="lineToggle">Draw Line</label>  
      </li>  
      <li>  
        <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />  
        <label for="polygonToggle">Draw Polygon</label>  
      </li>  
      <li>  
        <input type="radio" name="type" value="box" id="boxToggle" onclick="toggleControl(this);" />  
        <label for="boxToggle">Draw Box</label>  
      </li>  
      <li>  
        <input type="checkbox" name="allow-pan" value="allow-pan" id="allowPan" onclick="allowPan(this);" checked=true />  
        <label for="allowPan">Allow Pan While Drawing</label>  
      </li>  
    </ul>  
   </body>  
  </html>  