Daha çox

Marker əlavə edin / silin

Marker əlavə edin / silin


Vərəqə xəritəsinə işarələr əlavə etməyə / silməyə çalışıram. 6 onay qutum var, istədiyim budur ki, hər hansı birini yoxladığım zaman xəritədəki nöqtələri göstərim və onlardan birinin işarəsini götürdüyüm zaman silindiyim qutudur.

Nəyim var,

Onay qutuları:

.row .col-md-12 .row label.col-md-7 Əvvəlcə giriş yoxlayın .col-md-1 (type = "checkbox" ng-model = "locations.somecheck1") .row label.col-md- 7 İkinci giriş input.col-md-1 (type = "checkbox" ng-model = "locations.somecheck2") .row label.col-md-7 Üçüncü yoxlama input.col-md-1 (type = "checkbox" ng-model = "locations.somecheck3") .row label.col-md-7 dördüncü yoxlama input.col-md-1 (type = "checkbox" ng-model = "locations.somecheck4") .row label.col- md-7 Beş yoxlama girişi.col-md-1 (type = "checkbox" ng-model = "locations.somecheck5") .row label.col-md-7 Altı yoxlama girişi.col-md-1 (type = " onay qutusu "ng-model =" locations.somecheck6 ")

Nəzarətçi:

$ kapsam. $ watch ('locations.somecheck1', function (somecheck1) {if ($ kapsam.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 (). sonra (function (map) {map.removeLayer (objetosLayer);});}}, true);

Qatı yaradan funksiya:

function getEpc (items, icon) {var objectsLayer = L.geoJson (items, {pointToLayer: function (items, latlng) {var result; if (icon! == undefined) {result = L.marker (latlng, {icon: simge});} başqa {nəticə = L.marker (latlng);} nəticəni qaytarmaq;}}); leafletData.getMap (). sonra (function (map) {objectsLayer.addTo (map);}); }

Saat funksiyasında, onay qutusu yalnış olduqda aktivləşən silmək funksiyasıdır. 2 onay qutusunu qeyd etsəm, funksiya hər ikisini yaradır, ancaq birincisini silmək istədiyim zaman yalnız ikinci çeki silər. Baxdım və hər onay qutusuna vurduğumda yeni məlumatlarla yeni bir qat yaratdığını gördüm.

GetEpc funksiyasındakı hər onay qutusu üçün avtomatik olaraq necə bir qat yarada bilərəm?


Bir istinadı obyekt qatlarınıza qeyd edin və sonra təkrarlanmamaq üçün yenidən əlavə etmədən əvvəl onları silin. Deyəsən onsuz da doğru yolda idin, amma indikiobyektlər Layeriçərisində bir əhatə dairəsi vargetEpc ()… Bunu daha yüksək səviyyədə müəyyənləşdirməlisiniz və hər onay qutusu üçün ayrı bir təbəqə saxlamalısınız.

Qeyd edək ki, Leaflet bu konsepsiyanı Layers nəzarətindən istifadə edərək onsuz da dəstəkləyir. Bindirmələr yarada, onları qatlar nəzarətinə əlavə edə və qatları avtomatik olaraq dəyişdirmək üçün onay qutularını istifadə edə bilərsiniz.

Bununla birlikdə, təkbaşına etmək istəyirsinizsə, bir neçə şey etməlisiniz:

Əvvəlcə dəyişdiringetEPC ()yeni təbəqəyə istinad qaytarmaq üçün:

function getEpc (items, icon) {var objectsLayer = L.geoJson (items, {pointToLayer: function (items, latlng) {var result; if (icon! == undefined) {result = L.marker (latlng, {icon: simge});} başqa {nəticə = L.marker (latlng);} nəticəni qaytarmaq;}}); leafletData.getMap (). sonra (function (map) {objectsLayer.addTo (map);}); // qayıt qat referansı, beləliklə onu idarə edə bilərik return objectsLayer; }

Sonra, əlavə edərkən və çıxardığınızda qatları idarə etməlisiniz.

Qeyd: hər onay qutusu üçün bunu etmək çox yorucu olacaq ... istifadə etmək istəyə bilərsinizwatchGroupvə yawatchCollectionəvəzinə. Nümunəni sadə saxlamaq üçün kodunuzdan böyük dəyişiklik etmədən istifadə etməyə çalışdım:

// bindirmələr üçün qlobal önbellek. // bunu daha yaxşı bir yerə qoymaq istəyə bilərsiniz, amma nümunəni sadə tutaraq ... var overlays = {}; $ kapsam. $ watch ('locations.somecheck1', function (somecheck1) {if ($ kapsam.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); // new layer almaq / / daha sonra örtüklər ["somecheck1"] = objectsLayer;});} başqa halda (örtmələr ["somecheck1"]) {leafletData.getMap (). sonra (function (map) {map.removeLayer (örtüklər ["somecheck1"]); // önbelleğe alınmış təbəqəni çıxarın});}}, doğru); $ kapsam. $ watch ('locations.somecheck2', function (somecheck1) {if ($ kapsam.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); // new layer almaq / / daha sonra örtüklər ["somecheck2"] = objectsLayer;});} başqa halda (örtmələr ["somecheck2"]) {leafletData.getMap (). sonra (function (map) {map.removeLayer (bindirmeler ["somecheck2"]);});}}, doğru);

// və s., hər bir onay qutusu üçün (lakin daha kiçik, təkrar istifadə edilə bilən metodlarda yenidən işlənməyi üstün tutun)