লিফলেট GeoJSON স্তর যুক্ত / সরানো হচ্ছে

Question

আমি লিফলেট এপিআই ব্যবহার করে বিভিন্ন জুম স্তরগুলিতে বিভিন্ন জিওজেএসন স্তর দেখানোর চেষ্টা করছি। আমি একবারে তিনটি স্তরই লোড করতে এবং প্রদর্শন করতে পারি (যদিও আমি চাই না যে সেগুলি একবারে প্রদর্শন করা উচিত)। আমি এগুলি লোড ও বিভিন্ন জুম স্তরে প্রদর্শন করতে পারি।

আমার কোডটি সেট আপ হয়েছে যাতে জুম স্তরের 1-6 এ, মানচিত্রটিতে একটি জিওজেএসন স্তর প্রদর্শিত হবে। 7-10 স্তরে এটি অন্যটি দেখায় এবং 11+ স্তরে এটি তৃতীয়টি দেখায়। তাদের প্রদর্শন কাজ করে। আমি এখন যা কাজ করার চেষ্টা করছি তা যদি অন্য কেউ প্রদর্শিত হয় তবে তা অন্যদের বন্ধ করে দিচ্ছে। 1-6 থেকে 7-10 কাজ করে (যার অর্থ এটি 1-6 স্তরটি সঠিকভাবে বন্ধ করে দেয়), তবে এটি 7-10 থেকে 11+ পর্যন্ত নয় (অর্থাত্ 7-10 স্তরটি চারদিকে লাঠি ধরে থাকে) এবং আমি অনুমান করতে পারি না বাইরে কেন (এটি একই কোড ব্যবহার করে)।

জিওজেএসএন স্তরগুলির জন্য এজাক্স এখানে:

function getJson(defaultStyle, map, simp, geojsonLayer){
var url = 'file' + simp + '.json';
map.removeLayer(geojsonLayer);
geojsonLayer.clearLayers();
$.getJSON(url, function(data){
    geojsonLayer = L.geoJson(data, {
        style: defaultStyle,
        onEachFeature: onEachFeature
    });
    geojsonLayer.addTo(map);
});
}

এবং এখানে মূল ফাংশন যা জুমের উপর নির্ভর করে এজাক্সকে কল করে। সিম্পকাউন্টারটি প্রাথমিকভাবে 0 তে সেট করা আছে।

map.on('zoomend', function(e) {
if (map.getZoom() >= 7 && map.getZoom() <= 10) {
    if (simpCounter == 0 || simpCounter == 2) {
    getJson(defaultStyle, map, 60, geojsonLayer);
    simpCounter = 1;
    }
} else if (map.getZoom() >= 11) {
    if (simpCounter == 0 || simpCounter == 1) {
    getJson(defaultStyle, map, 35, geojsonLayer);
    simpCounter = 2;
    }
}
});

সুতরাং আবারও, প্রথম রূপান্তরটি পুরানো স্তরটিকে সঠিকভাবে বন্ধ করে দেয়, তবে দ্বিতীয় রূপান্তরটি তা করে না। সাহায্যের জন্য ধন্যবাদ.

Comments

কেবল পরিষ্কার করার জন্য, এটি 11+ এর জন্য জসনটি চালু করছে এবং 7-10 বন্ধ করছে না?

— রোমাএইচ

ঐটা ঠিক.

— জোশ

Answer 1

পরিবর্তে এটি চেষ্টা করুন:

function getJson(simp){  //Removed unneeded arguments here
    var url = 'file' + simp + '.json';
    map.removeLayer(geojsonLayer);
    //geojsonLayer.clearLayers();  I don't believe this needed.
    $.getJSON(url, function(data){
        geojsonLayer = L.geoJson(data, {
            style: defaultStyle,
            onEachFeature: onEachFeature
        });
        geojsonLayer.addTo(map);
    });
}

এবং আপনার কলিং ফাংশনের জন্য:

map.on('zoomend', function(e) {
    if (map.getZoom() >= 7 && map.getZoom() <= 10) {
        if (simpCounter == 0 || simpCounter == 2) {
        getJson(60);
        simpCounter = 1;
        }
    } else if (map.getZoom() >= 11) {
        if (simpCounter == 0 || simpCounter == 1) {
        getJson(35);
        simpCounter = 2;
        }
    } else if (map.getZoom() <= 7) { //Return to original data
        if (simpCounter == 1 || simpCounter == 2) {
        getJson(XX); //Fill out with correct file name
        simpCounter = 0;
        }
    }
});

