OpenLayers：调用GeoServer发布的WMS服务

OpenLayers：调用GeoServer发布的WMS服务

前言

本文记录如何通过WMS服务加载发布于GeoServer上的图层，所以环境的搭建就不再赘述，没有安装GeoServer的可以移步GeoServer的安装与初步使用

正文

安装好geoserver，进入首页，点击登录后可以进入如下页面：

通过以上方式可以打开如下页面：通过这个url我们可以看到很多有用的信息，发起的请求为wms请求（service=WMS），version=1.1.0表明使用的是1.1.0版本的wms请求，request=GetMap可以看出使用的是wms服务的GetMap方法，请求的图层是 topp:states…… 这个url可以获取到很多有用的信息

接下来，就可以准备通过WMS服务加载这个图层了，具体的代码实现如下：

/** 加载发布在geoserver上面的地图 */
loadGeoserverMap() {
    const geoserverLayer = new TileLayer({
        source: new TileWMS({
            url: 'http://localhost:8080/geoserver/topp/wms', // 请求地址
            params: { // 请求的参数设置，其余参数可以不设置，使用默认的参数
                LAYERS: 'topp:states', // 请求的图层名
                VERSION: '1.1.0', // wms请求的版本，也可用1.3.0
            }
        })
    });
    this.map.addLayer(geoserverLayer); // 加载图层到地图上
},

全部代码如下：（需搭建vue环境以及下载ol的依赖包）

<template>
  <div class="map-box" id="mapBox"></div>
</template>
<script>
import Map from 'ol/Map';
import View from 'ol/View';
import { Tile as TileLayer } from 'ol/layer';
import { defaults as defaultControl } from 'ol/control'
import XYZ from 'ol/source/XYZ';
import TileWMS from 'ol/source/TileWMS';
export default {
  data() {
    return {
      map: null,
    }
  },
  mounted() {
    this.initMap(); // 初始化地图
  },
  methods: {
    /** 初始化地图 */
    initMap() {
      this.map = new Map({
        controls: new defaultControl({ // 地图控件
          zoom: false, // 清除放大缩小控件
          rotate: false, // 清除旋转地图控件
        }),
        view: new View({
          center: [-99.58, 39.46], // 地图初始化后的中心点
          projection: 'EPSG:4326', // 默认是EPSG:3857
          zoom: 5,
        }),
        layers: [
          new TileLayer({
            source: new XYZ({
              url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', // 高德地图
            }),
          }),
        ],
        target: 'mapBox',
      });
      this.loadGeoserverMap(); // 加载发布在geoserver上面的地图
    },
    /** 加载发布在geoserver上面的地图 */
    loadGeoserverMap() {
      const geoserverLayer = new TileLayer({
        source: new TileWMS({
          url: 'http://localhost:8080/geoserver/topp/wms', // 请求地址
          params: { // 请求的参数设置，其余参数可以不设置，使用默认的参数
            LAYERS: 'topp:states', // 请求的图层名
            VERSION: '1.1.0', // wms请求的版本，也可用1.3.0
          }
        })
      });
      this.map.addLayer(geoserverLayer); // 加载图层到地图上
    },
  },
}
</script>
<style lang="less" scoped>
.map-box {
  width: 100%;
  height: 100%;
}
</style>

最终呈现效果如下：