openLayers添加geoserver服务wms图层（vue项目）

前期准备

真的非常感谢各位大佬的分享

tomcat + geoserver 服务安装启动

可以参考下面这篇文章非常详细，感谢大佬
链接: https://blog.youkuaiyun.com/sinat_28797501/article/details/69668701
8080的端口被占用 netstat -aon|findstr “8080” 找到pid 打开管理器-服务-找到对应pid结束任务

openLayers npm包

链接: https://www.npmjs.com/package/ol?activeTab=readme

shp文件参考

我当时找了好半天，这里也给把链接给出来，直接按照他的方法弄就可以了
链接: https://zhuanlan.zhihu.com/p/561833219

关于openLayers底图看不了

可以直接使用高德，百度或者天地图，这里有大佬进行了汇总
链接: https://blog.youkuaiyun.com/hhy321/article/details/123490804

跨域的问题

在使用wms图层的时候碰到了跨域的问题，可能大家也会碰到，给大家提供一下解决思路
我是直接使用了火狐的浏览器，安装了插件，可以参考下面这篇
链接: https://blog.youkuaiyun.com/qq_43592064/article/details/118903001

正式开始

贴代码 如果TileWMS出不来可以试试ImageWMS

<template>
  <div id="map"  class="map__x"></div>
</template>

<script>
// 引入依赖
import { Map, View } from 'ol';
import XYZ from 'ol/source/XYZ' //xyz
import Tile from 'ol/layer/Tile'
import TileWMS from 'ol/source/TileWMS'
import Image from "ol/layer/Image"
import ImageWMS from 'ol/source/ImageWMS'
export default {
  name: 'study',
  // 挂载
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      var ditu= new Tile({
        title: "底图",
        source: new XYZ({
            url:'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}'
        })
    });
    var wmsSource = new Tile({
      source: new TileWMS({
        url: 'http://localhost:8080/geoserver/test/wms',
        params: {
            LAYERS: 'test:wuhan',
            TILED: true,
            FORMAT: 'image/png',
        },
        serverType: 'geoserver',
        crossOrigin: 'anonymous',
        })
    })
    var map = new Map({
        target: 'map',
        layers: [
            ditu,
            wmsSource
        ],
        // 设置显示地图的视图
        view: new View({
            center:[114.247537142389, 30.607708320148],
            projection: 'EPSG:4326',
            zoom: 10,
        })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* map容器撑开 */
.map__x {
  width: 1500px;
  height: 800px;
  border: 1px solid #eee;
}
</style>

效果展示