搭建簡易Web GIS網站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3

Web GIS系列：

搭建簡易Web GIS網站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3

使用GeoServer+QGIS發佈WMTS服務

使用GeoServer+OpenLayers發佈和調用WMTS、Vector Tile矢量切片服務

Leaflet入門：添加點線面並導入GeoJSON數據

 

1         服務器搭建

使用Tomcat須要先安裝Java。從Oracle官方網站下載Java最新版本：

http://www.oracle.com/technetwork/java/javase/downloads/index.html

安裝完成Java後，須要配置環境變量。具體方法請自行百度。安裝成功後能夠下載服務器了。

從Tomcat官方網站下載最新的版本，在Windows 10系統下解壓縮便可使用：

http://tomcat.apache.org/

在bin目錄下打開startup.bat，略等片刻，在瀏覽器中輸入localhost:8080，出現Tomcat網頁，說明配置成功:

接下來須要在conf目錄下打開tomcat-users.xml文件，將最後的信息改成如下文字：

這樣，設定登錄Tomcat的賬號爲：admin，密碼爲：tomcat。
以後須要將webapps目錄下，manager目錄下，WEB-INF文件夾中web.xml打開，找到<max-file-size>一項，將其中的數值第一位由5改成8，即82428800，同理將<max-request-size>改成上值。以下圖：

這是由於GeoServer大於了50M，超過了默認的限制。

接下來去GeoServer官方網站下載最新的版本：

http://blog.geoserver.org/

下載war文件。在下載後的壓縮包中能夠看到geoserver.war文件，這個就是GeoServer的服務器文件了。將這個文件複製到webapps目錄下。

接下來，重啓Apache-Tomcat服務器，在瀏覽器中輸入localhost:8080，點擊首頁上方的Manager App，輸入賬號：admin和密碼：tomcat便可登陸應用管理器:

 

在網頁下方找到WAR file to deploy，選擇geoserver.war文件，上傳，稍等片刻，等待上傳成功便可。此時刷新網頁，上方會出現geoserver應用，點擊能夠進入GeoServer的首頁。

這時能夠設置GeoServer的管理員賬號。賬號admin，密碼geoserver。當出現下圖時，說明服務器配置成功。

該圖即爲GeoServer在服務器上的首頁。能夠在本頁進行數據的鏈接和發佈。

2         地理信息數據導入及發佈

在本段中，筆者將使用中國2014GDP數據做爲例子，進行數據的發佈。

對於地理信息數據的導入，須要使用到空間數據庫。在本文中，筆者使用的是PostgreSQL+PostGIS完成這一任務。接下來，將詳細介紹如何導入數據。

首先去PostgreSQL官方網站下載最新版的軟件，推薦9.5及之前的版本：

https://www.postgresql.org/

安裝的時候須要注意記住數據庫訪問的賬號和密碼，爲了方便，都可以設置爲postgres做爲測試。設置端口爲默認值5432.

在安裝完成後，能夠繼續安裝PostgreSQL的插件管理軟件，其中能夠選擇PostGIS進行安裝，也能夠前往PostGIS的官方網站進行下載：

http://www.postgis.org/

在安裝的過程當中，注意勾選安裝空間數據庫。須要登陸PostgreSQL數據庫時，使用先前設定的賬號密碼便可。

安裝結束後，打開pgAdmin管理工具，能夠對PostgreSQL進行管理。

首先是鏈接PostgreSQL，接下來能夠經過右鍵（點擊數據庫）或者使用SQL語句，根據須要，新建一個數據庫。

創建完成數據庫後，點擊該數據庫下的架構->public->數據表，使用SQL語句添加空間數據庫管理插件PostGIS:

CREATE EXTENSION PostGIS

成功後，刷新，數據表中會出現spatial_ref_sys，說明能夠導入空間數據了。

點擊pgAdmin上方的插件，選擇PostGIS插件，能夠導入shp文件。選擇Add File，經過路徑選擇shp文件，再點擊import，便可導入文件。

此時數據已經導入了空間數據庫，能夠進行數據發佈的操做了。

打開瀏覽器，進入GeoServer首頁，點擊左側的工做區（Workspaces），再點擊添加新的工做區（Add new workspaces）能夠建立工做空間。工做空間的做用是在於將不一樣數據來源的數據保存在一塊兒。在設置URI時，須設置爲http://localhost:8080/CHINA，CHINA表明的是工做空間的名字，這樣全部與之相關的網頁均在這個URI以後。

接下來點擊數據存儲（Stores），再點擊添加新的數據存儲（Add new store），能夠添加一個新的數據源。從圖中咱們能夠看出，GeoServer支持多種數據類型。在這裏咱們以PostGIS爲例進行服務的發佈。

點擊PostGIS選項，進入數據源信息的頁面。先點擊工做區（Workspace）下拉選項，能夠選擇具體的工做空間，例如本文中選擇CHINA。

接下來輸入數據源名稱，這是標識不一樣數據的依據，例如本文中輸入GDP。

在鏈接參數中，輸入host，若爲本機則爲localhost，端口5432，再輸入數據源在PostgreSQL中的數據庫名稱，以後輸入鏈接PostgreSQL的賬號和密碼便可完成數據庫的鏈接。

