Javascript / Openlayers for loop不起作用

Javascript / Openlayers for loop not working

本文关键字：loop 不起作用 for Openlayers Javascript      更新时间：2023-09-26

我正在使用 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/

您需要在

for循环之外初始化vectorLayer，以便映射初始化可以访问该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并将该数组传递给它。

相关文章：