为什么我使用 OpenLayers 在两个弹出窗口中获得相同的文本

我正在使用 OpenLLayers 5。我将经度、纬度和汽车名称保存在数据库中的数组中。我可以显示两个标记（我的数组目前只有两个索引）。每个标记都有一个弹出窗口，其中应包含其名称、经度、纬度。例如，第一个标记的弹出窗口将汽车 1 作为文本。在我的例子中，汽车名称是 vehName。 我总是在两个弹出窗口上显示第二辆车的信息（这是我的数组的最后一个索引）。 有人可以帮我找到解决方案吗？

/* open street map newest version */
var map = new ol.Map({
    target: 'map', // the div id
    layers: [
        new ol.layer.Tile({
        source: new ol.source.OSM()
        })
    ],
    view: new ol.View({ 
        center: ol.proj.fromLonLat([4.35247, 52.520008]),
        zoom: 6,
        minZoom: 3
    })
});
for(var i=0; i < arrayPos.length; i++) {
    var long = arrayPos[i][0]
    var lat = arrayPos[i][1];
    var vehName = arrayPos[i][2];
    var batterCharge = arrayPos[i][3];
    console.log(batterCharge);
    // add a marker to the map
    var layer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [
                new ol.Feature({
                    geometry: new ol.geom.Point(ol.proj.fromLonLat([long, lat]))
                })  
            ]
        })
    });
    layer.setStyle(new ol.style.Style({
        image: new ol.style.Icon({
        src: 'https://wiki.openstreetmap.org/w/images/0/0c/Hgv.png', //
        scale: 0.4 // set the size of the vehicle on the map
        })
    }));
    map.addLayer(layer);
    //initialize the popup
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');

    var overlay = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    });
    map.addOverlay(overlay);

    //display the pop with on mouse over event
    map.on('pointermove', function (event) {
        if (map.hasFeatureAtPixel(event.pixel) === true) {  
            var coordinate = event.coordinate;
            //simple text written in the popup, values are just of the second index
            content.innerHTML = vehName+'<br><b>Batteriestatus: </b>'+batterCharge;//just the second one is getting displayed
            overlay.setPosition(coordinate);
        }
        else {
            overlay.setPosition(undefined);
        }
    });
}

编辑版！ 但仍然无法正常工作！ 有任何想法吗？

for(var i=0; i < arrayPos.length; i++) {
    //infos
    var long = arrayPos[i][0]
    var lat = arrayPos[i][1];
    var vehName = arrayPos[i][2];
    var batteryCharge = arrayPos[i][3];
    
    //create a feature
    var feature = new new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([long, lat]))
    })
    feature.set('batteryCharge', batteryCharge);
    vectorSource.add(feature);
}   
// add a marker to the map
var vectorSource = new ol.source.VectorSource();
var layer = new ol.layer.Vector({
    source: vectorSource({
        features: [feature]
    })
});

layer.setStyle(new ol.style.Style({
    image: new ol.style.Icon({
    src: 'https://wiki.openstreetmap.org/w/images/0/0c/Hgv.png', //
    scale: 0.4 // set the size of the vehicle on the map
    })
}));
map.addLayer(layer);

//initialize the popup
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');

var overlay = new ol.Overlay({
    element: container,
    autoPan: true,
    autoPanAnimation: {
        duration: 250
    }
});
map.addOverlay(overlay);

//display the pop with on mouse over event
map.on('pointermove', function (event) {
    if (map.hasFeatureAtPixel(event.pixel) === true) {  
        var coordinate = event.coordinate;
        const features = event.target.getFeatures();
        const batteryCharge  = features.get(0).get('batteryCharge');

        //simple text written in the popup, values are just of the second index
        content.innerHTML = event.traget+'<br><b>Batteriestatus: </b>'+batteryCharge;
        overlay.setPosition(coordinate);
    }
    else {
        overlay.setPosition(undefined);
    }
});

您正在循环中创建并覆盖图层和叠加层。 通常，您在循环外部创建矢量图层和矢量源，然后在创建要素的循环中，只需将它们添加到矢量源即可。 您还应该将电池充电信息等存储为功能中的属性，以便您可以通过 event.target 访问它们。 你还可以使用对于每个特征在像素 https://openlayersbook.github.io/ch08-interacting-with-your-map/example-03.html

Edit:// 这是 for 循环的示例。 Source是也在外部声明的vectorSource

for(var i=0; i < arrayPos.length; i++) {
    const long = arrayPos[i][0]
    const lat = arrayPos[i][1];
    const vehName = arrayPos[i][2];
    const batterCharge = arrayPos[i][3];
    console.log(batterCharge);
    
    var feature = new new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([long, lat]))
    }) 
    feature.set('batteryCharge', batterCharge)
    source.add(feature)

}

还有您的活动：

  //display the pop with on mouse over event
    map.on('pointermove', function (event) {
        if (map.hasFeatureAtPixel(event.pixel) === true) {  
            var coordinate = event.coordinate;
            const features = event.target.getFeatures()
            const batterCharge  = features.get(0).get('batteryCharge')
            //simple text written in the popup, values are just of the second index
            content.innerHTML = event.traget+'<br><b>Batteriestatus: </b>'+batterCharge;//just the second one is getting displayed
            overlay.setPosition(coordinate);
        }
        else {
            overlay.setPosition(undefined);
        }
    });