在最下面點擊保存便可。

接下來就要發佈具體的圖層了。點擊圖層（Layers），便可進入圖層選擇界面；再點擊添加一個新圖層（Add a new resource），便可發佈具體的圖層。點擊後，先選擇具體的數據源，會出現該數據源下的各類表，選擇須要發佈爲圖層的數據表，點擊發布（publish），便可進行發佈。

能夠根據須要輸入圖層名稱，也能夠直接使用默認的圖層名稱。須要注意的是地圖投影的定義：

在這裏能夠輸入地圖投影。若是原圖沒有投影，將不會進行顯示，在這裏能夠點擊Find，輸入投影的代碼（如WGS84爲4326）進行查找。接下來在下方的範圍中，點擊從數據中計算（Compute from data），便可算出範圍。

其餘的文本框能夠不填。保存以後即爲圖層的發佈。

爲了查看發佈後的效果，能夠點擊左側的Layer Preview，找到剛剛發佈的內容。GeoServer提供了多種數據格式能夠調用。點擊OpenLayers能夠直接看到使用OpenLayers調用的圖層。

在下拉選框中還能夠選擇WMS和WFS服務等。這些也就構成了服務器端的數據。

3      使用OpenLayers做爲前端

筆者使用OpenLayers進行前端的編寫。目前最新的版本是OpenLayers3，能夠前往GitHub下載代碼：

https://github.com/openlayers/openlayers

其中包含了css文件和js文件，在寫前端時須要包含在網頁中：

<link rel="stylesheet" type="text/css" href="CSS/ol.css" />

<script type="text/javascript" src="Scripts/ol.js"></script>

其API文檔在官方網站上有：

http://openlayers.org/en/latest/apidoc/

也能夠參考官方給出的案例進行學習：

http://openlayers.org/en/latest/examples/

此外，爲了完成可以完成先後端的交互，還應下載jQuery。

http://jquery.com/download/

以後也應將其添加在網頁中。

OpenLayers的核心部件爲Map (ol.map)，至關於地圖的容器。整個地圖的數據就是經過該部件進行顯示。

Map中包含了Layer圖層控件和View視圖控件，分別是對於圖層數據的操控和對於用戶視圖的操控。Layer (ol.layer)控制數據的可視化顯示，支持Tile (瓦片地圖)、Image (影像數據)、Vector (矢量數據)的顯示；而View (ol.view)控制地圖的中心點、放大、投影等設置。

添加一個地圖並進行顯示的js代碼以下：

 1 <div id="map">
 2     <script>
 3         var format = 'image/png';
 4         var bounds = [73.441277, 18.159829,
 5             135.08693, 53.561771];//範圍
 6 
 7         //中國各省底圖（面）
 8         var ImageMap = new ol.layer.Image({
 9             source: new ol.source.ImageWMS({
10                 ratio: 1,
11                 //本身的服務url
12                 url: 'http://localhost:8080/geoserver/CHINA/wms',
13                 //設置服務參數
14                 params: {
15                     'FORMAT': format,
16                     'VERSION': '1.1.0',
17                     STYLES: '',
18                     //圖層信息
19                     LAYERS: 'CHINA:china_2014gdp',
20                 }
21             })
22         });
23 
24         //設置地圖投影
25         var projection = new ol.proj.Projection({
26             code: 'EPSG:4326',//投影編碼
27             units: 'degrees',
28             axisOrientation: 'neu'
29         });
30 
31         //設置地圖
32         var map = new ol.Map({
33             //地圖中的比例尺等控制要素
34             controls: ol.control.defaults({
35                 attribution: false
36             }).extend([
37                 new ol.control.ScaleLine()
38             ]),
39             //設置顯示的容器
40             target: 'map',
41             //設置圖層
42             layers: [
43                 //添加圖層
44                 ImageMap
45             ],
46             //設置視圖
47             view: new ol.View({
48                 //設置投影
49                 projection: projection
50             })
51         });
52 
53         //地圖顯示
54         map.getView().fit(bounds, map.getSize());
55     </script>
56 </div>

首先須要定義一個圖層，而這個圖層調用的是由GeoServer發佈的WMS服務，其數據源是服務的url，能夠經過進入服務器，找到相應服務，點擊相應的WMS服務獲取其url。

接下來須要設置顯示的格式，這裏設置了地圖投影爲WGS84，即代號4326.

以後建立了地圖容器map，將圖層添加進去，並設置了投影。

接下來分別設置了地圖初始的顯示範圍，最後調用getView().fit函數，顯示地圖。

效果圖：

 

具體代碼和數據能夠參考github：https://github.com/kkyyhh96/WebGIS

 

2017.2.24更新聲明：用最新中文版軟件替換原先英文版軟件，插入一些新的圖片，增長案例講解，修改代碼展現。

Web GIS系列：

1.搭建簡易Web GIS網站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3

2.使用GeoServer+QGIS發佈WMTS服務

3.使用GeoServer+OpenLayers發佈和調用WMTS、Vector Tile矢量切片服務

4.Leaflet入門：添加點線面並導入GeoJSON數據