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

传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ 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,用于向服务端发送请求。 

<!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 οnlοad="init()">
   <div id="map" class="smallmap"></div>
   <ul id="controlToggle">
     <li>
       <input type="radio" name="type" value="none" id="noneToggle" οnclick="toggleControl(this);" checked="checked" />
       <label for="noneToggle">Navigate</label>
     </li>
     <li>
       <input type="radio" name="type" value="point" id="pointToggle" οnclick="toggleControl(this);" />
       <label for="pointToggle">Draw Point</label>
     </li>
     <li>
       <input type="radio" name="type" value="line" id="lineToggle" οnclick="toggleControl(this);" />
       <label for="lineToggle">Draw Line</label>
     </li>
     <li>
       <input type="radio" name="type" value="polygon" id="polygonToggle" οnclick="toggleControl(this);" />
       <label for="polygonToggle">Draw Polygon</label>
     </li>
     <li>
       <input type="radio" name="type" value="box" id="boxToggle" οnclick="toggleControl(this);" />
       <label for="boxToggle">Draw Box</label>
     </li>
     <li>
       <input type="checkbox" name="allow-pan" value="allow-pan" id="allowPan" οnclick="allowPan(this);" checked=true />
       <label for="allowPan">Allow Pan While Drawing</label>
     </li>
   </ul>
  </body>
 </html>

2.2访问服务提供数据

        在浏览器地址栏输入 http://localhost:8080/webMapServer/wuda.html,出现如下页面,标示客户端已经能够成功访问服务端提供的服务数据。 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值