搭建簡易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數據