1.下载geoserver，我这里使用的是.exe进行安装
安装过程中会设置用户名、密码、端口号
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
