Выпадающее меню с OpenLayers 3

Question

Я использую openlayers 3. Из значений, содержащихся в векторном GeoJSON, я хочу заполнить выпадающее меню. При выборе значения из выпадающего меню я хочу увеличить масштаб объекта.

Моя проблема в том, что я хочу сгенерировать свой HTML из атрибутов моего GeoJSON. Так что я попробовал этот простой код, но он не работает:

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

EDIT: Я могу заполнить выпадающее меню из списка:

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); 
});