我已经为我的问题准备了一个 fiddle :Fiddle
- 点击蓝色圆圈将其选中 -> 它会变成红色
- 点击另一个蓝色圆圈 -> 原始圆圈变为蓝色(取消选择),新圆圈变为红色(选中)
到目前为止一切顺利。现在,如果您执行以下操作:
- 点击蓝色圆圈 -> 它会变成红色
- 缩小并返回 -> 它保持红色
- 点击另一个蓝色圆圈
-> 两个圆圈都是红色的,而不是取消选择第一个!
我拥有的只是一个带有 styleFunction
的 selectInteraction
(我做了一些更多的事情,例如文本和缓存样式,但效果是相同的):
function styleFunction(feature, resolution) {
var selected = selectInteraction.getFeatures().getArray().indexOf(feature) >= 0;
return [
new ol.style.Style({
image: new ol.style.Circle({
radius: 30,
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
}),
fill: new ol.style.Fill({
color: selected ? [255, 0, 0, 1] : [0, 0, 255, 1]
})
}),
text: new ol.style.Text({
text: 'Test',
fill: new ol.style.Fill({
color: 'black'
})
})
})];
}
为什么我的“取消选择”样式在缩放或平移后出现错误?据我在调试 styleFunction
时所见,选择是正确的(仅包含 1 个项目),只是取消选择的项目没有正确设置样式。
我使用 styleFunction
因为无论是否选择,我都会根据附加到该功能的对象设置文本和半径。因此,我计算了某个功能的样式,并对所选功能和取消选择的功能使用相同的 styleFunction
。
编辑:解决方案
我更新了 Fiddle 。显然,您必须将所有取消选择的功能的样式设置为“null”(请参阅 Jonatas Walker 的回答):
selectInteraction.on('select', function (evt) {
if (evt) {
$.each(evt.deselected, function (idx, feature) {
feature.setStyle(null);
});
}
});
最佳答案
更新 - http://jsfiddle.net/jonataswalker/4vu669Lq/
内部styleFunction
var fill_color = (this instanceof ol.Feature) ?
[0, 0, 255, 1] : [255, 255, 255, 1];
并在选择监听器上设置所选样式:
selectInteraction.on('select', function(evt){
var selected = evt.selected;
var deselected = evt.deselected;
if (selected.length) {
selected.forEach(function(feature){
feature.setStyle(styleFunction);
});
}
if (deselected.length) {
deselected.forEach(function(feature){
feature.setStyle(null);
});
}
});
<小时/>
这是因为您对 ol.layer.Vector
和 ol.select.Interaction
使用相同的 styleFunction
。
因此,当您放大/缩小时,矢量图层会从 styleFunction
读取样式。
关于javascript - 开放层 3 : stylefunction is not called for unselected features after zoom/pan,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33894459/