openlayers:重绘矢量图层而不再重新下载数据

Question

我需要的是一种修改矢量图层表示而无需再次下载数据的方法.我已经定义了一个GLM矢量图层和一个名为build_style的函数,用于根据某些特征为其几何图形着色.我有一个HTML表单调用函数UpdateGlmLayer,它以这种方式定义:

function UpdateGlmLayer(info_str) {
    var v = info_str.split("|");
    var filter_column = v[0];
    var values = [parseFloat(v[1]), parseFloat(v[2]), parseFloat(v[3])];
    glm.styleMap = build_style(filter_column, values);
    glm.redraw();
};

GLM层以这种方式定义:

gml_protocol = new OpenLayers.Protocol.HTTP({
    url: "http://localhost:8080/geoserver/ows?service=WFS&version=1.0.0&request=GetFeature&typeName="+info["layer_featurePrefix"]+":"+info["layer_featureType"],
    format: new OpenLayers.Format.GML()
})

glm = new OpenLayers.Layer.Vector(info["layer_name"], {
    strategies: [new OpenLayers.Strategy.BBOX({ratio: 3, resFactor: 1})],
    protocol: gml_protocol,
    styleMap: build_style(info["filter_property"], info["filter_values"]), 
    srsName: info["layer_srsName"],
    projection: new OpenLayers.Projection("EPSG:4326"),
    visibility: true
});

当触发UpdateGlmLayer时,颜色似乎立即改变,但之后系统停止的时间与初始页面加载时下载数据的时间大致相同.在此期间什么都做不了.有什么不对？

Answer 1

问题在于您设置resFactor.我创建了两个演示映射,一个加载了一些GeoServer GML向量,并在不使用resFactor 1设置的情况下重新设置它们,另一个使用resFactor 1设置,第二个肯定是发送多个请求.如果将resfactor设置为大于1的任何值,则不会发生这种情况.

没有resFactor设置+点击restyle 3次给出了这个结果:

只有1个数据请求.

但是,resFactor设置3 +点击restyle 3次会得到以下结果:

4个数据请求.

我相信这是你所看到的行为.这看起来像是一个错误,因为文档说你所做的是有效的.看看BBOX策略js文件中的代码,问题似乎出现在代码中:

var ratio = this.resolution / this.layer.map.getResolution();
invalid = (ratio >= this.resFactor || ratio <= (1 / this.resFactor));

这是在.redraw()函数上运行,以计算是否需要重新加载数据.因为当您重绘地图时,比率将始终设置为1(分辨率未更改,因此this.resolution === this.layer.map.getResolution())则无效将始终等于true,因此图层重新加载.

resFactor

{Float}用于确定以前请求的功能何时无效的可选因子.如果设置,则将resFactor与先前请求的分辨率与当前地图分辨率进行比较.如果resFactor>(旧/新)和1/resFactor <(旧/新).如果将resFactor设置为1,则每次分辨率更改时都会请求数据.如果将resFactor设置为3,则如果旧分辨率是新分辨率的3倍,或者新分辨率是旧分辨率的3倍,则将请求数据.如果旧边界不包含新边界,则将始终请求新数据(使用或不使用resFactor).

我正在以下列方式进行重新设计:

var style1, style2;


style1 = new OpenLayers.Style({
                strokeColor: "yellow",
                strokeWidth: 10 });


style2 = new OpenLayers.Style({
                strokeColor: "blue",
                strokeWidth: 5 });

function restyle1()
{
    layer.styleMap = style1;
    layer.redraw();

}

function restyle2()
{
    layer.styleMap = style2;
    layer.redraw();

}