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并将该数组传递给它。

Javascript / Openlayers for循环无法正常工作

1 个答案: