Javascript/Openlayers for loop not working

Question

Я создаю карту с OpenLayers, и у меня возникают проблемы с появлением функций.

Я хочу взять массив и назначить каждую координату своим собственным маркером. Это соответствующий код (полный код в нижней части поста):

   var npctowns = [ 
        [ 533, mapy-966 ], 
        [ 833, mapy-1766 ], 
        [ 2000, mapy-500 ], 
        [ 1500, mapy-1700 ] 

       ]; 
       for (var i = 0; i < npctowns.length; i++) { 

        var lon = npctowns[i][0]; 
        var lat = npctowns[i][0]; 

        var npcTownIcons = new ol.Feature({ 
         geometry: new ol.geom.Point([lon,lat]) 
        }); 
        var iconStyle = new ol.style.Style({ 
         image: new ol.style.Icon ({ 
         anchor: [0, 0], 
         anchorXUnits: 'pixels', 
         anchorYUnits: 'pixels', 
         opacity: 1, 
         src: 'assets/img/icons/Town.gif' 
         }) 
        }); 
        var vectorSource = new ol.source.Vector({ 
         features: [npcTownIcons] 
         }); 
        var vectorLayer = new ol.layer.Vector({ 
         source: vectorSource 
         }); 

       }; 

Я думаю, что я бегу в проблему, не присваивая переменной функции динамически? Но не знаете, как это исправить! Любая помощь действительно ценится!

Полная карта код на jsfiddle: https://jsfiddle.net/dhaurhvj/

Answer 1

Вы должны инициализировать vectorLayer вне цикла for, поэтому инициализация карты может получить доступ к этой vectorLayer.
Тогда вам действительно нужно добавить эти функции к слою (потому что он был создан ранее).

Я думаю, что код должен выглядеть следующим образом:

var vectorSource = new ol.source.Vector({features: [[]]}); 
var vectorLayer = new ol.layer.Vector({ 
    source: vectorSource 
}); 
var iconStyle = new ol.style.Style({ 
    image: new ol.style.Icon ({ 
     anchor: [0, 0], 
     anchorXUnits: 'pixels', 
     anchorYUnits: 'pixels', 
     opacity: 1, 
     src: 'assets/img/icons/Town.gif' 
    }) 
}); 
for (var i = 0; i < npctowns.length; i++) {       
    var lon = npctowns[i][0]; 
    var lat = npctowns[i][0]; 

    var newIcon = new ol.Feature({ 
     geometry: new ol.geom.Point([lon,lat]) 
    }); 

    newIcon.setStyle(iconStyle); 
    vectorSource.addFeature(newIcon); 
}; 

Вы также можете заполнить массив с теми (newIcon) функций и инициализировать vectorLayer после цикла и передать этот массив к нему.