javascript - 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 的设置上。我创建了两个演示 map ，一个加载一些 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()函数上，计算是否需要重新加载数据。因为重绘 map 时比率将始终设置为 1(分辨率未更改，因此 this.resolution === this.layer.map.getResolution() )然后 invalid 将始终等于 true，因此图层会重新加载.

resFactor

{Float} Optional factor used to determine when previously requested features are invalid. If set, the resFactor will be compared to the resolution of the previous request to the current map resolution. If resFactor > (old / new) and 1/resFactor < (old / new). If you set a resFactor of 1, data will be requested every time the resolution changes. If you set a resFactor of 3, data will be requested if the old resolution is 3 times the new, or if the new is 3 times the old. If the old bounds do not contain the new bounds new data will always be requested (with or without considering 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();

}