Vue.js+OpenLayers 2、添加 GeoServer

一、查看 GeoServer 发布的 wms 服务

二、添加地图配置

我的项目中用的是 GeoServer 发布的天津东丽区的 wms 服务，添加地图配置，方便管理。

mapCongif.js

export default {
  map: {
    geoserver: 'http://******/geoserver/DLQ/wms',
    view: {
      projection: "EPSG:4326",
      center: [117.36599976909781, 39.1470299097626],
      zoom: 12,
      extent: [
        117.09722430138682,
        38.988772821718655,
        117.72502101428843,
        39.30561397526118
      ]
    },
    layers: [{
        name: '电子地图',
        // layerName: 'DLQ:DLQDZDT',
        url: '',
        visible: true,
        zIndex: 0,
        type: ''
      },
      {
        name: '影像地图',
        // layerName: 'DLQ:DLQDOM',
        url: '',
        visible: true,
        zIndex: 1,
        type: ''
      },
      {
        name: '社区',
        layerName: 'DLQ:DLQYYCOMMUNITY',
        url: '',
        visible: false,
        zIndex: 2
      },
      {
        name: '网格',
        layerName: 'DLQ:DLQYYGRID',
        url: '',
        visible: true,
        zIndex: 3
      },
      {
        name: '房户人',
        layerName: 'DLQ:DLQFHR',
        url: '',
        visible: false,
        zIndex: 4
      }, 
      {
        name: '网格员',
        layerName: 'DLQ:DLQWGGLY',
        url: '',
        visible: false,
        zIndex: 5
      }
    ]
  }
}

geoserver 对应的路径就是 GeoServer 的服务地址，view 中设置地图的坐标系、中心点、缩放等级和可视范围。layers 中包含 GeoServer 发布的所有 wms 服务，visible 设置为 false 的默认不显示。因为电子地图和影像地图加载不出来，所以使用的 OSM 作为地图（在地图功能页面中有做判断，没有 layerName 的使用 OSM）。

三、修改地图功能页面

<template>
  <div></div>
</template>
<script>
import mapConfig from '@/mapConfig' // 地图配置
import "ol/ol.css"
import Map from "ol/Map"
import View from "ol/View"
import TileLayer from "ol/layer/Tile"
import TileWMS from "ol/source/TileWMS"
import OSM from "ol/source/OSM"
import { defaults as defaultControls } from 'ol/control'
import ZoomSlider from 'ol/control/ZoomSlider' // 缩放控制

export default {
  name: 'InitMap',
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    // 获取所有图层
    getAllTileLayers() {
      let allLayers = mapConfig.map.layers
      for (let i = 0; i < allLayers.length; i++) {
        if (!allLayers[i].layerName) {
          // 没有 GeoServer 用的是 OSM
          let layer = new TileLayer({
            source: new OSM(),
            visible: allLayers[i].visible,
            zIndex: allLayers[i].zIndex,
            className: allLayers[i].name
          })
          this.map.addLayer(layer)
        } else {
          let layer = new TileLayer({
            source: new TileWMS({
              url: mapConfig.map.geoserver,
              params: { LAYERS: allLayers[i].layerName, TILED: true },
              serverType: "geoserver",
              transition: 0,
            }),
            visible: allLayers[i].visible,
            zIndex: allLayers[i].zIndex,
            className: allLayers[i].name
          })
          this.map.addLayer(layer)
        }
      }
    },
    // 地图单击事件
    singleClickFun() {
      this.map.on('singleclick', (e) => {
        console.log(e)
        if (this.map.hasFeatureAtPixel(e.pixel)) {
          let feature = this.map.getFeaturesAtPixel(e.pixel)
          console.log(feature)
        }
      })
    },

    // 初始化地图
    initMap() {
      let view = new View(mapConfig.map.view)
      this.map = new Map({
        layers: [],
        target: "map",
        view: view,
        controls: defaultControls().extend([new ZoomSlider()]) // 缩放控制
      })
      this.getAllTileLayers() // 获取所有图层
      this.singleClickFun(view) // 地图单击事件
    }

  }
}
</script>

<style lang="scss" scoped>
</style>