Openlayers动态刷新wms服务图层

最新推荐文章于 2024-08-26 17:11:53 发布

wwf1225

最新推荐文章于 2024-08-26 17:11:53 发布

阅读量1.9k

点赞数 3

分类专栏： vue openLayers 文章标签： vue.js

原文链接：https://zhuanlan.zhihu.com/p/526788391

版权

vue 同时被 2 个专栏收录

135 篇文章 6 订阅

订阅专栏

openLayers

6 篇文章 0 订阅

订阅专栏

本文讲述了开发者在使用OpenLayers加载WMS服务时遇到的问题，如何通过刷新参数而非常规方法实现图层更新，以及为何百度搜索不如Google有效。作者分享了解决方案和总结经验教训，建议读者直接Google搜索获取准确答案。

摘要由CSDN通过智能技术生成

Openlayers动态刷新wms服务图层 - 知乎

wms - OpenLayers not refreshing a layer - Geographic Information Systems Stack Exchange

需求

最近开发一个基于openlayers的webgis在线编辑系统。openlayers加载wms服务作为资源底图展示。前端负责要素绘制，然后保存到后台数据库对应的表中，每次创建完成一次资源，都需要重新刷新wms服务，更新资源底图。示例说明如下图

碰到的问题

主要是被百度搜索引擎坑了，最近科学上网欠费了，只能使用百度，搜索了一波网上的方案，归类总结有如下两个方案，看别人的文章说是可以实现，然而我试了不行，如果有实现成功的知友，可以评论区交流一下。

1.每次创建完资源后，调用wms的source进行refresh

const layers = this.map.getLayers().getArray();
if (layers.length > 0) {
  layers.forEach((item) => {
     item.getSource().refresh(); //这句代码
  });
}

2.初始化wms服务的时候，加上一个随机参数

const layer = new TileLayer({
  source: new TileWMS({
    url: url,
    crossOrigin: 'anonymous',
    params: {
      LAYERS: layername,
      TILED: true,
      refresh: new Date().getTime(),  //就是这句代码
    },
    serverType: "geoserver",
  })
});

这两个方案，我都试了，都没有起作用！！！！

最后乖乖的交费，必须科学上网一波google，搜索了 openlayers not refreshing wms layers这些关键字，果然一下子就找到了一篇可以解决这个问题的帖子

OpenLayers not refreshing a layergis.stackexchange.com/questions/30680/openlayers-not-refreshing-a-layer正在上传…重新上传取消

试着照葫芦画瓢写了一波，果然可以实现我的功能。

item.getSource().updateParams({"time": Date.now()})方案更新

其实很简单，也是每次创建完资源后，去调用如下自己编写的函数：

refresh(){
  const layers = this.map.getLayers().getArray();
  if (layers.length > 0) {
    layers.forEach((item) => {
        item.getSource().updateParams({"time": Date.now()}); //关键代码就是这一句，每次更新一波参数
    });
  }
},