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

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

1         服務器搭建javascript

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

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

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

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

http://tomcat.apache.org/jquery

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

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

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

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

接下來去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更新聲明:用最新中文版軟件替換原先英文版軟件,插入一些新的圖片,增長案例講解,修改代碼展現。

轉載請註明做者和出處——天靖居士:http://www.cnblogs.com/kkyyhh96/ 海闊憑魚躍,天高任鳥飛
好文要頂 關注我 收藏該文
3
0
 
« 上一篇: Ubuntu學習小結(二)PostgreSQL的使用,進程的查看關閉,編輯器之神Vim入門
» 下一篇: MATLAB數字圖像處理(一)基礎操做和傅立葉變換
posted @ 2017-02-08 18:55 天靖居士 閱讀(2568) 評論(6) 編輯 收藏
相關文章
相關標籤/搜索