心血来潮，花1小时安装软件写代码+复习api，顺便熟悉一波wms

再次强化认知了wms获取要素的能力没有wfs强，有待考究

原文链接（转载请声明@秋意正寒博客园/知乎/B站/****/小专栏）：https://www.cnblogs.com/onsummer/p/12178830.html

心血来潮，本机除了postgresql/postgis安装好了并发布了几个4326坐标的广东数据，安装了node环境之外，其他什么都没准备。

突然就想用ol6+node环境+parcel打包，通过geoserver发布postgis数据并实现前端返回单击点位的行政区信息。

分析一下需求：

需要安装geoserver→分解步骤，需要安装tomcat，需要启用跨域，需要安装geoserver的war包
需要熟悉ol6一些api
需要熟悉geoserver+wms服务的发布及相关概念

1. 安装tomcat

下载tomcat9_windows_64bit.gz，解压完事。配置新端口为8095，干掉webapps下不需要的app。

使用windows服务的方式启动tomcat。

2. 安装geoserver

下载2.16.x最新版war包，丢到webapps下，自动解压（请勿解压后删除war包!!!）

如果没启动起来，请稍等一会儿，或者手动重启tomcat服务。手动重启会在“stopping”那卡一会儿，等着就行了。

3. 启用跨域

在geoserver.war解压的app目录下，找到WEB-INF文件夹，找到web.xml，找到CORS的filter和filter-map标签，解注释它们：

OpenLayers 6 学习笔记2 WMS服务避坑记录、

OpenLayers 6 学习笔记2 WMS服务避坑记录

这两段配置如果是2.15以上的geoserver，在web.xml文档里默认是注释的。

在WEB-INF目录下的lib目录下，添加两个war包：

OpenLayers 6 学习笔记2 WMS服务避坑记录

这两个war包应该要与tomcat版本对应，具体我也不知道，我这两个和tomcat9是适配的。

此时重启一次tomcat服务即可（保险起见）。

4. openlayers 6 有关api

map和view对象必须熟悉。

本例中，wms服务用到的图层是ol/layer/Tile，用到的数据源是ol/layer/Image。

5. node环境+es6语法+parcel打包

OpenLayers 6 学习笔记2 WMS服务避坑记录

项目目录和包信息。

html代码（文件：index.html）：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>001 WMS</title>

     <link rel="stylesheet" href="./node_modules/ol/ol.css">

     <style>

         html, body, #mainframe {

             height: 100%;

         }

         #mapframe {

             width: 100%;

             height: 100%;

         }

     </style>

 </head>

 <body>

     <div id="mainframe">

         <div id="topframe"> <!-- 这个div暂时无用 -->

         </div>

         <div id="mapframe">

         </div>

     </div>

     <script src="./index.js"></script>

 </body>

 </html>

js代码（文件：index.js）：

 import 'normalize.css'

 import {Map, View} from 'ol'

 import TileLayer from 'ol/layer/Tile'

 import WMSSource from 'ol/source/ImageWMS'

 import WMSLayer from 'ol/layer/Image'

 import OSM from 'ol/source/OSM'

 var gzWms = new WMSSource({

     url: "http://localhost:8095/geoserver/c_GuangdongBase/wms", // 是工作区的URL+/wms

     params: {

         layers: "c_GuangdongBase:province_gd" // layers参数是"工作区:图层名1, 工作区:图层名2, ..."，而不是"数据源:图层名, ..."

     },

     serverType: "geoserver",

     crossOrigin: "anonymous"

 })

 var gzWmsLayer = new WMSLayer({

     source: gzWms,

     opacity: 0.5 // 设置透明度必须是0~1之间，我写50没有半透明效果

 })

 var gzView = new View({

     center: [113.23, 23.10],

     projection: "EPSG:4326", // Projection类的另一种写法：“ProjectionLike”字符串，EPSG必须大写，冒号后必须没有空格

     zoom: 10

 })

 var olmap = new Map({

     target: 'mapframe',

     layers: [

         new TileLayer({

             source: new OSM()

         }),

         gzWmsLayer

     ],

     view: gzView

 })

 olmap.on('click', function (evt) {

     console.log(evt.coordinate);

     let infoUrl = gzWms.getFeatureInfoUrl(evt.coordinate, gzView.getResolution(), "EPSG:4326", {

         INFO_FORMAT: 'text/html',

         QUERY_LAYERS: 'c_GuangdongBase:province_gd'

     })

     if (infoUrl) {

         fetch(infoUrl)

         .then(res=>res.text())

         .then(data=>console.log(data))

     }

 })