1.登录
用户名：admin 默许暗码：geoserver，以此账户登录geoServer
2.新建工作空间
命名规范为英文，URI仅作为标识没有其他含义。
3.新建存储库房
GeoServer库房支持shp、geotiff、postgis数据库表等常见格式，此处仅说明geotiff格式的。
先自行在地图下载器上下载地图（地图布景为通明，拼接tif格式）
特别留意：下载的文件不止包括tif文件，还有其他如tfw，prj文件,这些文件很重要包括地址信息，要放在tif同级下，不然geoserver导入数据时或许呈现无法解析状况（其他格式也要特别留意这个问题）
连接参数要指定tif文件（存在tfw，prj的需求和tif同级，只要tif文件或许geoServer无法解析）
4.图层发布
此处主要演示3级图层发布
当你在建立好存储库房后，会自行跳转到图层发布页。没有跳转需求点击图层–添加新的资源–挑选图层即可找到图层发布页。
点击发布（再次发布为现已发布过的图层，能够二次发布），填写图层名
填写边框和经纬（能够自行出产，参照下图）
回到上边点击Tile Caching选项。
下滑到GridSet装备处，如下图所示
Published zoom levels在后续切片图层时，会默许挑选该处设置，它决议了终究预览时，该图层能够分多少级进行预览（如设置了3-10，在预览时你能够最小缩放到3级，最大缩放到10级）。
Cached zoom levels在进行切片图层预览时，会主动将你预览过得图片分级进行切片并放入指定文件夹下（一般在data_dir–gwc文件夹下，当然版别不同或许略有差异），主张只设置到指定等级下（如图所示，此图层为3级并将作为终究预览入口，所以设置为3/3），不然或许发生数据的抵触，导致图片紊乱，这点很重要！
之后点击发布即可，这样3级图层就正式发布为wms服务了。
注：其他等级依照上述等级设置发布即可。
5.图层切片
如图点击操作Seed/Truncate,你会看到下图所示页面
Number of tasks to use为你将设置多少线程来进行图片切开，切开的图片较大时能够设置，提高并行能力。
GridSet为你发布时设置，当设置多个时，这儿能够挑选多个。
Format挑选png即可。
Zoom start/Zoom stop在发布图层时现已设置，它表明图片依照多少级-多少级进行切开。因为咱们是多级的，所以此处要一级一级去处理，在发布图层时咱们现已设置了Published zoom levels为3/3，这儿默许就会显现3/3，咱们只需求处理当前级即可。
上述没有问题后，点击submit进行提交，会发现进展，可反复刷新进展，终究不在显现进展而显现为none时，表明现已完成。
终究在data_dir–gwc下生成对应文件，里面存放了切开好的图片。（若发现没有生成，或许为版别问题，将切开的图片存放在了内存中，主张更换磁盘存放途径或更换版别）
其他等级参照上述步骤提交即可，留意切片等级。（4级就设置为4/4…）
6.切片搬迁
终究在gwc生成上述文件，并每一级下都存在切开的图片。
现在咱们需求把4-16级里切开好的图片，存到3级下，终究如下图所示。
接下来，回到图层，修改3级的图层，将Published zoom levels由原来的3/3改为3/16，请留意Cached zoom levels保持不变仍然为3/3，不然或许和切开好的图片数据发生抵触。
保存后，回到切片图层检查，找到3级，对应预览SelectOne处挑选为EPSG:4326 / png（jpeg和png详细挑选哪个要看其时切开时指定的Format格式为准）
7.前端展示
以Arcgis前端组件进行展示，代码如下，仅供参考，自己亲测没有问题，使用时请自行修改参数（不止能够加载一个图层哦，前端表明图层的参数为layers是一个数组结构，能够掩盖，那你完全能够加载一个底图，在底图之上掩盖河流等其他图层）。
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>WMTSLayer | Sample | ArcGIS API for JavaScript 4.22</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-layer-list {
width: 310px;
}
</style>
<script src="https://js.arcgis.com/4.22/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/WMTSLayer",
"esri/widgets/LayerList",
"esri/layers/WebTileLayer",
"esri/geometry/SpatialReference"
], (Map, MapView, WMTSLayer, LayerList, WebTileLayer, SpatialReference) => {
let layer = new WebTileLayer({
id: 'qx:qx_Level_3',
urlTemplate: 'http://localhost:8080/geoserver/gwc/service/wmts?layer=qx:qx_Level_3&style=&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:4326:{level}&TileRow={row}&TileCol={col}',
spatialReference: new SpatialReference({
wkid: 4326
}),
tileInfo: {
'rows': 256,
'cols': 256,
'compressionQuality': 0,
'origin': {
'x': -180,
'y': 90
},
'spatialReference': {
'wkid': 4326
},
'lods': [{
'level': 0,
'resolution': 0.703125,
'scale': 279541132.0143589
},
{
'level': 1,
'resolution': 0.3515625,
'scale': 139770566.00717944
},
{
'level': 2,
'resolution': 0.17578125,
'scale': 69885283.00358972
},
{
'level': 3,
'resolution': 0.087890625,
'scale': 34942641.50179486
},
{
'level': 4,
'resolution': 0.0439453125,
'scale': 17471320.75089743
},
{
'level': 5,
'resolution': 0.02197265625,
'scale': 8735660.375448715
},
{
'level': 6,
'resolution': 0.010986328125,
'scale': 4367830.1877243575
},
{
'level': 7,
'resolution': 0.0054931640625,
'scale': 2183915.0938621787
},
{
'level': 8,
'resolution': 0.00274658203125,
'scale': 1091957.5469310894
},
{
'level': 9,
'resolution': 0.001373291015625,
'scale': 545978.7734655447
},
{
'level': 10,
'resolution': 0.0006866455078125,
'scale': 272989.38673277234
},
{
'level': 11,
'resolution': 0.00034332275390625,
'scale': 136494.69336638617
},
{
'level': 12,
'resolution': 0.000171661376953125,
'scale': 68247.34668319309
},
{
'level': 13,
'resolution': 8.58306884765625e-005,
'scale': 34123.67334159654
},
{
'level': 14,
'resolution': 4.291534423828125e-005,
'scale': 17061.83667079827
},
{
'level': 15,
'resolution': 2.1457672119140625e-005,
'scale': 8530.918335399136
},
{
'level': 16,
'resolution': 1.0728836059570313e-005,
'scale': 4265.459167699568
}
]
}
})
const map = new Map({
layers: [layer]
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [107, 34], //
zoom: 3,
spatialReference: new SpatialReference(4326)
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
结束！
