GeoServer 多级地图发布流程

GeoServer 多层级地图发布流程

事情起因
准备工作

地图发布

本地加载
结束语

事情起因

最近参与了一个是以地图为主的项目（见下图）。
在这里插入图片描述
其中有个功能是框选截图功能，功能是比较简单。结合html2canvas和地图自身的画矩形工具很快就实现了截图功能。但是发现加载在线第三方的地图底图资源（智图）存在不允许跨域的问题。载图完成后图片没有底图。所以就打算本地发布瓦片底图，解决跨域的问题同时为后期发布自定义底图做准备。
在这里插入图片描述

准备工作

服务选择：因为之前接触过ArcServer的地图发布服务和ArcGis前端组件。本项目中对地图服务的要求并不高，只是单纯的用来发布瓦片底图。同时项目中的地图前端组件库选用的是Leaflet开源组件。所以决定用同样开源的GoeServer服务来发布地图。
下载安装：GeoServer下载地址。选择 “Production”版本下对应平台的安装包。安装流程本文就不讲了，请自行搜索（GeoServer运行需要java环境）。
登录GeoServer：在地址中输入 http://localhost:你的端口号/geoserver/web/，输入帐号：admin，密码：geoserver。登录成功后跳转到（如下图所示页面）后，GeoServer的准备工作就完成了。接下来我们去准备发布地图所用的资源文件。
地图文件下载器：网上有很比如：水经注万能下载器、太乐地图下载器、LVS地图下载器（免费）、BIGEMAP下载器等等，基本功能和能下载的底图资源都差不太多。本文使用的是太乐地图下载器，选择了Arcgis暖色图[0-7]级来作为本次地图发布的底图。

由于用的是标准版下载器（不花钱），所以只能先下载成库文件，再通过下载器转成tif文件。下图中的LXX.tif就是GeoServer发布地图要使用的资源文件。到此我们的地图发布的准备工作就完成了。接下来进入到本文的重点：地图发布。
在这里插入图片描述

地图发布

以上地图发布的准备工作就做完了。接下来我们开始发布地图，发布地图的几个流程大致如下：创建工作区——>数据存储——>创建图层——>发布地图——>地图切片——>切片合并，一共六个步骤。

创建工作区：
选择数据中的:工作区–>新建工作区–>命名–>URI–>开启需要的服务
数据存储：
选择数据中的:数据存储–>添加新的数据存储–>栅格数据源：GeoTIFF–>工作区：blue–>数据源名称：最好和tif文件相同，方便后期管理 -->连接参数:下载到本地的LXX.tif文件这里先选择L00.tif。
创建图层：
选择数据中的:图层–>添加新的资源–>添加图层：blue：blue_00–>发布
发布地图：
发布图层中:坐标参考系统–>定义SRS:选择和要发布的地图一致的坐标系，本文选择的是EPSG：3857。–>边框：Compute from SRS bounds。一定要重新计下边界–>保存：图层发布完成。
地图切片：
Tile Caching中:Tile Layers–>Seed/Truncate–>Grid set: 选择的图层一致的坐标系–>Format: image/png–>Zoom start: 当前图层一致：00–>Zoom stop: 当前图层一致：00–>Submit。

当 List 中的切片进程完成后。在GeoServer\2.13.1\data_dir\gwc\blue_L00\EPSG_3857_00\0_0目录下，可以看到已经切片好的底图。
在这里插入图片描述

切片合并：
现在把2、3、4、5步骤重复几次，把余下的1-7级地图tif文件都发布并切片。把切好的瓦片图都复制到gwc\blue_L00目录下（如下图）。这样我们在访问blue:blue00时就可以加载出0-7级的所有层级的地图。

本地加载

加载WMS服务：现在我们来测试下地图是否发布成功，本文使用的是Leaflet地图组件库V1.6.0版本。代码如下：

	const map = L.map('map',{
		center: [36.00, 120.00],
		zoom:5,
		minZoom:1,
		maxZoom:7，
		crs:L.CRS.EPSG3857    								// 这里要和发布的地图CRS保持一致 
	})
	const wms = L.titleLayer.WMS(
	'http://localhost:9000/geoserver/gwc/service/wms?', 	// 本地发布地图的WMS服务地址
	{ 
		layer:'blue:L00', 									// 图层名称必须和发布的图层名一致
		format: 'image/png',								// 地图切片的格式
        transparent: true,							
	}).addTo(map)