Añadir/eliminar marcadores

Question

Estoy intentando añadir/quitar marcadores a un mapa de folletos. Tengo 6 casillas de verificación, lo que quiero es que al marcar cualquiera de ellas se muestren los puntos en el mapa, y al desmarcar una de ellas la única que se elimine sea la que desmarque.

Lo que tengo,

Las casillas de verificación:

.row
    .col-md-12
        .row
            label.col-md-7 First check
            input.col-md-1(type="checkbox" ng-model="locations.somecheck1")
        .row
            label.col-md-7 Second check
            input.col-md-1(type="checkbox" ng-model="locations.somecheck2")
        .row
            label.col-md-7 Third check
            input.col-md-1(type="checkbox" ng-model="locations.somecheck3")
        .row
            label.col-md-7 Fourth check
            input.col-md-1(type="checkbox" ng-model="locations.somecheck4")
        .row
            label.col-md-7 Five check
            input.col-md-1(type="checkbox" ng-model="locations.somecheck5")
        .row
            label.col-md-7 Six check
            input.col-md-1(type="checkbox" ng-model="locations.somecheck6")

El controlador:

$scope.$watch('locations.somecheck1', function(somecheck1) {

      if ($scope.locations.somecheck1 === true) {
        findItem.find(function(err, items) {

          lastLocationItems = items[0].items;
          items = lastLocationItems.map((item) => GeoService.toGeoJSON(item, { idKey: '_id', geometryKey: 'lastLocation'}));
          getEpc(items, ssccIcon);
        });
      } else {
        leafletData.getMap().then(function(map) {

          map.removeLayer(objetosLayer);
        });
      }
    }, true);

La función que crea la capa:

function getEpc(items, icon) {
      var objectsLayer = L.geoJson(items, {
        pointToLayer: function(items, latlng) {
          var result;

          if (icon !== undefined) {
            result = L.marker(latlng, {
              icon: icon
            });
          } else {
            result = L.marker(latlng);
          }

          return result;
        }
      });

      leafletData.getMap().then(function(map) {

        objectsLayer.addTo(map);
      });
    }

En la función de vigilancia, está la función de eliminación que se activa cuando el checkbox es falso. Si marco 2 checkbox, la función crea los dos, pero cuando quiero quitar el primero, sólo quita el segundo check. He mirado y he encontrado que cada vez que hago clic en un checkbox se crea una nueva capa con la nueva información.

¿Cómo puedo crear automáticamente una capa para cada casilla de verificación en la función getEpc?

Answer 1

Guarde una referencia a su(s) capa(s) objeto(s) y luego elimínela(s) antes de volver a añadirla(s) para evitar duplicados. Parece que ya estabas en el camino correcto, pero tu actual objectsLayer tiene un alcance dentro de getEpc() .. es necesario definir esto a un nivel superior, y es necesario mantener una capa separada para cada casilla de verificación.

Tenga en cuenta que Leaflet ya admite este concepto de forma inmediata mediante el uso de la función Control de capas . Puede crear superposiciones, añadirlas al control de capas y utilizar casillas de verificación para alternar automáticamente las capas, que las añadirán y eliminarán por usted.

Sin embargo, si quieres hacerlo por tu cuenta, tienes que hacer algunas cosas:

En primer lugar, modificar getEPC() para devolver una referencia a la nueva capa:

function getEpc(items, icon) {
  var objectsLayer = L.geoJson(items, {
    pointToLayer: function(items, latlng) {
      var result;
      if (icon !== undefined) {
        result = L.marker(latlng, {
          icon: icon
        });
      } else {
        result = L.marker(latlng);
      }
      return result;
    }
  });
  leafletData.getMap().then(function(map) {
    objectsLayer.addTo(map);
  });
  // return layer reference so we can manage it
  return objectsLayer;
}

A continuación, hay que gestionar las capas a medida que se añaden y eliminan.

Nota: será muy tedioso hacer esto para cada casilla de verificación.. puede querer utilizar un watchGroup o watchCollection en cambio . Pero para que el ejemplo sea sencillo, he intentado utilizar su código sin hacer grandes modificaciones:

// global cache for overlays. 
// you may want to put this somewhere better, but keeping example simple..
var overlays = {};

$scope.$watch('locations.somecheck1', function(somecheck1) {
  if ($scope.locations.somecheck1 === true) {
    findItem.find(function(err, items) {
      lastLocationItems = items[0].items;
      items = lastLocationItems.map((item) => GeoService.toGeoJSON(item, { idKey: '_id', geometryKey: 'lastLocation'}));
      var objectsLayer = getEpc(items, ssccIcon); // get new layer
      // save layer reference so it can be removed later
      overlays["somecheck1"] = objectsLayer; 
    });
  } else if(overlays["somecheck1"]) {
    leafletData.getMap().then(function(map) {
      map.removeLayer(overlays["somecheck1"]); // remove cached layer
    });
  }
}, true);

$scope.$watch('locations.somecheck2', function(somecheck1) {
  if ($scope.locations.somecheck2 === true) {
    findItem.find(function(err, items) {
      lastLocationItems = items[0].items;
      items = lastLocationItems.map((item) => GeoService.toGeoJSON(item, { idKey: '_id', geometryKey: 'lastLocation'}));
      var objectsLayer = getEpc(items, ssccIcon); // get new layer
      // save layer reference so it can be removed later
      overlays["somecheck2"] = objectsLayer; 
    });
  } else if(overlays["somecheck2"]) {
    leafletData.getMap().then(function(map) {
      map.removeLayer(overlays["somecheck2"]);
    });
  }
}, true);

// etc, para cada casilla de verificación (pero prefiero refactorizar en métodos más pequeños y reutilizables)