OpenLayers 3:如何设置矢量特征的填充样式
OpenLayers 3: how to set fill style of a vector feature
我正在尝试设置矢量图层的单独特征的填充颜色。使用下面的代码,我认为我可以遍历这些功能并单独设置它们的填充样式,但是发生了一个奇怪的问题。如果没有 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或样式功能,我通过大量的尝试和猜测得出了这个结论。谁能指出我正确的方向?
所以,这里是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);
});
我正在尝试设置矢量图层的单独特征的填充颜色。使用下面的代码,我认为我可以遍历这些功能并单独设置它们的填充样式,但是发生了一个奇怪的问题。如果没有 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或样式功能,我通过大量的尝试和猜测得出了这个结论。谁能指出我正确的方向?
所以,这里是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);
});