লিফলেট.জেজে লেয়ার অর্ডার কীভাবে পরিবর্তন করবেন

Question

আমি লিফলেটে স্তরগুলির ক্রম পরিবর্তন করতে সক্ষম হতে চাই।

স্তর ক্রম পরিবর্তন করতে আমি দুটি লিফলেট প্লাগইন প্রয়োগ করার চেষ্টা করেছি।

প্রথমে আমি লিফলেট-কন্ট্রোল-অর্ডারলেয়ারগুলির চেষ্টা করেছি , যা কাজ করে বলে মনে হচ্ছে তবে লেয়ারগ্রুপগুলি সমর্থন করে না, এখানে আমার ফাইল করা বাগ রয়েছে ।

এরপরে আমি ম্যাপবিবকোড চেষ্টা করেছি , যা লেয়ারগ্রুপগুলিকে সমর্থন করে, তবে কাজ করে না বা বজায় থাকে বলে মনে হয় না।

এই বৈশিষ্ট্যটি কীভাবে প্রয়োগ করা যায় তার জন্য কারও কি কোনও পরামর্শ আছে?

Comments

সম্ভাব্য অনুরূপ: stackoverflow.com/questions/12848812/...

— nothingisnecessary

Answer 1

আপনি এটি কয়েকটি উপায়ে করতে পারেন (কমপক্ষে; আমি এটি এটিই করি):

1. layer.bringToFront()এবং layer.bringToBack()এগুলি কেবল একবারে একটি স্তর করবে এবং এটি কেবল সামনে বা পিছনে ঠেলে দেবে, এর মধ্যে নয়। সুতরাং আপনার পছন্দসই ক্রমে আপনার স্তরগুলি স্থাপন করা উচিত, আপনি যে স্তরটি নীচে থাকতে চান তা দিয়ে শুরু করুন এবং layer.bringToFront()প্রতিটি স্তরটিতে কল করুন।

2. আপনি স্তরটি সরিয়ে এবং পুনরায় যুক্ত করে এটিও করতে পারেন। এটি ধরণের বাজে অপব্যয় বলে মনে হচ্ছে, তবে যেহেতু যেভাবেই স্তরগুলি প্রতিস্থাপনের সময় মানচিত্রটি পুনরায় আঁকতে হবে, এটি সাধারণত কোনও চুক্তির চেয়ে বড় নয়।

এখানে একটি মোটামুটি জটিল ঝাঁকুনি যা সমস্যাটি চিত্রিত করে

মূলত আপনি সমস্ত স্তর মুছে ফেলুন এবং তারপরে এটিকে আরোহণের z-indexক্রমে পুনরায় যুক্ত করুন । সুতরাং আপনার সমস্ত ওভারলে স্তরগুলি লুপ করুন এবং কল করুন map.removeLayer(layer), তারপরে এগুলি আপনার পছন্দসই অনুসারে বাছাই করুন z-index, তারপরে এগুলি ব্যবহার করে পুনরায় যুক্ত করুন layer.addTo(map)।

Answer 2

আমার একই সমস্যা ছিল এবং আমি ফিক্স জর্ডার () পদ্ধতিটি চেষ্টা করেছিলাম, তবে দুঃখের বিষয় এটি লিফলেট চিহ্নিতকারীদের জিনডেক্সকে প্রভাবিত করে বলে মনে হচ্ছে না কারণ এটি আমার জন্য লিফ চিহ্নিতকারীদের অর্ডার দেয় নি।

দেখে মনে হচ্ছে .bringToFront () কেবল ভেক্টর আকারে কাজ করে যা এই পদ্ধতিটিকে সমর্থন করে, লিফ চিহ্নিতকারীদের বিপরীতে আমি এই সমাধানটি অকার্যকর হিসাবে রেন্ডারিং করেছিলাম, অন্য কোড ইস্যুটির কথা উল্লেখ না করে যা আমি ফিক্সঅর্ডার () এর সাথে ভোগ করছিলাম, তবে এটি অনন্য হতে পারে আমার ক্ষেত্রে.

​​

পরিবর্তে আমি লিফলেটটি (বিকল্পগুলি) লোড করার ক্রম অনুসারে স্তরটি ছেড়ে দিয়েছিলাম, যা স্তর নিয়ন্ত্রণগুলি ব্যবহার করার সময় চিহ্নিতকারী স্ট্যাকিং (ওএমএস স্পাইডারফ প্লাগইন) নিয়ে সমস্যা সৃষ্টি করেছিল , তবে আমি নিজের ফান্টের সাহায্যে এগুলি সমাধান করতে সক্ষম হয়েছি setZIndexOffset ()

function myBring2Front() {
        //layer1.bringToFront();
        layer1.eachLayer(function (layer) {
          layer.setZIndexOffset(2000);
        });
        layer2.eachLayer(function (layer) {
          layer.setZIndexOffset(1000);
        });
    }

