搭建簡易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程式碼如下：

<div id="map">
    <script>
        var format = 'image/png';
        var bounds = [73.441277, 18.159829,
            135.08693, 53.561771];//範圍

        //中國各省底圖（面）
        var ImageMap = new ol.layer.Image({
            source: new ol.source.ImageWMS({
                ratio: 1,
                //自己的服務url
                url: 'http://localhost:8080/geoserver/CHINA/wms',
                //設定服務引數
                params: {
                    'FORMAT': format,
                    'VERSION': '1.1.0',
                    STYLES: '',
                    //圖層資訊
                    LAYERS: 'CHINA:china_2014gdp',
                }
            })
        });

        //設定地圖投影
        var projection = new ol.proj.Projection({
            code: 'EPSG:4326',//投影編碼
            units: 'degrees',
            axisOrientation: 'neu'
        });

        //設定地圖
        var map = new ol.Map({
            //地圖中的比例尺等控制要素
            controls: ol.control.defaults({
                attribution: false
            }).extend([
                new ol.control.ScaleLine()
            ]),
            //設定顯示的容器
            target: 'map',
            //設定圖層
            layers: [
                //新增圖層
                ImageMap
            ],
            //設定檢視
            view: new ol.View({
                //設定投影
                projection: projection
            })
        });

        //地圖顯示
        map.getView().fit(bounds, map.getSize());
    </script>
</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資料