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