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

桃扇骨 2023-10-11 17:05 65阅读 0赞

## 场景 ##

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

[Vue中使用Openlayers加载Geoserver发布的TileWMS\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Vue_Openlayers_Geoserver_TileWMS_BADAO_LIUMANG_QIZHI_-CSDN]

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_16_color_FFFFFF_t_70_g_se_x_16][]

配置数据源时选择shp文件

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

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

[GeoServer简介、下载、配置启动、发布shapefile全流程(图文实践)\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][GeoServer_shapefile_BADAO_LIUMANG_QIZHI_-CSDN]

具体流程可参考上面。

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

注：

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

## 实现 ##

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

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

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

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

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_19_color_FFFFFF_t_70_g_se_x_16][]

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

[Vue_Openlayers_Geoserver_TileWMS_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/115916949
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c28bf6f70702489aa706717bfec0f008.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/3b761b9d01f347c48c2701e343c15f8e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[GeoServer_shapefile_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/109636080
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/50ae6f6d558247c299c1eb1a0d21f9d7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/45e88e99f6574a80ba526c1f19b51952.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/5fb54749bde84a488ec570fd66d67047.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/0242620adfaf42cfac8fe469e9da2a72.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2e3dbcdfef704611843b12eecfaa5473.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_19,color_FFFFFF,t_70,g_se,x_16