搭建WebGis使用到的軟件有：Java、Tomcat、GeoServer、PostgreSQL、PostGIS、OpenLayers3; 下面將一步步操作。
一、搭建服務器，使用軟件：Java、Tomcat、GeoServer
1、安裝並配置Java
a. 下載Java1.8 ：
根據系統架構下載對應版本，32位選擇“Windows x86”，64為選擇“Windows x64” URL: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
我的系統是64位，所以下載的文件是 jdk-8u161-windows-x64.exe
b. 安裝java：
默認安裝路徑為 C:\Program Files\Java\jdk1.8.0_131\，建議在windows下選擇一個目錄：比如 D:\java\jdk1.8.0_161\
安裝路徑可以根據自己選擇，路徑中建議不要存在漢字，或者特殊字符串，JDK 和JRE建議安裝在同一個路徑下。
c.配置環境變量：
新建用戶變量： 變量名："JAVA_HOME"，變量值："D:\Java\jdk1.8.0_161"
新增系統變量：變量名："CLASSPATH"，變量值：".;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar"
修改系統變量：變量名："Path"，在變量值中增加"D:\Java\jdk1.8.0_161\bin;D:\Java\jre1.8.0_161;"，第一個"D:"前如果沒有分號";",請補上。
d. 檢驗安裝java是否成功：
在"cmd"中運行"javac"或"java -version"，出現下圖表示Java安裝配置成功！
2、下載GeoServer
到http://geoserver.org/download/下載最新的released版本的war包
3、安裝Tomcat然后部署GeoServer
從Tomcat官方網站下載最新的版本：https://tomcat.apache.org/download-90.cgi 建議直接下載zip包，下載后直接解壓即可使用。
a. 配置管理角色及用戶：
編輯"conf\tomcat-users.xml"文件，將最后的信息改為以下文字：
然后，就可以在Tomcat中使用賬號"admin",密碼："tomcat"登錄管理了。
b. 部署Geoserver的war包：
因為war文件超過了taomcat文件附件大小限制，所以需要修改配置tomcat的配置文件："webapps\manager\WEB-INF\web.xml"
原來限制是50M大小，現在把前面50改為100。
在瀏覽器地址欄輸入：http://localhost:8080
點擊"Manager App"，在登錄用戶名中輸入“admin”，密碼輸入"tomcat"進入管理界面。
在Deploy界面，"WAR file to deplay"操作，選擇下載解壓后的war文件：geoserver.war，點擊"Deploy"完成部署。
部署后，Application列表界面中出現："/geoserver"，點擊該鏈接可進入部署好的Geoserver站點(或者地址欄直接輸入：http://localhost:8080/geoserver/web/ 進入)。
GeoServer默認登錄名：admin，密碼"geoserver"。
4、 地理信息數據導入及發布
a. 安裝PostgreSQL以及PostGis擴展工具
下載PostgreSQL：
https://www.postgresql.org/里面的版本在windows環境下安裝多次都沒能成功，找了很多地方才找到正確的地址，請從這個URL下載：https://www.enterprisedb.com/products-services-training/pgbindownload
安裝PostgreSQL，安裝完成后，提示下載擴展工具。
建議不要勾選，下載太慢了！直接從http://postgis.net/windows_downloads/下載PostGIS工具，我這里下載的PostgreSQL是9.6版本的，那么對應的PostGis也要對應到版本
下載到的文件為：postgis-bundle-pg96x64-setup-2.4.3-1.exe，安裝即可，注意選擇："Create spatial database"。
安裝完畢后，使用pgAdmin管理工具，進行管理。
b. 導入地理信息數據(shp文件)到PostgreSQL數據庫：
新建數據庫，連接服務器，然后按下圖操作：(我這有永康的行政區划數據，就用這個數據做例子吧)
建立完成數據庫后，右鍵該數據庫，打開Query Tool
使用SQL語句添加空間數據庫管理插件PostGIS：
CREATE EXTENSION PostGIS
SQL執行成功后，刷新，數據表中會出現spatial_ref_sys，說明可以導入空間數據了(如下圖)
開始菜單中打開PostGIS工具，如下圖
連接PostgreSQL數據庫
點擊"Add File"選擇shp文件：
點擊"Import"導入數據到數據庫。
出現"Shapefile import completed."，導入完畢！
c. 使用GeoServer發布數據庫中的地圖：
打開瀏覽器，登錄GeoServer管理界面，點擊左側欄目中的"工作區"，在新界面中點擊"添加新的工作區"
設置工作區名稱，以及命名空間(URL)，然后點擊"提交"完成新建。
接下來新建數據存儲：
選擇"PostGIS"
設置數據源名稱，PostgreSQL連接信息等。此處設置數據源名稱為"xzq"，連接本機數據庫，連接參數如下圖
點擊"保存"，保存成功后會出現新建圖層界面：
點擊"發布"，出現"編輯圖層"界面，在該界面中配置坐標系： 
點擊"從數據計算"獲得數據的邊界，點擊"Compute from native bounds"獲得數據的經緯度邊框，其他配置可按默認的來，保存即可。
查看發布的圖層效果，點擊左側的"Layer Preview"，搜索剛剛添加的圖層
找到圖層后點擊"openlayers"，打開預覽窗口，效果如下：
預覽的地址為：http://localhost:8080/geoserver/yongkang2018/wms?service=WMS&version=1.1.0&request=GetMap&layers=yongkang2018:xzq&styles=&bbox=488895.09375,3182568.5,533833.5,3221317.75&width=768&height=662&srs=EPSG:2385&format=application/openlayers
注：后面加載地圖時用到。
二、使用openlayers瀏覽地圖
從openlayers官網下載最新版的openlayers： https://openlayers.org/download/，選擇v*-dist.zip下載。
使用openlayers的js以及css制作一個demo網頁，腳本如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>OpenLayers演示</title> <!-- Import OL CSS, auto import does not work with our minified OL.js build --> <link rel="stylesheet" href="./lib/openlayers/ol.css" /> <!-- Import OpenLayers, reduced, wms read only version --> <script src="./lib/openlayers/ol.js" ></script> </head> <body> <div id="map"></div> <script> //Geoserver圖層預覽地址: http://localhost:8080/geoserver/yongkang2018/wms?service=WMS&version=1.1.0&request=GetMap&layers=yongkang2018:xzq&styles=&bbox=488895.09375,3182568.5,533833.5,3221317.75&width=768&height=662&srs=EPSG:2385&format=application/openlayers var format = 'image/png'; var bounds = [488895.09375,3182568.5,533833.5,3221317.75];//范圍,從Geoserver預覽地址中bbox參數獲得 //底圖（面） var yongkang = new ol.layer.Image({ source: new ol.source.ImageWMS({ ratio: 1, //自己的服務url url: 'http://localhost:8080/geoserver/yongkang2018/wms', //從Geoserver預覽地址獲得 //設置服務參數 params: { 'FORMAT': format, 'VERSION': '1.1.0', STYLES: '', //圖層信息 LAYERS: 'yongkang2018:xzq', } }) }); //設置地圖投影 var projection = new ol.proj.Projection({ code: 'EPSG:2385',//投影編碼,設置圖層時所找到的編碼 units: 'm' }); //設置地圖 var map = new ol.Map({ //地圖中的比例尺等控制要素 controls: ol.control.defaults({ attribution: false }).extend([ new ol.control.ScaleLine() ]), //設置顯示的容器 target: 'map', //設置圖層 layers: [ //添加圖層 yongkang ], //設置視圖 view: new ol.View({ //設置投影 projection: projection }) }); //地圖顯示 map.getView().fit(bounds, map.getSize()); </script> </body> </html>
保存頁面后，預覽效果如下：
本地地理信息數據結合天地圖在線影像地圖的效果：
