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和數組傳遞給它。