GeoServer发布多级地图并结合Arcgis进行前端调用

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前端组件进行展示，代码如下，仅供参考，本人亲测没有问题，使用时请自行修改参数。

xml 复制代码

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

结束！