أكثر

كيف يمكنني إضافة طبقة جديدة ، ثم إزالة الطبقة السابقة من خريطة Leaflet / CartdoDB بدون أن تمسح الخريطة كل شيء

كيف يمكنني إضافة طبقة جديدة ، ثم إزالة الطبقة السابقة من خريطة Leaflet / CartdoDB بدون أن تمسح الخريطة كل شيء


أنا جديد في CartoDB / Leaflet. هنا كمانتي ... http://jsfiddle.net/zippyferguson/fLkqgf4q/1/

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

removeAllLayersExcept (طبقة) ؛

... هذه الوظيفة هي محاولة لإزالة جميع الطبقات على الخريطة باستثناء تلك التي تم تحميلها للتو.

ولكن ، مع تعليق removeAllLayersExcept (layer) ، فإن ذلك يستمر في وضع المزيد من الطبقات على الخريطة. لا أفهم لماذا تمسح الخريطة بأكملها كل تكرار.


لا تقوم بإزالة الطبقة (الطبقات) السابقة بشكل صحيح إلا بمجرد استلام البيانات الخاصة بالطبقة الجديدة ، ولكن ليس المربعات (الصور) الخاصة بها. هذا هو سبب ظهور خريطتك فارغة لفترة قصيرة.

يمكنك أولا إرفاق الخاص بكremoveAllLayersExceptرد الاتصال إلى "حمل"حدث طبقة البلاط الجديدة.

يتم إطلاقه عندما تقوم طبقة التجانب بتحميل كل المربعات المرئية.

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

cartodb.createLayer (map، layerSource) .addTo (map) .done (الوظيفة (طبقة) {// removeAllLayersExcept (layer)؛ layer.once ("load"، function () {// قم بإزالة فقط بمجرد أن تحتوي طبقة البلاط الجديدة تنزيل جميع المربعات في منفذ العرض. removeAllLayersExcept (layer) ؛}) ؛ setTimeout (updateMap ، 1000) ؛}). خطأ (الوظيفة (يخطئ) {console.log ("error:" + err) ؛}) ؛ function removeAllLayersExcept (new_layer) {console.log ('new_layer._leaflet_id:' + new_layer._leaflet_id) ؛ var layer_index = 0 ؛ map.eachLayer (الوظيفة (الطبقة) {if (layer_index> 0 && layer._leaflet_id! = new_layer._leaflet_id) {console.log ('layer إزال:' + layer._leaflet_id)؛ //map.removeLayer(layer)؛ setTimeout (الوظيفة () {// أعط بعض الوقت قبل إزالة طبقة التجانب السابقة لأن طبقة جديدة ستظهر مع بعض الانتقالات. map.removeLayer (layer) ؛} ، 500) ؛} layer_index ++ ؛}) ؛ }

عرض: http://jsfiddle.net/fLkqgf4q/5/

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


للحصول على إصدار أقصر لأنني كنت بحاجة أيضًا إلى هذا ووجدت إصدارًا آخر:

map.eachLayer (الوظيفة (الطبقة) {إذا (مثيل الطبقة من L.GeoJSON) map.removeLayer (layer) ؛}) ؛

شاهد الفيديو: تعليم صنع بوابات الثلاث في ماين كرافت اول فيديو بالقناة