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

Answer 2

我已经解决了我的问题：

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

感谢那些花时间回复的人

OpenLayers 3 的下拉菜单

Dropdown menu with OpenLayers 3

drop-down-menu

openlayers-3