未使用 .removeLayer() 删除 Mapbox JS 标记

Question

我有一个函数可以使用 mapbox javascript 库成功地将标记添加到地图。但是，我希望该函数在添加两个新标记之前清除地图中的所有标记，以便一次只显示两个标记。

我在这里查看了其他 questions/answers，但到目前为止，其中 none 都有效；标记只是不断添加而不被删除。

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

function updateMarkers(d) {
  var featureLayer = L.mapbox.featureLayer();
  map.removeLayer(featureLayer);
    getCoordX = d.stn_f_c;
    getCoordX = getCoordX.split(",");
    getCoordY = d.stn_t_c;
  getCoordY = getCoordY.split(",");
    featureLayer = L.marker([getCoordX[0],getCoordX[1]], {
        icon: L.mapbox.marker.icon({
            'marker-size': 'large',
            'marker-symbol': 'bicycle',
            'marker-color': '#66CD00'
        })
    }).addTo(map);
  featureLayer += L.marker([getCoordY[0],getCoordY[1]], {
    icon: L.mapbox.marker.icon({
      'marker-size': 'large',
      'marker-symbol': 'bicycle',
      'marker-color': '#FF6666'
    })
  }).addTo(map);
}

提前感谢您的帮助。

Answer 1

'removeLayer' 方法只是从您的地图实例中删除图层并保持其完整，以便您稍后可以重新添加它。您需要调用 L.mapbox.FeatureLayer 的 clearLayers()，这将从图层中删除所有添加的功能：

featureLayer.clearLayers();

您还覆盖了引用 featureLayer，该引用包含您的层实例 L.Marker:

featureLayer = L.marker(...);

您在 featureLayer 引用（现在包含对第一个标记的引用）上使用 += 赋值运算符的下一个标记将不起作用。它用于添加值，而不是对象实例：

featureLayer += L.marker(...);

有两种方法可以将单个图层（标记、多边形等）添加到 featureLayer，使用 featureLayer 的 addLayer 方法，或使用对象的 addTo 方法正在尝试添加：

featureLayer.addLayer(marker);
// or
marker.addTo(featureLayer);

您正在做的另一件奇怪的事情是添加坐标。您将字符串值拆分为一个数组：

getCoordX = d.stn_f_c;
getCoordX = getCoordX.split(",");

现在（我假设）你有一个包含两个值的数组，然后你分别使用它们并再次创建一个数组：

L.marker([getCoordX[0],getCoordX[1]])

你可以跳过它，直接做：

L.marker(getCoordX)

其实是一样的。我已经清理了你的代码，但无法测试它，所以如果我犯了一个徒手的错误，请原谅我：

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

// Create empty layer
var featureLayer = L.mapbox.featureLayer().addTo(map);

function updateMarkers (d) {

    // Clear layer
    featureLayer.clearLayers();

    // Splitting the value and adding it in one go
    L.marker(d.stn_f_c.split(","), {
        icon: L.mapbox.marker.icon({
            'marker-size': 'large',
            'marker-symbol': 'bicycle',
            'marker-color': '#66CD00'
        })
    }).addTo(featureLayer); // Add to the featureLayer

    L.marker(d.stn_t_c.split(","), {
        icon: L.mapbox.marker.icon({
            'marker-size': 'large',
            'marker-symbol': 'bicycle',
            'marker-color': '#FF6666'
        })
    }).addTo(featureLayer);

}

希望对您有所帮助

未使用 .removeLayer() 删除 Mapbox JS 标记

Mapbox JS markers not being removed using .removeLayer()

javascript

leaflet

mapbox