Javascript 如何在PruneCluster上使用ajax

我使用ajax每10秒更新一次标记的位置

我有新标记的位置更新，但它似乎没有删除上一个标记的图层。新的记号笔在旧记号笔的上面继续画着，它们仍然在那里。 我不断地在旧的基础上得到新的标记和聚类图。我想知道如何删除之前的标记，然后使用新的标记

我对你的代码做了一些更新

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

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

const map=L.map（“map”{
属性控制：false，
动物控制：错误
}).setView（新L.LatLng（59.911111,10.752778），4）；
L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
特雷蒂娜侦探：是的，
maxNativeZoom:17
}).addTo（地图）；
让标记=[]；
常量传单视图=新的PruneClusterForLeaflet（）；
FlookeView.BuildFlookeClusterIcon=函数（群集）{
var e=新的L.Icon.MarkerCluster（）；
e、 stats=cluster.stats；
e、 人口=cluster.population；
cluster.ENABLE_MARKERS_LIST=true
返回e；
};
常数更新=（）=>{
$.ajax({
网址：'https://wanderdrone.appspot.com/',
dataType:'json'，//服务器响应的预期数据类型。
成功：功能（数据）{
const myServerData=data；//服务器响应
控制台日志（数据）；
setView（新的L.LatLng（（myServerData.geometry.coordinates[1]），（myServerData.geometry.coordinates[0]），12）
/**检查地图上是否已存在标记*/
const-markerareadyexists=checkIfMarkerExists（myServerData.id）；//假设您的响应有id，否则您可以生成随机UUID。
开关（MarkeraReadyExists）{
大小写正确：
const existingMarker=getExistingMaker（myServerData.id）；
existingMarker.position.lat=myServerData.geometry.coordinates[1]；
existingMarker.position.lng=myServerData.geometry.coordinates[0]；
ProcessView（）；
打破
案例错误：
const marker=new PruneCluster.marker（（myServerData.geometry.coordinates[1]），（myServerData.geometry.coordinates[0]）；
标记器。推（标记器）；
传单视图。登记标记器（标记器）；
ProcessView（）；
打破
}
}
})
。然后（函数（）{//完成后，重新启动
setTimeout（更新，10000）；//函数引用自身
});
}
更新（）//调用更新函数
map.addLayer（单张视图）；
/**
*函数检查标记数组中是否存在标记
* ----------------------------------------------------
*@param{String}id
*/
常量checkIfMarkerExists=id=>{
让存在=虚假；
for（常量现有标记的标记）{
if（existingMarker.data.id==id）{
存在=真；
}
}
回报存在；
};
/**
*函数从标记数组中检索现有标记
* ---------------------------------------------------------
*@param{String}id
*/
const getExistingMaker=id=>{
让markerObject=newobject（）；
for（常量现有标记的标记）{
if（existingMarker.data.id==id）{
markerObject=现有标记；
}
}
返回markerObject；
}

html，
身体
#地图{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
字体系列：无衬线；
}
分区大小，
a#删除{
位置：绝对位置；
右：1em；
顶部：1米；
背景：白色；
颜色：黑色；
填充：0.4em；
边界半径：4px；
z指数：500；
}

PruneCluster-AjAX

尝试此链接：

https://stackoverflow.com/a/24331645/5737771

下面是删除所有标记的示例：然而，我的示例项目使用websocket通过离心机.js使用后端服务中的数据

       (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
            });
    })();