使用弹出窗口在 OpenLayers 5 上动态显示多个标记 window

Question

我正在尝试在地图上显示两个已保存在数组中的标记。我希望标记动态显示，并为每个标记弹出 window。这是我根据上一个问题编写和编辑的代码。我在地图上没有显示任何内容，有人可以解决这个问题吗？我尝试了很多方法，但似乎没有任何效果。我真的是地图新手。

/* 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
    })
});

//create an empty vectorSrc
var vectorSource = new ol.source.VectorSource();

var layer = new ol.layer.Vector({
    source: vectorSource,
    style: 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
        })
    })
});
for(var i=0; i < arrayPos.length; i++) {
    var long = arrayPos[i][0]
    var lat = arrayPos[i][1];
    var batteryCharge = arrayPos[i][3];
    
    // create a new feature with the positon values from the array
    var feature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([long, lat]))
    })

    //Batterycharge value is going to be printed in the Pop-up window
    feature.set('batteryCharge', batteryCharge);
    vectorSource.add(feature);
}
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);
    }
});

Answer 1

event.target.getFeatures() 用于 select 交互。对于地图上的 pointermove，请尝试替换

if (map.hasFeatureAtPixel(event.pixel) === true) {  
    var coordinate = event.coordinate;
    const features = event.target.getFeatures();
    const batteryCharge  = features.get(0).get('batteryCharge');

和

const features = map.getFeaturesAtPixel(event.pixel);
if (features.length > 0) {
    var coordinate = event.coordinate;
    const batteryCharge = features[0].get('batteryCharge');

使用弹出窗口在 OpenLayers 5 上动态显示多个标记 window

Display Multiple Markers on OpenLayers 5 dynamically with Pop-up window

javascript

openlayers

openstreetmap