GeoServer釋出地圖服務並在OpenLayers中顯示：shp的WMS服務和GeoTIFF的WTMS服務
GeoServer釋出的地圖服務結構如下：
- 必須建立一個工作區，該工作區下可以存放多組無關資料。也就是說，工作區的作用就類似於一個資料夾，僅僅用於分類。
- 在工作區下新增資料儲存。資料儲存即一組相關資料。通常，一個地區的地圖可能是單個檔案構成，也可能是多個檔案構成，但這都算是一組相關資料，即一個數據儲存。一個工作區下可以新增多個數據儲存。
- 每個資料儲存下往往有一個或多個圖層。例如山東地圖，這個資料儲存是多個shp構成，匯入後，每個shp都是一個圖層，每個圖層都可單獨進行釋出。只有被髮布的圖層才能在資料的Layer Preview下進行檢視。
所以，釋出地圖的過程為：建立工作區→新增資料儲存→釋出圖層。
注意由於圖層只能一個一個釋出，無法一次性發布多個，所以當需要釋出一個新的圖層時，可以選擇圖層→新增新的資源：
然後選擇已有的資料儲存，就可以檢視圖層列表了：
建立資料來源時，有3個選擇：
- 向量資料來源：儲存基礎形狀資料，放縮不產生失真。
- 柵格資料來源：儲存柵格化圖片資料，放縮會失真。
- 其他資料來源
因此，對於路徑類的資料，往往都是向量資料；對於瓦片類的資料，往往都是柵格資料。
釋出WMS服務：向量資料shp
向量資料中，使用較多的是shapefiles，也就是：
上面的Directory of spatial files（shapefiles）用於選擇有多個.shp檔案的資料夾。
下面的Shapefile用於選擇單個.shp檔案。
然後在圖層列表中進行釋出。
通常，座標參考系會自動填入：
若沒有自動填入，則可以手動選擇一個。
注意邊框和經緯度邊框需要點選一下計算：
計算後會填入具體的座標值。
然後釋出即可。
釋出後，點選資料→Layer Preview，在右側找到目標圖層，點OpenLayers，即可彈出新頁面檢視。
釋出WMTS服務：柵格資料GeoTIFF
柵格資料中，使用較多的是GeoTIFF：
GeoTIFF是一種地圖源資料，地圖每一級都由1個.tif和1個.tfw構成：
選擇新增GeoTIFF，然後選擇工作區，自定義資料來源名稱，選擇URL。URL即具體的.tif檔案：
每次只能選擇一個tif，所以對於多級地圖，需要多次重複新增柵格資料來源，將每一個tif都新增進來。
儲存後，會跳轉到新建圖層頁面，剛才新增的tif已經新增到了圖層列表中。
點擊發布：
跳轉到釋出頁面。其邊框座標會自動計算，不用點選。
點選Tile Caching選項卡：
修改最下方的zoom levels：
這裡定義為4/17，是因為地圖最低等級為4級，最高等級為17級。將Published zoom levels和Cached zoom levels修改為一致即可。
儲存。
這樣，就將第4級地圖的tif釋出為圖層了。重複上述步驟，將其他各級地圖的tif也加入資料來源併發布為圖層。
然後對這些地圖源資料進行切圖，將各級地圖切為瓦片：
點選左側的Tile Caching下的Tile Layers：
找到剛才釋出的圖層，點右側的Seed/truncate：
注意其中的Zoom start和Zoom stop，將其都設為與當前地圖等級相同即可(4級地圖都設為04,5級地圖都設為05,6級地圖都設為06……)。
然後點Submit，會跳轉到提交頁面，GeoServer就會生成切圖。
切圖的生成路徑為：
GeoServer安裝目錄/data_dir/gwc/工作區_圖層名
其他地圖等級的圖層也按照相同方式切片。
然後將其他地圖的切片資料夾複製到第4級的切片資料夾下：
然後就可檢視地圖了：
選擇一種圖片格式，會開啟一個預覽頁面（後面要用到）：
然後可以用滑鼠中鍵進行放縮。
第一次由於要生成更多的快取細節，會稍微慢一點。
於是切片服務WMTS就釋出完成了。
在OpenLayers中載入WMTS地圖服務
要在OpenLayers中載入，則首先檢視頁面右側的服務能力，點選WTMS下的1.0.0：
會彈出一個視窗，顯示XML檔案內容：
其中，有多個<ows>標籤的href屬性都標明瞭WMTS的服務地址。記下這個服務地址，後面要用到。
然後回到前面開啟的預覽頁面，在頁面上點右鍵：
選檢查，會彈出開發者工具。檢視左側Elements標籤下的內容，開啟<head>標籤下的最後一個<script>標籤：
該<script>就是GeoServer生成的地圖Demo頁面主要內容。
在內容上點左鍵會全部選中，然後在程式碼上點右鍵，在彈出選單中選擇Copy→Copy outerHTML，會將內容全部複製。
然後將這些js內容貼上到一個文字文件中，後面要用到。
新建一個頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="v5.2.0-dist/ol.css">
<script src="v5.2.0-dist/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script></script>
</body>
</html>在該空白頁面中做了幾個工作：
- 引入OpenLayers庫。這裡引入的是本地庫檔案，根據自己的實際情況修改。
- 添加了一個<div>，其id為map。
- 添加了一個空白<script>。
注意作為地圖容器的<div>沒有設定大小，這樣預設會平鋪。可以為其設定width和height樣式來控制<div>的大小。
將前面文字文件中儲存的js程式碼貼上到<script>標籤中。
js程式碼較長，其結構大致如下：
<script>
function init() {
// 顯示座標
function ScaleControl(opt_options) {
...
};
ol.inherits(ScaleControl, ol.control.Control);
ScaleControl.prototype.setMap = function(map) {
...
}
// 顯示座標結束
// 基本屬性
var gridsetName = 'EPSG:4326';
var gridNames = ['EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15'];
var baseUrl = '../service/wmts';
var style = '';
var format = 'image/png';
var infoFormat = 'text/html';
var layerName = 'shandong:L04';
var projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation: 'neu'
});
var resolutions = [0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5];
baseParams = ['VERSION', 'LAYER', 'STYLE', 'TILEMATRIX', 'TILEMATRIXSET', 'SERVICE', 'FORMAT'];
params = {
...
};
// 構建layer的source
function constructSource() {
...
}
// 構建layer
var layer = new ol.layer.Tile({
source: constructSource()
});
// 構建view
var view = new ol.View({
...
});
// 構建map
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}).extend([
new ol.control.MousePosition(),
new ScaleControl()
]),
layers: [layer],
target: 'map',
view: view
});
map.getView().fit([112.49999999999864, 21.943045533437925, 134.99999999999838, 40.97989806961972], map.getSize());
// 設定左上角STYLE
window.setParam = function(name, value) {
...
}
// 設定左上角STYLE結束
// 單擊地圖事件
map.on('singleclick', function(evt) {
...
});
// 單擊地圖事件結束
}
</script>
刪掉上面藍色的程式碼部分：
- 刪掉顯示座標。
- 刪掉new ol.Map的controls屬性。
- 刪掉設定左上角STYLE。
- 刪掉單擊地圖事件。
使用前面記下的服務地址替換baseUrl：
整個<script>只定義了一個init()函式，但並沒有呼叫。在<script>最後新增：
init();
儲存，在瀏覽器中開啟頁面即可看到地圖。