সুন্দর ওয়েব ইন্টারফেসের সাথে দুটি মানচিত্রের তুলনা করছেন?

Question

লিফলেট বা ওপেনলায়ারগুলিতে দুটির মধ্যে স্লাইড করার জন্য একটি বারের সাথে দুটি মানচিত্রের তুলনা করা সম্ভব?

উদাহরণ অন্তর্ভুক্ত:

• http://www.esri.com/services/disaster-response/hurricanes/hurricane-sandy-the-aftermap
• http://www.arcgis.com/apps/StorytellingSwipe/index.html?appid=c62112f6ba834227978d8f1cf2b6f5af
• http://www.abc.net.au/news/sp خصوصیs/qld-floods/ (মানচিত্র নয়)

আমি জানি এটি সম্ভব, আমি কীভাবে এটি করব তা জানি না। কেউ ধারণা পেয়েছে? উদাহরণ?

Comments

হারিকেন স্যান্ডি লিঙ্কটি এখন মারা গেছে বলে মনে হচ্ছে। কি এই ধারণা প্রকট একটি উন্নততর লিঙ্ক সরাবেন?

— স্টিফেন লিড

এটি কাজ করে, আমি অন্য লিঙ্কটি @ স্টেফিনলিড

— অ্যালেক্স লেথ

Answer 1

আপনি যা করতে চান, সাধারণত তাকে 'সোয়াইপ' সরঞ্জাম বলা হয়।

ওপেনলায়ার্সে এর জন্য কোনও ইনবিল্ট সরঞ্জাম বা নিয়ন্ত্রণ নেই, তবে ধন্যবাদ, এখানে একটি উদাহরণ রয়েছে: একটি কাস্টম শ্রেণীর উপর ভিত্তি করে গুগল এবং ওএসএম এর সাথে সোয়াইপ নিয়ন্ত্রণ Control

আপনি শুধু অন্তর্ভুক্ত করতে হবে এই আপনার অ্যাপ্লিকেশনের মধ্যে জাভাস্ক্রিপ্ট ফাইল।

আমি অনলাইনে দেখেছি বেশিরভাগ সোয়াইপ সরঞ্জাম / নিয়ন্ত্রণগুলি সাধারণ সিএসএস ক্লিপের উপর ভিত্তি করে। বাহ্যিক প্যাচ ছাড়াই আপনার প্রয়োগে এই ধরণের নিয়ন্ত্রণ একীভূত করা খুব সহজ।

Comments

লিফলেট দিয়ে কেউ কি তা দেখেছেন?

— অ্যালেক্স লেথ

@alexgleith এ দেখুন: গ্রুপ. google.com/forum/#!msg/leaflet-js/vXU_bir6JsA/…

— দেবদত্ত টেংশে

Answer 2

আমের লিফলেট দিয়ে তা করে। এখানে একটি উদাহরণ দেখুন ।

অবশ্যই আপনি নিজের কোডিংয়ের জন্য সময়টি সাশ্রয় করতে পারেন এবং আমের ব্যবহার করে বিনামূল্যে ম্যাপ তৈরি করতে পারেন।

Comments

এটি একটি দুর্দান্ত চেহারা ইন্টারফেস! তবে সেখানে পুনরায় ব্যবহারযোগ্য কোড নেই ... আমি এমন কিছু চাই যা আমাদের সংস্থার অভ্যন্তরীণ এবং আমি ইতিমধ্যে স্টাইলিং এবং ডেটা হোস্টিংয়ের জন্য অবকাঠামো পেয়েছি।

— অ্যালেক্স লেথ

Answer 3

এটি দুটি ডাব্লুএমএস স্তর এবং লিফলেট 0.5 ব্যবহার করে একটি কার্যকারী লিফলেট উদাহরণ। এটি কিছুটা টুইট করার দরকার নেই, উদাহরণস্বরূপ, প্যান করার সময় স্তরগুলি ক্লিপ করা হয় না। তবে এটি বেশ ভালভাবে কাজ করে।

এখানে দেখুন: https://github.com/gccgisteam/leaflet-example/blob/master/leafletSwipe.html

Comments

আপনি লেখক কিনা তা আমি জানি না, তবে আমি আপনাকে দুটি পরামর্শ দেব: প্রথমত মুভ ইভেন্টটি ব্যবহার করুন তারপরে মুভএন্ড ইভেন্টটি বাস্তব সময়কে স্যুইপ করে দেয় এবং দ্বিতীয়ত, আমি মনে করি এটি কোনও সরঞ্জাম কেমন হওয়া উচিত তার বিপরীত উপায় feel ব্যবহার করা হয়েছে। মানচিত্রটি টেনে আনার পরিবর্তে স্লাইডারটি টেনে আনতে হবে।

— দেবদত্ত টেংশে

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

— অ্যালেক্স লেথ

