javascript OpenLayers 3：如何设置矢量特征的填充样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30936281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
OpenLayers 3: how to set fill style of a vector feature
提问by ThriceGood
i am trying to set the fill colour of seperate features of a vector layer. using the code below, i thought i would be able to iterate through the features and set their fill style individually, but a strange issue happens. Without the setStyle function, the various properties of the features are logged in the console. id, name and geometry. There is about 5 or so features that get logged. basically like
我正在尝试设置矢量图层的单独特征的填充颜色。使用下面的代码，我以为我可以遍历这些功能并单独设置它们的填充样式，但是发生了一个奇怪的问题。在没有 setStyle 函数的情况下，功能的各种属性都记录在控制台中。id、名称和几何形状。大约有 5 个左右的功能被记录下来。基本上喜欢
room1
room2
room3
room4
room5
with the extra data underneath each one (id, geometry)
每个下面都有额外的数据（id，几何）
but when i add the line for setting the fill of the feature, i get a strange problem. It seems to hang the loop on the first feature and the console fills up with logs of that features properties, like:
但是当我添加用于设置功能填充的行时，我遇到了一个奇怪的问题。它似乎将循环挂在第一个功能上，控制台填满了该功能属性的日志，例如：
room1
room1
room1
room1
room1
room1
room1
for a long time, to the point where the firefox log limit is reached and it tells me that 2000 entries are not shown!
很长一段时间，达到 Firefox 日志限制的地步，它告诉我没有显示 2000 个条目！
but on the plus side, the first feature does actually get its fill colour changed! so i think the line of code i used is at least half right! but there is definately something drastically wrong with it.
但从好的方面来说，第一个功能确实改变了它的填充颜色！所以我认为我使用的代码行至少对了一半！但它肯定有一些严重的错误。
the code:
代码：
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}));
}
}
});
i really do not know much about OL3 or styling features and i arrived at this through a lot of trial and guessing. can anyone point me in the right direction?
我真的不太了解 OL3 或样式功能，我是通过大量试验和猜测得出的。任何人都可以指出我正确的方向吗？
回答by Jonatas Walker
So, here is your plunkmodified.
所以，这是你的 plunk修改。
First of all, unless you have a specific reason, use the latest library version. This is the main reason your kml was not loading.
首先，除非您有特定原因，否则请使用最新的库版本。这是您的 kml 未加载的主要原因。
And secondly, your setFillbecame this:
其次，你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);
});
