Mer

Lägg till / ta bort markörer

Lägg till / ta bort markörer


Jag försöker lägga till / ta bort markörer på en broschyrkarta. Jag har 6 kryssrutor, vad jag vill är att när jag markerar någon av dem visar punkterna på kartan, och när du avmarkerar en av dem är det enda att ta bort den som jag avmarkerar.

Vad jag har,

Kryssrutorna:

.row .col-md-12 .row label.col-md-7 Kontrollera först input.col-md-1 (typ = "kryssruta" ng-model = "locations.somecheck1") .row label.col-md- 7 Andra kontrollinmatning.col-md-1 (type = "checkbox" ng-model = "locations.somecheck2") .row label.col-md-7 Tredje check input.col-md-1 (type = "checkbox" ng-model = "locations.somecheck3") .row label.col-md-7 Fjärde checkinmatning. col-md-1 (typ = "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 = " kryssruta "ng-model =" locations.somecheck6 ")

Styrenheten:

$ 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);});} annat {leafletData.getMap () .then (funktion (karta) {map.removeLayer (objetosLayer);});}}, sant);

Funktionen som skapar lagret:

funktion getEpc (objekt, ikon) {var objectsLayer = L.geoJson (objekt, {pointToLayer: funktion (objekt, latlng) {var resultat; om (ikon! == odefinierad) {resultat = L.marker (latlng, {ikon: ikon});} annat {resultat = L.marker (latlng);} returnera resultat;}}); leafletData.getMap (). sedan (funktion (karta) {objectsLayer.addTo (karta);}); }

I klockfunktionen är borttagningsfunktionen som aktiveras när kryssrutan är felaktig. Om jag markerar kryssrutan 2 skapar funktionen båda, men när jag vill ta bort den första tar jag bara bort den andra kryssen. Jag tittade och upptäckte att varje gång jag klickar på en kryssruta skapar det ett nytt lager med den nya informationen.

Hur kan jag automatiskt skapa ett lager för varje kryssruta i funktionen getEpc?


Spara en referens till dina objektlager och ta bort dem innan du lägger till dem igen för att undvika dubbletter. Det verkar som att du redan var på rätt väg, men din nuvarandeobjectsLayerhar ett omfång inutigetEpc ()... du måste definiera detta på en högre nivå och du måste behålla ett separat lager för varje kryssruta.

Observera att Leaflet redan stöder detta koncept out-of-box med hjälp av Layers-kontrollen. Du kan skapa överlägg, lägga till dem i lagerkontrollen och använda kryssrutorna för att automatiskt växla mellan lagren, som lägger till och tar bort dem åt dig.

Men om du vill göra det själv måste du göra några saker:

Ändra förstgetEPC ()för att returnera en referens till det nya lagret:

funktion getEpc (objekt, ikon) {var objectsLayer = L.geoJson (objekt, {pointToLayer: funktion (objekt, latlng) {var resultat; om (ikon! == odefinierad) {resultat = L.marker (latlng, {ikon: ikon});} annat {resultat = L.marker (latlng);} returnera resultat;}}); leafletData.getMap (). sedan (funktion (karta) {objectsLayer.addTo (karta);}); // returlagerreferens så att vi kan hantera den returnerar objectsLayer; }

Sedan måste du hantera lagren när du lägger till och tar bort dem.

Obs: det blir mycket tråkigt att göra detta för varje kryssruta ... du kanske vill använda enwatchGroupellerwatchCollectionistället. Men för att hålla exemplet enkelt försökte jag använda din kod utan att göra större ändringar:

// global cache för överlägg. // du kanske vill sätta det här någonstans bättre, men att hålla exemplet enkelt ... 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); // få nytt lager / / spara lagerreferens så att den kan tas bort senare överlägg ["somecheck1"] = objectsLayer;});} annars om (overlays ["somecheck1"]) {leafletData.getMap (). sedan (funktion (karta) {map.removeLayer (överlägg ["somecheck1"]); // ta bort cachat lager});}}, sant); $ 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); // få nytt lager / / spara lagerreferens så att den kan tas bort senare överlagringar ["somecheck2"] = objectsLayer;});} annars om (overlays ["somecheck2"]) {leafletData.getMap (). sedan (funktion (karta) {map.removeLayer (överlägg ["somecheck2"]);});}}, sant);

// etc, för varje kryssruta (men föredrar att omforma till mindre, återanvändbara metoder)


Titta på videon: Lägg till. ta bort användare i Google Analytics