Vue+Openlayers加载Geoserver发布的TileWMS后更换shp数据源的流程

场景

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

Vue中使用Openlayers加载Geoserver发布的TileWMS_BADAO_LIUMANG_QIZHI的博客-CSDN博客

上面加载的TileWMS数据源是shp文件

配置数据源时选择shp文件

GeoServer简介、下载、配置启动、发布shapefile全流程(图文实践)：

GeoServer简介、下载、配置启动、发布shapefile全流程(图文实践)_BADAO_LIUMANG_QIZHI的博客-CSDN博客

具体流程可参考上面。

如果地图有更新，需要重新更换shp文件，比如地图变大了，边界变了，提供了新的shp文件应该怎样更换。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、首先加载显示的是图层组，图层组有多个图层，每个图层对应一个shp文件。

将新的shp文件替换原来的shp文件，如果文件名已经个数都不变的情况下。

那么每个数据存储的shp文件的位置的路径就不用再更改了，直接使用原来的路径和名字即可。

如果原来的shp想要保留，可以直接更换每个数据存储的shp路径为新的shp的路径，点击浏览更换即可。

2、更改完shp文件的路径之后，到对应的每个图层中重新计算边界和经纬度边界

3、如果是加载的图层组显示，还要到图层组中将每个图层先删除掉，然后再重新添加一下，不然不会生效

4、然后到Layer Preview中选择图层组进行预览

5、然后预览没问题的话，在预览页面查看网页源代码，重新获取到地图的边界

6、然后在代码中重新修改边界值，重新打包发布即可