vue+geoserver的搭建部署

1.下载geoserver，我这里使用的是.exe进行安装

安装过程中会设置用户名、密码、端口号

下载地址 https://geoserver.org/

image.png
image.png

2.创建工作空间

打开页面登录(默认用户名:admin,密码:geoserver)后点击工作空间

image.png
image.png

填写完后点击保存

3.创建网格集

1.点击网格集，点击添加新网格集。
2.填写名称
3.填写坐标系(坐标系可在地图矢量图属性中查找)
4.自动计算网格集边界
5.添加地图缩放级别(根据需求添加)
6.点击保存

image.png

4.添加存储仓库

image.png

选择数据源类型，我这里是使用的tiff文件

image.png

选择工作空间，填写名称，选择tiff文件，点击保存

image.png
点击发布
image.png
发布后会跳转下图，填写SRS(可在地图矢量图属性中查找)
image.png

这里添加刚创建的网格集后点击保存

image.png

5.进行切片

点击切片图层，找到刚才发布的那条数据，点击右侧 Seed/Truncate

image.png

点击sumbit进行切片

image.png
此时已经开始切片
image.png

6.预览图层

切片完成后可以点击图层预览

image.png

找到刚切完的数据，点击OpenLayers进行预览

image.png
预览效果
image.png

7.在vue中加载地图(我这里是用的是leaflet.js，安装命令 npm install leaflet)

vue代码

<template>
  <div id="map" ref="rootmap" class="map" style="width: 90vw;height: 90vh">
  </div>
</template>

<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'


export default {
  data() {
    return {
      map: null
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      var map = new L.Map('map', {
        center: new L.LatLng(40.979692,82.810441),
        zoom: 8,
        zoomControl: false

      });
      var wmsLayer= L.tileLayer.wms("http://127.0.0.1:7777/geoserver/test/wms?", {
        layers: 'test:map3',// 要加载的图层名
        format: 'image/png',//返回的数据格式
        transparent: true,
      });
      map.addLayer(wmsLayer);
    }
  }
}
</script>

效果

image.png