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

標籤：rom   axis   pts   end   layer   github   gif   名稱   sql資料庫   

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                 //自己的服務url12                 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: false36             }).extend([37                 new ol.control.ScaleLine()38             ]),39             //設定顯示的容器40             target: ‘map‘,41             //設定圖層42             layers: [43                 //添加圖層44                 ImageMap45             ],46             //設定視圖47             view: new ol.View({48                 //設定投影49                 projection: projection50             })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網站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3