OpenLayers是一個js庫，用於顯示各個地圖服務所提供的資料，例如ArcGIS，GeoServer等。這裡結合GeoServer使用來顯示地圖。

1. 從官網下載OpenLayers庫。解壓後放入web工程下。

2. 將js與css檔案匯入到頁面中。這裡版本為v5.0。

<link rel="stylesheet" href="v5.2.0-dist/ol.css">
<script src="v5.2.0-dist/ol.js"></script>

3. 定義一個<div>元素作為地圖容器，將其id定義為map：

<div id="map"></div>
 

4. 將GeoServer中的地圖顯示出來：

<script>
	var map = new ol.Map({
		target: 'map',
		view: new ol.View({
			center: ol.proj.fromLonLat([-73.9929199, 40.7243642]),
			zoom: 12
		})
	});

	var baseSource = new ol.source.TileWMS({
		url: 'http://192.168.15.98:8082/geoserver/wms',
		params: {
			'LAYERS': 'tiger-ny',
			'TILED': true
		},
		serverType: 'geoserver'
	});

	var baseLayer = new ol.layer.Tile({
		source: baseSource
	});
	
	map.addLayer(baseLayer);
</script>
 

其中：

• 必須有map物件，這是主體。
• map物件的target屬性值為容器的id。
• view屬性為顯示地圖的視窗，其中center定義了地圖的中心點（經緯度），zoom定義了地圖的放大級別。
• map必須有地圖層layer。新增到map中的第一個layer為底圖，永遠位於最下方且無法被隱藏；其他的layer為常規地圖layer，可以更換順序，也可以隱藏。最終的地圖展示效果就是多個layer疊加的結果。
• layer有各種型別。每個layer建立時必須提供source。source指明瞭地圖服務相關屬性。

5. GeoServer服務

GeoServer提供了地圖服務。

進入GeoServer的控制檯，點選左側的Layer Preview：

右側會列出所有圖層。

點選目標圖層的OpenLayers，會跳轉到新頁面並顯示預覽。複製該頁面的URL，其格式為：

http://192.168.15.98:8082/geoserver/wms?service=WMS&version=1.1.0&request=GetMap&layers=tiger-ny&styles=&bbox=-74.047185,40.679648,-73.907005,40.882078&width=531&height=768&srs=EPSG:4326&format=application/openlayers

其中兩個紅色部分為最主要的屬性：

• http://192.168.15.98:8082/geoserver/wms：地圖服務地址，需要賦值給OpenLayers中layer的source。
• layers=tiger-ny：圖層名，需要賦值給layer的source的params. LAYERS屬性。

6. 執行