যদিও আমার দৃশ্যকল্প হয়নি না প্রয়োজন, fixZOrder(layers)শেষ অন্য কেউ স্তুপীকৃত চিহ্নিতকারী সঙ্গে একসাথে এই পদ্ধতি ব্যবহার করে এবং একটি অনুরূপ পদ্ধতির অবলম্বন করার প্রয়োজন হতে পারে অত: পর আমি একটি হিসাবে এই পোস্ট করছি অতিরিক্ত সমাধান উপরে উল্লিখিত স্তর অর্ডার পদ্ধতির সম্ভাব্য ব্যবহারকারীদের জন্য।

​​

ক্রেডিট : চালু উত্তর ghybs stackoverflow.com/a/37850189/11106279

Answer 3

layer.bringToFront()আপনি যখন সম্মিলিত layer controlএবং অ্যাসিনক্রোনাস ডেটা লোড করবেন তখন জেড-অর্ডার বজায় রাখার জন্য নিম্নলিখিত ব্যবহারগুলি @ কিছুই না-করা প্রয়োজনের উত্তরের মতো Similar

আমরা স্তরগুলি সাফ করতে এবং এগুলি মানচিত্রে আবার যুক্ত করতে চাই না কারণ এটি সমস্ত স্তর যুক্ত করবে, পরিবর্তে আমরা নিম্নতম ওভারহেড সহ স্তর নিয়ন্ত্রণে নির্বাচিত স্তরগুলিকে সম্মান করতে চাই । bringToFront()এটি করতে পারে তবে আমাদের কেবল একটি স্তর গ্রুপে কল করতে হবে যার মধ্যে স্তর (সামগ্রী) রয়েছে।

স্তরগুলি সংজ্ঞায়িত করুন:

var dataLayers = {
    Districts: new L.geoJSON(),
    Farms: new L.featureGroup(),
    Paddocks: new L.geoJSON(),
    Surveys: new L.geoJSON()
};

L.control.layers(
    // base maps
    {
        OSM: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>', subdomains: ['a', 'b', 'c'] });,
    },
    dataLayers,
    {
        collapsed: false,
        hideSingleBase: true
    }).addTo(map);

জেড-অর্ডার কার্যকর করতে নিম্নলিখিত ফাংশনটি ব্যবহার করুন:

/**
 * Ensure that layers are displayed in the correct Z-Order
 * Instead of explicitly defining z-order on the groups the order of the calls to beingToFront controls the resulting zOrder
 * @param {any} dataLayers Object that holds the references to the layer groups toggled by the layer control
 **/
function fixZOrder(dataLayers) {

    // only similar approach is to remove and re-add back to the map
    // use the order in the dataLayers object to define the z-order
    Object.keys(dataLayers).forEach(function (key) {

        // check if the layer has been added to the map, if it hasn't then do nothing
        // we only need to sort the layers that have visible data
        // Note: this is similar but faster than trying to use map.hasLayer()
        var layerGroup = dataLayers[key];
        if (layerGroup._layers
            && Object.keys(layerGroup._layers).length > 0
            && layerGroup._layers[Object.keys(layerGroup._layers)[0]]._path
            && layerGroup._layers[Object.keys(layerGroup._layers)[0]]._path.parentNode)
            layerGroup.bringToFront();
    });
}

স্তর নিয়ন্ত্রণ ব্যবহার করার সময়, যখন কোনও স্তরটি দর্শনে টগল করা হয়, তখন এটি অন্যান্য স্তরগুলির শীর্ষে থাকবে, একটি স্তর যুক্ত হওয়ার পরে আমাদের পুনরায় অর্ডার লজিক প্রয়োগ করতে হবে। overlayaddমানচিত্রে ইভেন্টটিকে আবদ্ধ করে এবং fixZOrderফাংশনটি কল করে এটি করা যেতে পারে:

map.on('overlayadd', function (e) {
    fixZOrder(dataLayers);
}

যদি আপনি আপনার ডেটাটিকে অবিচ্ছিন্নভাবে লোড করেন, fixZOrderআপনার ডেটা লোড শেষ হয়ে গেলে আপনাকে কল করতেও হবে , রানটাইমের সময় যুক্ত হওয়া নতুন স্তরগুলি অন্য সমস্ত স্তরগুলির উপরে রেন্ডার হবে।

Answer 4

অর্ডার নিয়ন্ত্রণ করতে আপনাকে অবশ্যই প্যানেল তৈরি করতে হবে।

map.createPane('myPane1');
map.createPane('myPane2');
map.getPane('myPane1').style.zIndex = 400;
map.getPane('myPane2').style.zIndex = 800;

এটির সাহায্যে আপনি যে ফলকটি চান সেটিতে স্তরটি যুক্ত করতে পারেন।