基于PostgreSQL+Geoserver+OpenLayers的Webgis台风路径地图服务发布

一、实现效果

路径对比图（来源：浙江水利厅http://typhoon.zjwater.gov.cn/default.aspx###）：

二、环境要求

1. PostgreSQL

安装了PostgreSQL之后还需要安装对应版本的空间数据存储拓展（Postgis）才能支撑空间数据的管理，安装的流程不再赘述，网上教程大都可行。

2.GeoServer

GeoServer是OpenGIS Web服务器规范的J2EE实现的社区开源项目，利用GeoServer可以方便的发布地图数据，允许用户对特征数据进行更新、删除、插入操作。获得GeoServer服务的最直接的方法在其官网http://geoserver.org/下载zip压缩包，解压后双击bin目录下的startup.bat文件就可以启动（前提需要安装了JDK）。

看到如下图的命令行说明GeoServer启动成功

启动成功后在浏览器输入http://localhost:8080/geoserver/web/即可进入GeoServer地图服务管理界面，点击右上角的登录（默认用户名是admin，密码是geoserver）

3.OpenLayers

OpenLayers使用的是5版本，可以去官网https://openlayers.org/下载压缩包或者直接使用cdn都可以。

4.Qgis

Qgis是跨平台开源的桌面地理信息系统，可以说是目前比较优秀的开源GIS软件，功能强大，基本能够满足要求，使用Qgis的主要原因是利于对底图进行标注，这在第三部分会提到。

三、数据准备

数据准备可以分为两个部分，一个是底图数据，另一个是台风路径数据，底图数据主要包括世界地图、中国行政区划图、九段线、南海诸岛，台风数据主要包括各个时刻台风的经纬度、风力、风速等信息。

1.底图数据发布

底图数据使用的是全国大学生GIS技能大赛试题（台风路径分析）提供的数据，包含了世界地图、中国行政区划、九段线、南海诸岛，这些数据进行了一些处理，原始数据可以在网上下载，处理后的数据上传在csdn底图数据直接下载，可以直接下载。

Geoserver图层发布

数据处理完成后即可使用Gesosever进行地图服务的发布，Geoserver如何发布地图服务可以参考这两位兄弟的教程
geoserver地图发布服务教程（5）—发布postgis数据

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

将所有的底图图层都发布之后，可以在图层中看到添加的底图

点击【Layer Preview】可以对发布的图层进行多种预览（OpenLayers、GML、KML等）

Geoserver图层符号化

和实现效果相比较，明显不是我们需要的效果，这就是之前提到的使用Qgis进行地图标注的原因。
Geoserver图层风格支持ZIP和SLD两种格式，推荐使用SLD，更加方便快捷，SLD是风格化图层描述器（Styled Layer Descriptor）的简称，Geoserver支持手写SLD也支持使用工具生成（Qgis就可以做到）。

打开安装好的Qgis（安装教程可以参考这位老哥的Qgis安装教程）将文件加载到Qgis中，右键图层选择【属性】，对【符号化】和【标注】进行设置。

达到想要的效果后，在符号化的左下角点击【样式】下拉框，选择【保存样式】，将其保存为SLD格式

回到geoserver，点击【Styles】->【Add a new Styles】，设置Name、工作区、风格文件格式、图层的类型后选择对应的SLD文件选择上传，进行Validate后没问题选择保存。
注意要素在Qgis中和在PostgreSQL中的属性大小写是否匹配的问题，SLD中必须和PostgreSQL中匹配。

Style没问题后，点击【图层】，单击【Title】下的对应图层，切换到【发布】，将Styles与图层进行关联，选择自定义的符号化样式。
保存后再次预览，已经进行了符号化，其余图层同上。

Geoserver图层组发布

发布图层后只能预览单个图层，而底图是所有图层叠加显示，可以同时调用多个图层进行图层的叠加，更好的办法是使用geoserver的图层组，对多个图层进行叠加组合后以单个服务的形式发布。

单击【图层组】->【添加新的图层组】，对Name、工作区、坐标参考系（ESPG4326）进行设置

然后就可以进行图层的添加，单击【添加图层】，会列出【图层】中可以添加的图层，
分别进行添加，对图层的先后顺序进行设置后就可以保存

在Layer Preview中多了一个图层组，选择open layers预览，达到了我们的预期

台风数据

台风数据使用数据库管理软件直接导入数据库中

2.前端渲染

在html中引入OpenLayers依赖后就可以直接调用WMS服务加载底图并渲染台风路径

OpenLayers调用Geoserver WMS服务

    var map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          //调用geoserver
          source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/typhoon/wms',
            params: { 'LAYERS': 'typhoon:base_map', 'TILED': true },
            serverType: 'geoserver',
            crossOrigin: 'anonymous',
            transition: 0,
          })
        })
      ],
      target: 'map',
      view: new ol.View({
        projection: 'EPSG:4326',
        center: [120, 33],
        zoom: 4.5,
      }),
      controls: [new ol.control.MousePosition()]
    });

OpenLayers台风路径可视化

台风数据存储在PostgreSQL中，所以还需要从数据库中读取，所以需要一个简单的后端去请求数据库，使用了Ajax异步请求得到数据后再进行渲染。

    // 添加一个绘制的线使用的layer
    var drawLayer = new ol.layer.Vector({
      //layer所对应的source
      source: new ol.source.Vector(),

    })
    //把layer加入到地图中
    map.addLayer(drawLayer);

    $.ajax({
      type: "get",
      dataType: "json",
      url: "http://localhost:8081/api/typhoon/find_typhoon?name=莫兰蒂",
      contentType: "application/json; charset=utf-8",
      success: function (result) {

        for (var i = 0; i < result.data.length; i++) {
          addPoint(result.data[i].lng, result.data[i].lat);
        }
      },
      error: function () {
        console.log("请求失败")
      }
    })
    function addPoint(lng, lat) {
      //创建一个点
      var point = new ol.Feature({
        geometry: new ol.geom.Point([lng, lat]),
      })
      drawLayer.getSource().addFeatures([point])
    }