মানচিত্রে ডিভের জন্য লিফলেট মানচিত্রে প্যানিং / টেনে আনতে অক্ষম করুন

Question

আপনি যখন মানচিত্রের মধ্যেই এমবেড থাকা একটি ডিভ বাক্সের উপরে ক্লিক করুন এবং টেনে আনবেন তখন কেউ কীভাবে প্যানিং দমন করতে জানেন?

উদাহরণ হিসেবে বলা যায় এখানে , যখন আপনি ক্লিক করুন এবং কিংবদন্তি উপরের উপর টানুন, মানচিত্র আপনার সাথে drags। আমি এই ফাংশন দমন করতে চাই। এই কৌশলটি সম্পর্কে আমি সচেতন, তবে আমি জানতে চাই যে এটিই কেবল একমাত্র উপায়:

map.dragging.disable();

Comments

আমি jQuery ব্যবহার করে একই অনুরূপ কার্যকারিতা প্রয়োগ করেছি over হোর শ্রোতা (হ্যান্ডলারআইন এবং হ্যান্ডলারআউটটি অক্ষম করতে এবং টেনে আনতে সক্ষম করতে ব্যবহার করে)। নিশ্চিত না যে এটি আপনার জন্য বিকল্প কিনা: api.jquery.com/hover

— evv_gis

Answer 1

লিফলেট ওয়েবসাইটটি থেকে উদাহরণটি ব্যবহার করে লক্ষ্য করুন যে L.Controlবস্তুটি কোথায় ইনস্ট্যান্ট করা হয়েছে info; এই হল <div>মানচিত্রের উপর কার্সার রেখে মিথষ্ক্রিয়া সঙ্গে যুক্ত উপরের-ডানদিকে বাক্স। index.htmlলিফলেট উদাহরণ থেকে এটি এখানে সংজ্ঞায়িত হয়েছে :

    // control that shows state info on hover
    var info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
            '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
            : 'Hover over a state');
    };

    info.addTo(map);

যখন ব্যবহারকারীর কার্সরটি এই <div>বাক্সের অভ্যন্তরে থাকে তখন টেনে আনতে অক্ষম করতে , কোনও ইভেন্ট শ্রোতাকে HTMLElement(একটি <div>উপাদান) এতে যুক্ত করুন L.Control:

    // Disable dragging when user's cursor enters the element
    info.getContainer().addEventListener('mouseover', function () {
        map.dragging.disable();
    });

    // Re-enable dragging when user's cursor leaves the element
    info.getContainer().addEventListener('mouseout', function () {
        map.dragging.enable();
    });

প্রত্যাহার করুন যে উদাহরণ mapহিসাবে L.Mapআগে সংজ্ঞায়িত করা হয়েছিল।

Comments

ধন্যবাদ আর্থার, আমি এই পদ্ধতির সাথে পরিচিত। আমি আশা করছিলাম যে কেউ সিএসএস ব্যবহার করে পয়েন্টার-ইভেন্টগুলি: অটো বা পয়েন্টার-ইভেন্টগুলির মতো সমাধান ব্যবহার করতে পারে: আমার মতো কোনও কাজ করে না বা তাদের মতো কিছুই নয় s অন্য কেউ যদি এর থেকে ভাল সমাধান পোস্ট না করে তবে আমি আপনাকে চেকটি দেব, কারণ এর অর্থ হ'ল এটিই সেরা সমাধান।

— মিঃ কনকোলটো

আমারও এটি দেখতে পছন্দ করা উচিত। সিএসএস যদি এই সমস্যাটি সমাধান করতে পারে তবে এটি চমৎকার হবে তবে কোন উপাদানটির পয়েন্টার ইভেন্টগুলি পরিচালনা করা উচিত? leaflet-controlউপাদান দ্বারা অন্তর্ভুক্ত করা হয় leaflet-containerউপাদান এবং পরেরটির পয়েন্টার ঘটনা ট্রিগার জুম এবং প্যান গ্রহণ করা হয়।

— আর্থার

আমি চেষ্টা করে যাচ্ছি যে এটি কোনও লাভের আগ্রহের দ্বিধায় রাখার চেষ্টা করেছিল।

— মিঃ কনকোলাতো

হ্যাঁ, এবং এটি উপলব্ধি করে: <div>আগ্রহের বিষয়টি এমন একটি শিশু leaflet-controlযার মধ্যে নিজেই ভিতরে থাকে leaflet-container। ইভেন্টগুলি সন্তানের ( leaflet-container) আগে পিতামাতার দ্বারা প্রাপ্ত হয় leaflet-control।

— আর্থার

Answer 2

এর বিকল্প সমাধান হ'ল জাভাস্ক্রিপ্টের মাধ্যমে ইভেন্টের প্রচার বন্ধ করা (যেমন এটি লিফলেট নিয়ন্ত্রণগুলির জন্য যেমন করা হয়েছে, যেমন জুম বোতামগুলি):

var div = L.DomUtil.get('div_id');
if (!L.Browser.touch) {
    L.DomEvent.disableClickPropagation(div);
    L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
    L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);
}