OpenLayers 3：如何设置矢量特征的填充样式

Question

我正在尝试设置矢量图层的单独特征的填充颜色。使用下面的代码，我认为我可以遍历这些功能并单独设置它们的填充样式，但是发生了一个奇怪的问题。如果没有 setStyle 函数，功能的各种属性将记录在控制台中。 ID、名称和几何图形。大约有 5 个左右的功能被记录下来。基本喜欢

room1
room2
room3
room4
room5

每个数据下面都有额外的数据（id、geometry）

但是当我添加设置特征填充的行时，我遇到了一个奇怪的问题。它似乎在第一个功能上挂起循环，并且控制台填满了该功能属性的日志，例如：

room1
room1
room1
room1
room1
room1
room1

很长一段时间，到了 firefox 日志限制的地步，它告诉我没有显示 2000 个条目！

但从好的方面来说，第一个特征确实改变了它的填充颜色！所以我认为我使用的代码行至少对了一半！但肯定有一些严重的错误。

代码：

vector.getSource().on('change', function (evt) {
    var source = evt.target;
    if (source.getState() === 'ready') {

        var features = vector.getSource().getFeatures()
        for (var k in features) {
            console.log(features[k].getProperties()['name']);
            console.log(features[k].getProperties()['id']);
            console.log(features[k].getGeometry()['n']);
            features[k].setStyle(new ol.style.Style({fill: fill}));
        }

    }        
});

我真的不太了解OL3或样式功能，我通过大量的尝试和猜测得出了这个结论。谁能指出我正确的方向？

Answer 1

所以，这里是your plunk修改。

首先，除非有特殊原因，否则请使用最新的库版本。这是您的 kml 未加载的主要原因。

其次，你的 setFill 变成了这样：

    vector.getSource().forEachFeature(function(feature){

        console.log(feature.getProperties());

        style = new ol.style.Style({
            //I don't know how to get the color of your kml to fill each room
            //fill: new ol.style.Fill({ color: '#000' }),
            stroke: new ol.style.Stroke({ color: '#000' }),
            text: new ol.style.Text({
                text: feature.get('name'),
                font: '12px Calibri,sans-serif',
                fill: new ol.style.Fill({ color: '#000' }),
                stroke: new ol.style.Stroke({
                    color: '#fff', width: 2
                })
            })
        });
        feature.setStyle(style);
    });

OpenLayers 3：如何设置矢量特征的填充样式

OpenLayers 3: how to set fill style of a vector feature

javascript

kml

openlayers-3