OpenLayers 3:如何设置矢量要素的填充样式

Question

我正在尝试设置矢量图层的单独特征的填充颜色.使用下面的代码,我想我将能够遍历这些功能并单独设置它们的填充样式,但是会出现一个奇怪的问题.如果没有setStyle函数,则会在控制台中记录功能的各种属性.id,名称和几何.大约有5个左右的功能被记录下来.基本上就像

room1
room2
room3
room4
room5

每个下面的额外数据(id,几何)

但是当我添加用于设置功能填充的行时,我遇到了一个奇怪的问题.它似乎将循环挂在第一个功能上,并且控制台填满了该功能属性的日志,例如:

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

所以,这是你的修改.

首先,除非您有特定原因,否则请使用最新的库版本.这是你的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);
    });