Vue中使用Openlayers加载Geoserver发布的TileWMS

场景

Openlayers下载与加载geoserver的wms服务显示地图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114320531

Vue中使用Openlayers加载Geoserver发布的ImageWMS：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/115867709

在上面已经加载ImageWMS的基础上，想要加载TileWMS

ImageWMS与TileWMS的区别

相同点：都是加载WMS服务。
不同点：TitleWMS会把当前可视窗口根据网格（开发者可以在调用OpenLayers api的时候自定义）切分，一片一片地返回回来，在前端进行整合。而ImageWMS则不会进行切割，每次请求都是只会返回一个当前窗口可见地地图图片。如果WMS服务对应地数据比较大并且网络条件不是很好的时候，TileWMS交互体验更好一点（因为做了切割，每次返回回来的图片大小都比较小）&#x