Javascript OpenLayers不会自动刷新地图上的图标

我目前在使用OpenLayers开发的web应用程序中遇到问题。它当前将API中的图标分配给OpenLayers地图，并在侧栏上显示分配给所述图标的信息。我试图让这些图标在地图上自动刷新，而不刷新页面，但遇到了一些问题。我已经通过控制台确认了一切都在更新，但是在此期间没有创建新图标。如果这里有人能提供帮助，我们将不胜感激。我已经在下面附上index.js的重要部分。第三个代码段来自API

Map index.js：

const { Client } = require('pg')
import "ol/ol.css";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import Map from "ol/Map";
import View from "ol/View";
import Overlay from 'ol/Overlay';
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { defaults as defaultControls, FullScreen } from "ol/control";
import OSM from "ol/source/OSM";
import { fromLonLat } from "ol/proj";
import StaticVector from "ol/source/Vector";
import VectorSource from "ol/source/Vector";
import { Icon, Style } from "ol/style";
import { type } from "os";
import { Stats } from "fs";

const newportLonLat = [-71.307607, 41.529193];
const mvpLonLat = [-100.622655, 38.051559];
const newportWebMercator = fromLonLat(mvpLonLat);

//const text = 'SELECT DISTINCT mmsi, MAX(basedatetime), lat, lon FROM public.vessels GROUP BY mmsi, lat, lon ORDER by MAX(basedatetime) DESC, mmsi, lat, lon'
var updateMap = setInterval(loadJSON, 3000)
function loadJSON() {
  var data_file = "http://localhost:3000/all";
  var http_request = new XMLHttpRequest();
  try{
     // Opera 8.0+, Firefox, Chrome, Safari
     http_request = new XMLHttpRequest();
  }catch (e) {
     // Internet Explorer Browsers
     try{
        http_request = new ActiveXObject("Msxml2.XMLHTTP");

     }catch (e) {

        try{
           http_request = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (e) {
           // Something went wrong
           alert("Your browser broke!");
           return false;
        }

     }
  }

  http_request.onreadystatechange = function() {

     if (http_request.readyState == 4  ) {
        // Javascript function JSON.parse to parse JSON data
        console.log(http_request);
        var jsonObj = JSON.parse(http_request.responseText);
        var allIcons = [];
        for(var i = 0; i < jsonObj.length - 1; i++){ 
          console.log("-----------")
          console.log("Latitude:  ", jsonObj[i]['lat'])
          console.log("Longitude: ", jsonObj[i]['lon'])
          console.log("ID: ", jsonObj[i]['mmsi'])

          var mmsi = jsonObj[i]['mmsi']
          var bdt = jsonObj[i]['basedatetime']
          var lat = jsonObj[i]['lat']
          var long = jsonObj[i]['lon']
          var sog = jsonObj[i]['sog']
          var cog = jsonObj[i]['cog']
          var heading = jsonObj[i]['heading']
          var name = jsonObj[i]['vesselname']
          var imo = jsonObj[i]['imo']
          var callSign = jsonObj[i]['callsign']
          var type = jsonObj[i]['vesseltype']
          var status = jsonObj[i]['status']
          var length = jsonObj[i]['length']
          var width = jsonObj[i]['width']
          var draft = jsonObj[i]['draft']
          var cargo = jsonObj[i]['cargo']

          if(mmsi == -999999) mmsi = "N/A"
          if(bdt == "") bdt = "N/A"
          if(lat == -999999) lat = "N/A"
          if(long == -999999) long = "N/A"
          if(sog == -999999) sog = "N/A"
          if(cog == -999999) cog = "N/A"
          if(heading == -999999) heading = "N/A"
          if(name == "") name = "N/A"
          if(imo == "") imo = "N/A"
          if(callSign == "") callSign = "N/A"
          if(type == -999999) type = "N/A"
          if(status == "") status = "N/A"
          if(length == -999999) length = "N/A"
          if(width == -999999) width = "N/A"
          if(draft == -999999) draft = "N/A"
          if(cargo == -999999) cargo = "N/A"

          var iconFeature = new Feature({
            geometry: new Point(fromLonLat([long, lat])),
            vMmsi: mmsi,
            vName: name,
            vType: type,
            vBDT: bdt,
            vLat: lat,
            vLong: long,
            vStatus: status,
            vSog: sog,
            vCog: cog,
            vHeading: heading,
            vImo: imo,
            vCallSign: callSign,
            vLength: length,
            vWidth: width,
            vDraft: draft,
            vCargo: cargo,
          });

          var iconStyle = new Style({
            image: new Icon(
              /** @type {olx.style.IconOptions} */ ({
                anchor: [0.5, 46],
                anchorXUnits: "fraction",
                anchorYUnits: "pixels",
                src: "https://i.imgur.com/P30vpnp.png",
                scale: 0.5

              })
            )
          });
          iconFeature.setStyle(iconStyle);
          allIcons.push(iconFeature);

        }

        var map = new Map({
          controls: defaultControls().extend([new FullScreen()]),

          layers: [
            new TileLayer({
              source: new OSM()
            }),
            new VectorLayer({
              style: function(feature) {
                return feature.get("style");
              },
              source: new VectorSource({ features: allIcons })

            })

          ],
          target: document.getElementById('map'),
          view: new View({
            center: newportWebMercator,
            zoom: 4
          })
        });
        var element = document.getElementById('popup');

var popup = new Overlay({
  element: element,
  positioning: 'bottom-center',
  stopEvent: false,
  offset: [0, -50]
});

map.addOverlay(popup);

// display popup on click
map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel,
    function(feature) {
      return feature;
    });
  if (feature) {
    console.log(feature.get('name'))
    document.getElementById("mmsi").innerHTML = feature.get('vMmsi');
    document.getElementById("name").innerHTML = feature.get('vName');
    document.getElementById("type").innerHTML = feature.get('vType');
    document.getElementById("bdt").innerHTML = feature.get('vBDT');
    document.getElementById("lat").innerHTML = feature.get('vLat');
    document.getElementById("long").innerHTML = feature.get('vLong');
    document.getElementById("status").innerHTML = feature.get('vStatus');
    document.getElementById("sog").innerHTML = feature.get('vSog');
    document.getElementById("cog").innerHTML = feature.get('vCog');
    document.getElementById("heading").innerHTML = feature.get('vHeading');
    document.getElementById("imo").innerHTML = feature.get('vImo');
    document.getElementById("callSign").innerHTML = feature.get('vCallSign');
    document.getElementById("length").innerHTML = feature.get('vLength');
    document.getElementById("width").innerHTML = feature.get('vWidth');
    document.getElementById("draft").innerHTML = feature.get('vDraft');
    document.getElementById("cargo").innerHTML = feature.get('vCargo');
    var coordinates = feature.getGeometry().getCoordinates();
    popup.setPosition(coordinates);
    $(element).popover({
      placement: 'top',
      html: true,
      content: feature.get('name')
    });
    $(element).popover('show');
  } else {
    $(element).popover('destroy');
  }
});

// change mouse cursor when over marker
map.on('pointermove', function(e) {
  if (e.dragging) {
    $(element).popover('destroy');
    return;
  }
  var pixel = map.getEventPixel(e.originalEvent);
  var hit = map.hasFeatureAtPixel(pixel);
  map.getTarget().style.cursor = hit ? 'pointer' : '';
});

     }
  }

  http_request.open("GET", data_file, true);
  http_request.send();
}
loadJSON();

---

感谢您的时间，非常感谢您提供的所有帮助

您能包含整个

Map index.js

文件吗。@Vivek刚刚编辑了这篇文章，现在就包含了它，很抱歉回复太晚。您可能需要调用

Map.render（）数据更新后。
app.get('/', (request, response) => {
    response.json({ info: 'Node.js, Express, and Postgres API' })
  })
var timer = setInterval(updateAPI, 15000);
function updateAPI(){
  app.get ('/all', db.allDisplay);
  console.log("API Updated")
}