আপনি যখন যুক্তিগুলি পাস করছেন map, geojsonLayerএবং defaultStyleকলটিতে getJson(defaultStyle, map, 60, geojsonLayer);আপনি বস্তুর নতুন দৃষ্টান্ত তৈরি করছেন। তারপরে আপনি সেই উদাহরণগুলিতে কাজ সম্পাদন করেন যা পর্দার প্রতিচ্ছবি ঘটতে পারে তবে এটি একবার 'মূল লুপ' এ ফিরে আসার পরে এটি মূলত যা কিছু করেছিল তা ভুলে যায় এবং আগের অবস্থায় ফিরে আসে।

যেহেতু আমি অনুমান করছি যে আপনি সংজ্ঞায়িত defaultStyle, mapএবং geojsonLayerবৈশ্বিক পরিসরে প্রাথমিক জনসংখ্যা আপনাকে কেবল তাদের কল করতে হবে, তাদের পাস করার দরকার নেই। সমন্বয়গুলি দিয়ে আমি এটি বিশ্বব্যাপী mapপরিবর্তন করেছি তাই ফাংশন কলগুলি শেষ হওয়ার পরেও পরিবর্তনগুলি স্থির থাকে।

এই সমাধানটি আমার পক্ষে কাজ করেছিল। আমি এখানে তৈরি করা সমস্ত ফাইল সামগ্রী দেখতে পারেন: http://pastebin.com/yMYQJ2jK

আমি 1-7 এর জন্য একটি চূড়ান্ত জুম স্তরও সংজ্ঞায়িত করি যাতে আপনি প্রাথমিক জুম স্তরে ফিরে আসার সময় আপনাকে প্রাথমিক JSON ডেটা দেখতে পাবেন, অন্যথায় এটি হারিয়ে যায় এবং আপনি যদি পৃষ্ঠাটি পুনরায় লোড না করেন তবে কখনই ফিরে আসবে না!

Comments

ধন্যবাদ। আমি বুঝতে পারিনি যে ভেরিয়েবলগুলি পাস করা অস্থায়ী দৃষ্টান্ত তৈরি করে।

— জোশ

হ্যাঁ, আপনি যেভাবে পরিবর্তনটি করছেন সেগুলি রাখার একমাত্র উপায় হ'ল এটি একটি returnবিবৃতি দিয়ে ফিরিয়ে দেওয়া । জাভাস্ক্রিপ্টে গ্লোবালগুলি ব্যবহার করা সাধারণ বলে মনে হচ্ছে, সুতরাং এইভাবে করা আপনার কাজ শেষ করা সবচেয়ে সহজ হবে।

— রোমাএইচ

এটা বোধগম্য. গ্লোবাল ব্যবহার না করার জন্য আমি সম্প্রতি একটি সেরা অনুশীলনের বইতে পড়েছিলাম, তবে দৃশ্যত আমি বিকল্পটির অপব্যবহার করছি। ধন্যবাদ।

— জোশ

সমস্ত প্রোগ্রামিং ভাষায় গ্লোবাল ব্যবহার না করা ভাল অনুশীলন, বাগগুলি ট্র্যাক করা সহজ। তবে সেরা অনুশীলন হ'ল থাম্বের নিয়ম। বেশিরভাগ জাভাস্ক্রিপ্ট-ইন-পৃষ্ঠা ব্যবহারগুলি যথেষ্ট হালকা বলে মনে হচ্ছে যে পার্শ্ব প্রতিক্রিয়াগুলি সহজেই পরিচালনা করা যায়। আপনি যদি একটি সম্পূর্ণ মডিউল বা বাহ্যিক জেএস লিখছেন তবে আমি গ্লোবালগুলি এড়াতে চাই।

— রোমাএইচ

Answer 2

লিফলেটে একটি স্তরগোষ্ঠী সংগ্রহের ধরণের ডেটা স্ট্রাকচার এবং একটি স্তর নিয়ন্ত্রণ ইন্টারফেস রয়েছে যা আপনি চেকবক্সে ইভেন্ট শ্রোতা হিসাবে কোড করার পরে আপনি টগল করতে এবং অন করতে পারেন।

Answer 3

গুণিতক জিওজেএসএন স্তরটি কীভাবে সরাতে হয় তা দেখানোর জন্য আমি নীচের উদাহরণটি লিখেছিলাম।

///adding geoJSON data

          var myGeoJSON = L.geoJSON(myData, {

            onEachFeature: function (feature, layer) {
                layer.myTag = "myGeoJSON"
            }

        });


////// function to remove geoJSON layers 

    var removeMarkers = function() {
        map.eachLayer( function(layer) {

          if ( layer.myTag &&  layer.myTag === "myGeoJSON") {
            map.removeLayer(layer)
              }

            });

    }

//// calling function 

removeMarkers();