本章開始地圖的前端渲染。
因爲geoserver內部嵌的前端是openlayer，所以先講openlayer的使用。
但openlayer相對來說，還是要難一些，小衆一些，所以不想用openlayer的，可以看後面的leaflet專題，腳本庫不一樣，實現效果一樣。
本文主要看openlayer怎麼加載地圖。
一、js庫代碼下載
前端腳本庫可以用網絡資源，也可以下載下來，但openlayer官網不是很穩定，所以可以把examples、docs、sources都下載下來。
下載鏈接：https://openlayers.org/download/
openlayer的examples都是拿NodeJS構建的，想要本地看效果，還要部署環境，打包，有點麻煩。
爲了簡便，好理解，好學習，我們後續的前端頁面，都只有一個HTML文件，引入的js庫，只有ol.js和jquery.js，css文件只有ol.css。
Jquery下載：https://code.jquery.com/jquery/，版本很多，選一個常用的，點擊uncompressed，複製src裏的連接，https://code.jquery.com/jquery-1.7.2.js，把內容保存到本地。
二、加載瓦片地圖
文件結構如下圖，在html文件夾內，有ol文件夾，openlayer的js和css都放在這個文件夾下面，jquery放在html下，還有一個頁面LoadTileMap.HTML。
在LoadTileMap.HTML中，我們加載了騰訊底圖和geoserver發佈的gismap:v6_time_cnty_pts_utf_wgs84圖層。
源碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瓦片地圖展示</title>
<link rel="stylesheet" href="ol/ol.css">
<script src="ol/ol.js"></script>
<script src="jquery-1.7.2.js"></script>
<style type="text/css">
#map,
html,
body {
height: 100%;
width: 100%;
}
.content {
width: 100px;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
//頁面
var view = new ol.View({
// 設置中心點座標，因爲加載的騰訊瓦片地圖的座標系是墨卡託投影座標系（'EPSG:3857'），所以要對經緯度座標點進行投影，ol.proj.transform既是openlayer自帶的座標系轉換函數，支持WGS84和墨卡託投影的互換。
center: ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'),
// 比例尺級數爲9
zoom: 9
});
var layers = [
// 加載騰訊瓦片底圖
new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://rt{0-3}.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0"
})
}),
// 加載geoserver發佈的WTMS底圖，其實數據源是4326座標系的，但是geoserver會適配前端的座標系。
new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:8080/geoserver/gismap/wms?',//這個可以打開geoserver的preview，看openlayer頁面截取url
// 請求參數
params: {
'SERVICE': 'WMS',
'VERSION': '1.1.0',
'REQUEST': 'GetMap',
'FORMAT': 'image/png',
'TRANSPARENT': true,
'tiled': true,
'LAYERS': 'gismap:v6_time_cnty_pts_utf_wgs84',//圖層，前面是工作空間，後面是圖層名，
'exceptions': 'application/vnd.ogc.se_inimage',
'singleTile': true//單瓦片，渲染成一張圖片
}
}),
}),
];
//地圖
var map = new ol.Map({
target: 'map',//指向div
layers: layers,
view: view
});
</script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#map {
width: 100%;
height: 100%;
}
</style>
</html>
效果如下：
三、單瓦片格式
在geoserver中發佈一個帶註記的面圖層，將HTML中的加載瓦片地圖的參數修改一下。
修改：
'LAYERS': 'gismap:v6_time_pref_pgn_utf_wgs84'
刪掉：
'singleTile': true
效果如下：
可以看出地圖內容返回的是一整張圖片，而不是一個個小的方塊。
在openlayer早期版本中，還需要設置'singleTile': true才能返回一整張圖片，否則返回的是一個個小瓦片，就像騰訊底圖的瓦片一樣。因爲整張圖是由小瓦片拼接起來的，所以會有註記冗餘的情況。
Openlayer修復了這個問題，註記冗餘的問題，我們以後可以在leaflet中看。
加載地圖和wms圖層結束，接下來，我們看怎麼渲染並查詢矢量要素。