下拉菜单与OpenLayers 3

Question

我正在使用openlayers 3.从矢量GeoJSON中包含的值，我想填充下拉菜单。从下拉菜单中选择一个值时，我想放大实体。

我现在的问题是，我想从我的GeoJSON的属性生成我的HTML。所以，我想这个简单的代码，但它不工作：

var menu = document.getElementById('menuDropDown'); 
vector2.getSource().forEachFeature(function() { 
    menu.innerHTML = feature.get('NOM').join(', '); 
    }); 

编辑： 我能够从列表填充下拉菜单：

var list = ['a','b','c']; 
var mySelect = $('#mySelect'); 
    $.each(list, function(val, text) { 
     mySelect.append(
      $('<option></option>').val(val).html(text) 
     ); 
    }); 

我想要做的是什么从我的矢量 的属性填充此列表，所以我试试这个：

// vector2 it's a GeoJSON who is integrate on my map 
vector2.getSource().getFeatures().forEachFeature(function(feature) { 
    list.push(feature.get('NOM')); 
}); 

Answer 1

我解决我的问题：

vector2.getSource().on('change', function(evt){ 
     var source = evt.target; 
     var list = []; 
     source.forEachFeature(function(feature) { 
      list.push(feature.get('NOM')); 
      }); 
     // console.log("Ecrit moi les noms : " + list); 

谢谢你给那些花时间回复的人

Answer 2

首先我假设你有一些参数传递给回调函数：

vector2.getSource().forEachFeature(function(feature) { 

然后你就可以追加一个项目一个下拉列表，像这样：

var item = document.createElement('option'); 
item.setAttribute('value', feature.get('NOM')); 

var textNode = document.createTextNode(feature.get('NOM')); 
item.appendChild(textNode) 

menu.appendChild(item); 

一起：

var menu = document.getElementById('menuDropDown'); 
vector2.getSource().forEachFeature(function(feature) { 
    var item = document.createElement('option'); 
    item.setAttribute('value', feature.get('NOM')); 

    var textNode = document.createTextNode(feature.get('NOM')); 
    item.appendChild(textNode) 

    menu.appendChild(item); 
});