OpenLayers矢量样式更改问题

时间:2014-06-15 06:56:51

标签: javascript jquery css openlayers geoserver

当我点击地图上的按钮时,我想改变矢量样式(fillColor)。我试了这个没有运气。

var map;
var layer, wms;

function init() {
    map = new OpenLayers.Map('map');
    wms = new OpenLayers.Layer.WMS(
        "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
        layers: 'basic'
    });
    var myStyle = {
        fill: true,
        fillColor: "#ff0000"
    };
    layer = new OpenLayers.Layer.Vector("WFS", {
        style: myStyle,
        strategies: [new OpenLayers.Strategy.BBOX()],
        protocol: new OpenLayers.Protocol.WFS({
            url: "http://demo.opengeo.org/geoserver/wfs",
            featureType: "tasmania_roads",
            featureNS: "http://www.openplans.org/topp"
        })
    });

    map.addLayers([wms, layer]);
    map.setCenter(new OpenLayers.LonLat(146.7, -41.8), 6);

        var panel_type2 = new OpenLayers.Control.Panel({
        displayClass: 'Panel2'
    });
    map.addControl(panel_type2);

    var redraw = new OpenLayers.Control.Button({
        displayClass: 'first',
        trigger: function () {
            layer.destroyFeatures();
            map.removeLayer(layer);
            var myStyle = {
                fill: true,
                fillColor: "#DFDFFF"
            };
            layer = new OpenLayers.Layer.Vector("WFS", {
                style: myStyle,
                strategies: [new OpenLayers.Strategy.BBOX()],
                protocol: new OpenLayers.Protocol.WFS({
                    url: "http://demo.opengeo.org/geoserver/wfs",
                    featureType: "tasmania_roads",
                    featureNS: "http://www.openplans.org/topp"
                })
            });

            map.addLayers([layer]);
        }
    });
    panel_type2.addControls([redraw]);
}

JSFIDDLE

当我点击按钮时,我试图用新样式重绘矢量图层。但它不起作用。有人可以告诉我为什么它没有改变fillcolor,我怎么能改变?

帮助将不胜感激。 :)

1 个答案:

答案 0 :(得分:1)

您的问题是,从wfs请求返回的内容只是行,没有多边形,因此您的fillStyle被忽略,因为没有任何内容可以应用它。我已经更新了你的小提琴,并在你的样式图中添加了一个strokeColor属性,现在它按预期工作:

var myStyle1 = {
      fill: true,
      fillColor: "#DFDFFF",
      strokeColor: "#FF0000"
};

Updated jsFiddle