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

声明用于更新它们的方法/函数之外的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

1 个答案: