Question

我使用ajax每隔10秒使用PruneCluster

更新标记的位置

       (function update() {
        $.ajax({
            url: 'https://wanderdrone.appspot.com/',
            dataType: 'json',  //The data type expected of the server response.
            success: function (data) {

                var leafletView = new PruneClusterForLeaflet();
                leafletView.BuildLeafletClusterIcon = function (cluster) {
                    var e = new L.Icon.MarkerCluster();
                    e.stats = cluster.stats;
                    e.population = cluster.population;
                    cluster.ENABLE_MARKERS_LIST = true
                    return e;
                };

                var markers = [];
                var myServerData = data;  //server response
                console.log(data);
                map.setView(new L.LatLng((myServerData.geometry.coordinates[1]), (myServerData.geometry.coordinates[0])), 12)
                var marker = new PruneCluster.Marker((myServerData.geometry.coordinates[1]), (myServerData.geometry.coordinates[0]));
                markers.push(marker);
                leafletView.RegisterMarker(marker);
                leafletView.ProcessView();
                map.addLayer(leafletView)

            }

        })
            .then(function () {           // on completion, restart
                setTimeout(update, 10000);  // function refers to itself
            });
    })();

我有新标记的位置更新，但似乎没有删除上一个标记的图层。新标记一直在旧标记之上，它们仍在那里。我不断获得旧标记和集群绘图。我想知道如何删除之前的标记并使用新的标记。

Answer 1

我已经对您的代码进行了一些更新。

我看到您正在为每个ajax请求创建一个新数组，并同时创建一个新标记。这里发生的事情是您不必不必要地更新群集标记，而只是创建标记的新实例，这可以解释为什么新标记被绘制在前一个标记上。

对我有用的最佳方法是，首先将数组初始化为全局变量，然后在从ajax请求创建标记之前，检查数组中是否已存在该标记的实例（已实现）通过使用 marker.data 对象为标记分配ID）。如果不存在，则创建它，如果存在，则更新它。

npm install

const map = L.map("map", {
  attributionControl: false,
  zoomControl: false
}).setView(new L.LatLng(59.911111, 10.752778), 4);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  detectRetina: true,
  maxNativeZoom: 17
}).addTo(map);

let markers = [];
const leafletView = new PruneClusterForLeaflet();

leafletView.BuildLeafletClusterIcon = function(cluster) {
  var e = new L.Icon.MarkerCluster();
  e.stats = cluster.stats;
  e.population = cluster.population;
  cluster.ENABLE_MARKERS_LIST = true
  return e;
};

const update = () => {
  $.ajax({
      url: 'https://wanderdrone.appspot.com/',
      dataType: 'json', //The data type expected of the server response.
      success: function(data) {

        const myServerData = data; //server response
        console.log(data);
        map.setView(new L.LatLng((myServerData.geometry.coordinates[1]), (myServerData.geometry.coordinates[0])), 12)

        /** Check if Marker Already Exists On Map */
        const markerAlreadyExists = checkIfMarkerExists(myServerData.id); //assuming your responses have ids. Else u can just generate random uuids.

        switch (markerAlreadyExists) {
          case true:
            const existingMarker = getExistingMaker(myServerData.id);
            existingMarker.position.lat = myServerData.geometry.coordinates[1];
            existingMarker.position.lng = myServerData.geometry.coordinates[0];
            leafletView.ProcessView();
            break;
          case false:
            const marker = new PruneCluster.Marker((myServerData.geometry.coordinates[1]), (myServerData.geometry.coordinates[0]));
            markers.push(marker);
            leafletView.RegisterMarker(marker);
            leafletView.ProcessView();
            break;
        }

      }

    })
    .then(function() { // on completion, restart
      setTimeout(update, 10000); // function refers to itself
    });
}
update(); //INVOKE UPDATE FUNCTION

map.addLayer(leafletView);


/**
 * FUNCTION TO CHECK IF A MARKER EXISTS IN MARKER ARRAY
 * ----------------------------------------------------
 * @param {String} id
 */
const checkIfMarkerExists = id => {
  let exists = false;
  for (const existingMarker of markers) {
    if (existingMarker.data.id === id) {
      exists = true;
    }
  }
  return exists;
};


/**
 * FUNCTION TO RETRIEVE AN EXISTING MARKER FROM MARKER ARRAY
 * ---------------------------------------------------------
 * @param {String} id
 */
const getExistingMaker = id => {
  let markerObject = new Object();
  for (const existingMarker of markers) {
    if (existingMarker.data.id === id) {
      markerObject = existingMarker;
    }
  }
  return markerObject;
}

html,
body,
#map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

div#size,
a#delete {
  position: absolute;
  right: 1em;
  top: 1em;
  background: white;
  color: black;
  padding: 0.4em;
  border-radius: 4px;
  z-index: 500;
}

You can clone and take a look at this simple spring-boot project on my github

如何在PruneCluster上使用ajax

1 个答案: