在添加新标记和折线之前删除旧标记和折线 - Mapbox

Question

鉴于 Mapbox 的以下代码，我正在绘制点和多个点之间的多段线。用户将选择不同的选择，其结果将替换地图上的图钉。然后将使用多段线以正确的顺序将这些引脚绘制在一起。

$.post('_posts/get-pins.php', {traveller: $(this).val()}, function(data){

var featureLayer = L.mapbox.featureLayer().addTo(map);

var featureCollection = {
    "type": "FeatureCollection",
    "features": []
};

var lineArray = [];

$.each(data, function (k, item) {
    featureCollection.features.push({
        "type": "Feature",
        "properties": {
            "id": item.id,
            "title": item.title,
            "description": item.description,
            "image": item.image,
            "marker-symbol": "star",
            "marker-color": "#ff8888",
            "marker-size": "large"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                item.long,
                item.lat
            ]
        }
    });

    lineArray[item.id] = [item.lat, item.long];
});

featureLayer.setGeoJSON(featureCollection);

lineArray = lineArray.filter(function(){return true});


var polyline = L.polyline(lineArray).addTo(map);

},'json');

所以我需要在绘制新的之前删除多段线和标记。我尝试了 map.removeLayer(xxx) 的多种组合，用正在创建的许多变量替换 xxx，但我设法做的就是删除标记。它只是保持多段线完好无损，只是堆叠多段线层。

Answer 1

在您用来更新它们的 method/function 之外声明 featureLayer 和折线的变量：

var featureLayer, polyline;

在函数中，检查变量 featureLayer 是否已经是 FeatureLayer 的实例然后清除它的图层，如果不是则创建新图层：

if (featureLayer instanceof L.mapbox.FeatureLayer) {
    featureLayer.clearLayers();
} else {
    featureLayer = L.mapbox.featureLayer().addTo(map);
}

对于折线，你必须以不同的方式来做，因为它没有清除所有添加点的功能，只需检查它是否是 L.Polyline 的实例，如果是，请使用L.Map 的 removeLayer 方法，然后定义一条新折线：

if (polyline instanceof L.Polyline) {
    map.removeLayer(polyline);
}

polyline = L.polyline([]).addTo(map);

Plunker 上的工作示例：http://plnkr.co/edit/7nlgiA50NuPGsQOF0Fv4?p=preview

在添加新标记和折线之前删除旧标记和折线 - Mapbox

Removing old markers and Polylines before adding new ones - Mapbox

javascript

maps

mapbox