我有以下函数从select中获取一个选项,并通过我的geojson文件中的参数进行匹配。如果找到完全匹配,则应以特定样式显示图层。
Everythng似乎没问题,因为函数为每个特征找到了正确的对象,它实际上得到了名为" Criteria"并将其放入包含所有标准的数组中(例如array = {" A"," B"," Bi"," Bii&#34它还会检查所选选项是否与数组中的某个元素匹配。但它不会输出命令//when clicking the select
document.getElementById("criteria_select").addEventListener('click', function (){
//first step it loads the vector layer and sets the style to transparent
var i;
for (i = 0; i < layers_group.length; ++i){
layers_group[i].setStyle(transparentStyle);
layers_group[i].setVisible(true);
};
//second step when the select changes (i.e. I make a choice)
$("#criteria_select").change(function() {
//it starts the function to change styles according to the selection made
var selectedCriteria = $("#criteria_select").val();
console.log('selectedCriteria',selectedCriteria);
var index;
for (index = 0; index < source_group.length; index++){
source_group[index].forEachFeature(function(feat){
var array = feat.get('Criteria').split(',');
for (i = 0; i < array.length; i++)
{
console.log(array[i]);
if (selectedCriteria === array[i]){
feat.setStyle(selectStyle);
} else {
//and if doesnt exist switch back to the deafult style
feat.setStyle(transparentStyle);
}
}
});
};
});
});
。
有什么建议吗?可以找到一个完整的plunker here。
{{1}}
答案 0 :(得分:0)
你的plunkr代码充满了错误。
ol.style
对象位于init()方法内,因此无法在外部使用。 ol.style
个对象都相同。 ol.source.Vector
时的url参数错误。因此,根本没有加载矢量图层。我猜你的工作代码不会有上述错误。我已经冒昧地解决了上述问题并添加了 transparentStyle 对象。
主要问题在于你的for循环。您不是要检查条件数组是否包含selectedCriteria,而是将每个条件值与selectedCriteria进行比较。如果条件被评估为真,则打破循环。
修改1:
if (selectedCriteria === array[i].trim()){
feat.setStyle(selectStyle);
break;
} else {
//and if doesnt exist switch back to the deafult style
feat.setStyle(defaultStyle);
}
我已更新此plunkr中的代码link
if (selectedCriteria === array[i])
工作正常。但是你在数组[i]中传递的值包含错误的值。如果您看到 mediterranean.geojson 文件条件属性值类似于&#34; A,Bii,Ciii,Dii&#34; ,则两个逗号分隔值之间会有额外的空格。由于这个额外的空间,您可能会遇到这些问题。
修复:
在比较之前修剪字符串。我已经在Plunckr和答案中更新了代码。