openlayer 矢量图层刷新的问题

最新推荐文章于 2024-08-17 15:58:59 发布

llbzwb

最新推荐文章于 2024-08-17 15:58:59 发布

阅读量1.2k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_39330397/article/details/131878582

版权

当使用OpenLayers时，如果图层数据直接从GeoJSON对象加载而不是URL，调用refresh()方法会导致图层不显示。原因是刷新时source被清除，需要的数据服务URL不存在。为了解决这个问题，对于非URL加载的特性，需要在刷新后重新加载features。URL加载的图层在刷新后可以正常工作，因为数据会重新请求。

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

      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导入后给他赋值，数据是请求不到的。