傳送門 ☞ 輪子的專欄 ☞ 轉載請註明 ☞ 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 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>