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

Question

我正在尝试设置矢量图层中单独要素的填充颜色。使用以下代码，我认为我应该能够遍历要素并单独设置它们的填充样式，但发生了奇怪的问题。没有setStyle函数时，特征的各种属性被记录在控制台中。id，name和geometry。大约有5个左右的特征被记录。基本上像这样：

room1
room2
room3
room4
room5

每个要素下面都有额外的数据（id、几何形状）。

但是当我添加设置要素填充的代码行时，出现了一个奇怪的问题。它似乎在第一个要素上卡住了循环，并且控制台会填满该要素的日志属性，例如：

room1
room1
room1
room1
room1
room1
room1

很长一段时间以来，火狐浏览器日志已经达到上限了，告诉我有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 或样式特性并不了解，通过多次尝试和猜测才找到这个结果。是否有人能指导我正确的方向？

- ThriceGood

---

你用过jsfiddle或plunker吗？它们可以更轻松地演示你的代码并获得帮助。 - Jonatas Walker

我需要使用KML文件作为我的矢量源。你知道我能在jsfiddle或plunker上做到这一点的方法吗？ - ThriceGood

请看这个 plunker + kml。 - Jonatas Walker

我只是想说，我在我的代码中使用自己的KML文件来制作地图。为了在jsfiddle/plunker中使用它，我需要上传或托管它。你知道有什么方法可以在线托管我的文件以供fiddle示例使用吗？普通的文件托管网站提供下载链接，但我想要一个直接指向文件而不是下载链接的链接，这样我就可以将其用于矢量源的url属性中。 - ThriceGood

是的，我明白了，正因为如此我才给您发送了我的 Plunker 示例。我将我的 KML 暂时托管在 GitHub 上。 - Jonatas Walker

Answer 1

所以，这是经过修改的你的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);
    });

- Jonatas Walker