搭建简易Web GIS网站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3

时间 2019-11-16

标签搭建简易 web gis 网站使用 geoserver+postgresql+postgis+openlayers3 geoserver postgresql postgis openlayers 栏目 HTML 繁體版

原文原文链接

Web GIS系列：javascript

搭建简易Web GIS网站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3css

使用GeoServer+QGIS发布WMTS服务html

使用GeoServer+OpenLayers发布和调用WMTS、Vector Tile矢量切片服务前端

Leaflet入门：添加点线面并导入GeoJSON数据java

1 服务器搭建jquery

使用Tomcat须要先安装Java。从Oracle官方网站下载Java最新版本：git

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

安装完成Java后，须要配置环境变量。具体方法请自行百度。安装成功后能够下载服务器了。web

从Tomcat官方网站下载最新的版本，在Windows 10系统下解压缩便可使用：sql

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文件，在写前端时须要包含在网页中：

其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更新声明：用最新中文版软件替换原先英文版软件，插入一些新的图片，增长案例讲解，修改代码展现。

Web GIS系列：

1.搭建简易Web GIS网站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3

2.使用GeoServer+QGIS发布WMTS服务

3.使用GeoServer+OpenLayers发布和调用WMTS、Vector Tile矢量切片服务

4.Leaflet入门：添加点线面并导入GeoJSON数据