openlayer 矢量图层刷新的问题

      const vectSource = new VectorSource({
          features: new GeoJSON().readFeatures(geojsonUrl),
        })
      const jzLayer = new VectorLayer({
        source: vectSource,
        style: styleFunction,
        visible: true,
        zIndex: 102,
        projection: "EPSG:4326",
      });
      this.map.addLayer(jzLayer);
      //刷新图层
      setTimeout(() => {
        jzLayer.getSource().refresh()
       }, 3000);

以上示例代码的场景是当我们改变图层样式或者改变要素时，去刷新重新渲染图层。但是发现刷新后图层不展示了。绞尽脑汁测试各种属性，寻找各种原因，都没有解决。于是去api文档了解一下这个refresh()方法，找到了问题根因。

意思是：刷新图层时source会被清除，并且服务数据重新会加载。

什么是服务数据呢，就是有url地址的数据。以上我是直接把要素塞到source里面，当被清除时，并没有可用的数据服务地址去载入请求。 

以下代码刷新是没问题的，因为数据是通过url地址请求的。

      const vectSource = new VectorSource({
          url: "/static/wgs84jz.json",
          format: new GeoJSON(),
          projection: "EPSG:4326",
        })
      const jzLayer = new VectorLayer({
        source: vectSource,
        style: styleFunction,
        visible: true,
        zIndex: 102,
        projection: "EPSG:4326",
      });
      this.map.addLayer(jzLayer);
      //刷新图层
      setTimeout(() => {
        jzLayer.getSource().refresh()
       }, 3000);

 所以如果是features加载，刷新图层后必须要重新加载下要素，原理就是clear()在后addFeature()。

注意一下：url是请求的地址，不是静态文件资源，所以vue中，不能像图片通过import导入后给他赋值，数据是请求不到的。