Javascript/Openlayers forループが動作しない

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を初期化し、それにその配列を渡すことができます：

私は、コードは次のようになりべきだと思います。