أكثر

إضافة / إزالة علامات


أحاول إضافة / إزالة العلامات إلى خريطة المنشورات. لدي 6 مربعات اختيار ، ما أريده هو أنه عندما أضع علامة في أي منها ، أظهر النقاط في الخريطة ، وعندما ألغ تحديد أحدها ، فإن الخيار الوحيد الذي يجب إزالته هو المربع الذي ألغ تحديده.

ماذا املك،

مربعات الاختيار:

.row .col-md-12 .row label.col-md-7 تحقق أولاً من input.col-md-1 (type = "checkbox" ng-model = "locations.somecheck1") .row label.col-md- 7 ثانية تحقق من input.col-md-1 (type = "checkbox" ng-model = "locations.somecheck2") .row label.col-md-7 فحص الإدخال الثالث.col-md-1 (النوع = "مربع اختيار" ng-model = "locations.somecheck3") .row label.col-md-7 تحقق رابعًا من input.col-md-1 (type = "checkbox" ng-model = "locations.somecheck4") .row label.col- md-7 خمسة تحقق من input.col-md-1 (type = "checkbox" ng-model = "locations.somecheck5") .row label.col-md-7 ستة تحقق من input.col-md-1 (type = " checkbox "ng-model =" locations.somecheck6 ")

المتحكم:

$ scale. $ watch ('sites.somecheck1'، function (somecheck1) {if ($ scale.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)؛})؛} آخر {leafletData.getMap (). ثم (الوظيفة (الخريطة) {map.removeLayer (objetosLayer) ؛}) ؛}} ، صحيح) ؛

الوظيفة التي تنشئ الطبقة:

function getEpc (items، icon) {var objectLayer = 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) {objectLayer.addTo (map)؛})؛ }

في وظيفة الساعة ، هي وظيفة الإزالة التي يتم تنشيطها عندما يكون مربع الاختيار خاطئًا. إذا قمت بتحديد مربع الاختيار 2 ، تقوم الوظيفة بإنشاء كليهما ، ولكن عندما أرغب في إزالة الخيار الأول ، يتم إزالة الاختيار الثاني فقط. نظرت ووجدت أنه في كل مرة أنقر فيها على مربع اختيار ، فإنه ينشئ طبقة جديدة بالمعلومات الجديدة.

كيف يمكنني إنشاء طبقة تلقائيًا لكل مربع اختيار في دالة getEpc؟


احفظ مرجعًا لطبقة (طبقات) الكائن الخاصة بك ثم قم بإزالتها قبل إعادة الإضافة لتجنب التكرار. يبدو أنك كنت بالفعل على المسار الصحيح ، ولكنك الحاليكائنات طبقةلديه نطاق في الداخلgetEpc ()... تحتاج إلى تعريف هذا على مستوى أعلى ، وتحتاج إلى الاحتفاظ بطبقة منفصلة لكل خانة اختيار.

لاحظ أن المنشور يدعم بالفعل هذا المفهوم خارج الصندوق باستخدام عنصر التحكم في الطبقات. يمكنك إنشاء تراكبات وإضافتها إلى عنصر التحكم في الطبقات واستخدام مربعات الاختيار لتبديل الطبقات تلقائيًا ، مما سيؤدي إلى إضافتها وإزالتها لك.

ومع ذلك ، إذا كنت تريد القيام بذلك بنفسك ، فأنت بحاجة إلى القيام ببعض الأشياء:

أولا ، قم بالتعديلgetEPC ()لإرجاع مرجع إلى الطبقة الجديدة:

function getEpc (items، icon) {var objectLayer = 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) {objectLayer.addTo (map)؛})؛ // إرجاع مرجع الطبقة حتى نتمكن من إدارته إرجاع objectLayer ؛ }

بعد ذلك ، تحتاج إلى إدارة الطبقات أثناء إضافتها وإزالتها.

ملاحظة: سيصبح القيام بذلك مملاً للغاية لكل مربع اختيار ... قد ترغب في استخدام ملفمشاهدة المجموعةأومشاهدة المجموعةفي حين أن. ولكن لتبسيط المثال ، حاولت استخدام الكود الخاص بك دون إجراء تعديلات كبيرة:

// ذاكرة تخزين مؤقت عالمية للتراكبات. // قد ترغب في وضع هذا في مكان ما بشكل أفضل ، ولكن مع إبقاء المثال بسيطًا ... var Overays = {}؛ $ scale. $ watch ('sites.somecheck1'، function (somecheck1) {if ($ scale.locations.somecheck1 === true) {findItem.find (function (err، items) {lastLocationItems = items [0] .items ؛ items = lastLocationItems.map ((item) => GeoService.toGeoJSON (item، {idKey: '_id'، geometryKey: 'lastLocation'})؛ var objectLayer = getEpc (items، ssccIcon)؛ // الحصول على طبقة جديدة / / حفظ مرجع الطبقة حتى يمكن إزالته لاحقًا التراكبات ["somecheck1"] = objectLayer؛})؛} else if (التراكبات ["somecheck1"]) {leafletData.getMap (). ثم (الوظيفة (الخريطة) {map.removeLayer (تراكبات ["somecheck1"]) ؛ // إزالة الطبقة المخبأة}) ؛}} ، صحيح) ؛ $ scale. $ watch ('sites.somecheck2'، function (somecheck1) {if ($ scale.locations.somecheck2 === true) {findItem.find (function (err، items) {lastLocationItems = items [0] .items ؛ items = lastLocationItems.map ((item) => GeoService.toGeoJSON (item، {idKey: '_id'، geometryKey: 'lastLocation'})؛ var objectLayer = getEpc (items، ssccIcon)؛ // الحصول على طبقة جديدة / / حفظ مرجع الطبقة حتى يمكن إزالته لاحقًا التراكبات ["somecheck2"] = objectLayer؛})؛} else if (التراكبات ["somecheck2"]) {leafletData.getMap (). ثم (الوظيفة (الخريطة) {map.removeLayer (تراكبات ["somecheck2"]) ؛}) ؛}} ، صحيح) ؛

// إلخ ، لكل خانة اختيار (لكن يفضل إعادة البناء إلى طرق أصغر قابلة لإعادة الاستخدام)