Answer 4

লিফলেটটির জন্য ডাব্লুএমএস স্প্লিটটি দেখুন ।

Answer 5

লিফলেট দিয়ে এটি সম্ভব। লিফলেট এবং jquery দিয়ে আমি সোয়াইপ ম্যাপটি কী করেছি তা এখানে।

$(document).ready(function() {
        var currentX = $("#viewport").width() / 2;
        var resetPosition = function(x){
            var pos = $(".leaflet-map-pane").position(),
            coordLeft = ( - pos.top ) + "px, " + ( x - pos.left + 3 ) + "px, " + ( $("#viewport").height() - pos.top ) + "px, " + -pos.left + "px",
            coordRight = ( - pos.top ) + "px, " + ( $("#viewport").width() - pos.left ) + "px, " + ( $("#viewport").height() - pos.top ) + "px, " + ( x - pos.left + 3 ) + "px";
            $(".leaflet-layer:nth-child(3)").css("clip", "rect(" + coordLeft + ")");
            $(".leaflet-layer:nth-child(2)").css("clip", "rect(" + coordRight + ")");
        };
        resetPosition(currentX);
        map.on("move", function(){
            resetPosition(currentX);
        })
        map.on("zoomend", function(){
            resetPosition(currentX);
        });
        if( $.browser.msie && parseInt($.browser.version) < 9 ){
            $("#vbar-divider").draggable({
                drag: function(e){
                    currentX = $("#vbar-divider").position().left;
                    resetPosition(currentX);
                },
                axis: "x"
            });
        }else{
            $("#vbar-divider").draggable({
                drag: function(e){
                    currentX = $("#vbar-divider").position().left;
                    resetPosition(currentX);
                    $("#vbar-divider div").hide();
                },
                stop: function(){
                    $("#vbar-divider div").show();
                },
                axis: "x",
                containment: "parent"
            });
        }
        $('#vbar-divider').animate({
                left: currentX,
            }, 
            500 
        );
    }); 

Comments

আপনি একটি সম্পূর্ণ উদাহরণ পেয়েছেন? আপনি দুটি মানচিত্রের মধ্যে সোয়াইপ করতে কীভাবে সেট আপ করবেন?

— অ্যালেক্স লেথ

আপনার দুটি মানচিত্রের দরকার নেই, যা আপনার প্রয়োজন তা হ'ল দুটি স্তরযুক্ত একটি মানচিত্র, $ ("। লিফলেট স্তর: নবম চাইল্ড (3)") ss "); $ ("। লিফলেট-স্তর: নবম-শিশু (2)")। সিএসএস ("ক্লিপ", "রেক্টর (" + স্থানাঙ্ক + ")");

— খোসুইলং

ঠিক আছে, কোথায় (2) এবং (3) মানচিত্রে যোগ করার জন্য 2 এবং 3 স্তরগুলি উল্লেখ করুন?

— অ্যালেক্স লেথ

উপরের কোডটি আপ এবং চলমান রয়েছে, আপনাকে প্রথমে যা দরকার তা হ'ল একটি মানচিত্র তৈরি করা এবং দুটি স্তর যুক্ত করা, তারপরে জিকুরির সাহায্যে আপনি শীর্ষ স্তর এবং দ্বিতীয় শীর্ষ স্তরের ধারক পেতে পারেন। সেই অনুযায়ী দুটি পাত্রে ক্লিপ করতে "সিএসএস" ক্লিপ ব্যবহার করে

— খোসুইলং

ঠিক আছে, তাই আমার এখানে একটি নির্বোধ বাস্তবায়ন আছে: jsfiddle.net/Ah6Bx কী অনুপস্থিত?

— অ্যালেক্স লেথ

Answer 6

আপনার সম্ভবত ওপেনলায়ার্স 3 এ দেখা উচিত You আপনি সিটিআরএল + ইউ ব্যবহার করে উদাহরণের কোডটি দেখতে পারেন: কোডটি খুব জটিল দেখাচ্ছে না:

http://openlayers.org/en/v3.1.1/examples/layer-swipe.html

Answer 7

আমি ভিগলিনো দ্বারা একটি দুর্দান্ত ওপ্লেলেয়ার্স 3 এবং 4 এক্সটেনশন ব্যবহার করছি। আপনি সোয়াইপ সরঞ্জাম এবং সিঙ্ক্রোনাইজড মানচিত্রের উদাহরণগুলি এখানে পেতে পারেন।

http://viglino.github.io/ol3-ext/examples/map.control.swipe.html

http://viglino.github.io/ol3-ext/examples/map.interaction.synchronize.html

তাঁর গিটহাব সংগ্রহস্থলটি এখানে অবস্থিত: https://github.com/Viglino/ol3-ext

এই উদাহরণগুলি গিটহাবের সংগ্রহস্থলের অন্তর্ভুক্ত।