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代码

效果

image.png