WEBGIS：空间数据库创建、数据发布与 WMS 服务调用

二、将 PostGIS 数据库中的数据发布成标准地图服务

1. 需要安装的软件或者应用有：

1.1 先安装 Java 的运行环境（安装可以存放到 D 盘），安装结束后可以配置运行路径，然后打开 cmd（win + r）输入：java -version 1.2 然后安装 Tomcat 服务器，该安装路径要与 Java 的安装路径是一致的，安装过程中需要注意的是有一个安装用户和密码的设置，后续使用 Tomcat 登录服务器访问 GeoServer 服务然后登陆使用的账号就是这个。

访问 localhost:8080 端口查看是否可以成功访问。

1.3 安装 GeoServer：将【geoserver.war】压缩包文件裁剪然后粘贴到 (./Tomcat7.0/webapps) 的目录下就可以了，粘贴后会自动出现一个 geoserver 文件夹（或者可以手动解压到该文件夹目录下）。至于该安装包的下载可以直接访问 GeoServer 官网 https://geoserver.org/download/

以上是我下载的相应软件的版本安装包和压缩包。

2. 安装所需的软件之后我们可以基于以下两个步骤来访问到 GeoServer 网站

2.1 步骤一：访问 Tomcat 软件的端口 localhost:8080，然后在该网页点击【Manage App】输入账号和密码（这里的信息就是安装 Tomcat 是设置的账号和密码，一般为 admin 和 123456），进去管理员的界面，我们要点击启动 GeoServer，启动服务。

2.2 步骤二：直接输入网址：http://localhost:8080/geoserver/web/ 就可以跳转到 GeoServer 网址（当然这两种方法都是在已经启动 Tomcat 服务器的前提下），进入网址之后也要登录用户（这里登录的与 Tomcat 那里登录的用户和密码是一样的）。

添加新的数据存储：点击【数据存储】，然后点击【添加新的数据存储】，在对话框里面选择要导入的数据类型的数据库，我们导入的是矢量数据，所以将里面的数据库数据添加到新的数据工作区，这里选择 PostGIS 来导入矢量数据。接下来还要设置几个参数：

GeoServer 创建新的工作区：点击左边菜单栏的【工作区】，然后点击【添加新的工作区】，给新建的工作命名，命名空间也是随便（有一定格式），除此之外还要选择服务（这里选择 WMS 和 WFS 服务，WFS 服务开启方便后续进行数据动态更新和修改与序列化），最后可以点击【提交】。

4.1 工作区：选择刚刚新建的工作区 4.2 数据源名称：这里是自己新命名一个新的名称（建议英文） 4.3 database：选择要导入的数据库（本次在 PostgreSQL 15 新建的数据库名称） 4.4 user：数据库的拥有者，一般为 postgres 4.5 passwd：数据库的密码（就是在 pgAdmin 那里新建的数据库的密码 123456）

5. 出现问题：通过导入数据库的形式来发布数据库的空间数据但是没有自动跳转到发布的界面，这时候你需要确定新建的工作区是否选择服务，确定选择服务了之后就点击左边菜单栏的【服务】里面的【WMS】，然后再此界面选择新建的工作区，就可以发布连接的数据库里面的数据表作为新图层了。

数据预览：点击左边菜单栏的【layer view】，然后找到自己的工作区，点击添加的图层名称就可以预览数据啦。

如果没有发布选项，我们可以点击左边菜单栏下的【数据】目录下的【图层】选项，然后再点击【添加新的资源】，再选择新建的工作区导入的数据库作为新的图层，就可以看到成功导入的 PostGIS 数据库下面的数据表，然后依次点击发布即可（发布里面的设置按照上面的示例）。

设置好之后就可以点击【保存】，然后点击【发布】，点击发布还会进入到设置阶段，在这里需要设置边框数据（一般是自动计算出来），计算出来之后就可以点击保存了。

三、使用 OpenLayers 调用 WMS 服务加载发布地图

1. 具体实现效果：可以使用 OpenLayers 地图框架在浏览器应用上面调用 GeoServer 发布的地图服务。
2. 打开 GeoServer 管理客户端：localhost:8080/geoserver/web，点击图层栏然后先选择要导入的图层（这些图层都是已经提前发布好的了）。
3. 调用 WMS 数据源的语法结构：

// WMS 图层 - ImageLayer 类型 (先增加数据源然后增加数据图层)
const WMSsource = new ImageWMS({
  url: 'http://localhost:8080/geoserver/WEBsevse/wms',
  params: {
    'LAYERS': 'WEBsevse:bou2_4p',
    'VERSION': '1.1.0',
    'FORMAT': 'image/png',
    'TRANSPARENT': true,
    'SRS': 'EPSG:4326',
    'STYLE': ''
  },
  serverType: 'geoserver',
  crossOrigin: 'anonymous',
  ratio: 1
});
const WMSLayer = new ImageLayer({
  source: WMSsource,
  opacity: 0.7,
  visible: true
});

4. crossOrigin 是跨域配置：anonymous 表示任何人都可以访问。

自有数据加载成功界面：

点击【切换为城市矢量地图】按钮切换图层。

如果出现报错：由于跨域问题（本地浏览器与服务器端口不一致）无法加载数据，我们可以采用以下解决方案 (可以选择添加服务，如果源文件有对应的代码，只是被注释掉了，我们取消注释即可，该文件位于 tomcat/conf/web.xml)。

说明：如果源 web.xml 文件里面没有对应的跨域服务，我们可以自己添加对应的代码，但是一定要好好检查，一般是有的，只是被注释掉了。

params 里面的参数设置是数据源信息的设置，没有规律可言，要在 GeoServer 数据查询的网页那里查看：

注意参数设置：第一个参数是 url，GeoServer 地图服务的地址，这个地址可以直接在 GeoServer 里面的数据浏览那里的网页复制，或者可以在该浏览器页面然后点击【检查】来实现请求来查看 url 码：

方法一：直接复制浏览器界面的头顶位置上面的网址，里面有 url 需要的信息。

方法二：