अच्छा वेब इंटरफेस के साथ दो नक्शे की तुलना?

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/specials/qld-floods/ (मानचित्र नहीं)

मुझे पता है कि यह संभव है, मुझे नहीं पता कि यह कैसे करना है। किसी को कोई विचार मिला? उदाहरण?

Comments

तूफान सैंडी लिंक अब मर गया लगता है। क्या यह विचार प्रदर्शित करने के लिए एक बेहतर कड़ी है?

— स्टीफन लीड

यह काम करता है, मैं दूसरे लिंक @StephenLead

— Alex Leith

Answer 1

आप जो करना चाहते हैं, उसे आमतौर पर 'स्वाइप' टूल कहा जाता है।

OpenLayers में इसके लिए कोई इनबिल्ट टूल या कंट्रोल नहीं है, लेकिन शुक्र है कि यहां एक उदाहरण है: Google और OSM के साथ स्वाइप कंट्रोल एक कस्टम क्लास पर आधारित है।

आपको अपने आवेदन में इस जावास्क्रिप्ट फ़ाइल को शामिल करना होगा।

अधिकांश स्वाइप टूल / नियंत्रण जो मैंने ऑनलाइन देखे हैं, सरल सीएसएस क्लिप पर आधारित हैं। बाहरी पैच के बिना भी आपके एप्लिकेशन में इस तरह के नियंत्रण को एकीकृत करना बहुत सरल है।

Comments

किसी ने भी इसे पत्रक के साथ किया है?

— एलेक्स लीथ

Have @alexgleith इस पर एक नज़र: groups.google.com/forum/#!msg/leaflet-js/vXU_bir6JsA/...

— Devdatta Tengshe

Answer 2

मैंगो इसे पत्रक के साथ करता है। यहां एक उदाहरण देखें ।

बेशक आप इसे खुद को कोड करने के लिए समय बचा सकते हैं और मैंगो का उपयोग करके मुफ्त में मानचित्र बना सकते हैं।

Comments

यह एक अच्छा लग इंटरफ़ेस है! लेकिन वहां कोई पुन: प्रयोज्य कोड नहीं है ... मैं ऐसा कुछ चाहता हूं जो हमारे संगठन के लिए आंतरिक है, और मुझे पहले से ही स्टाइल और होस्टिंग डेटा के लिए बुनियादी ढांचा मिला है।

— एलेक्स लेथ

Answer 3

यह दो WMS परतों और पत्रक 0.5 का उपयोग करके एक कार्यशील उदाहरण है। उदाहरण के लिए, पैनिंग करते समय परतों को क्लिप नहीं किया जाता है, इसके लिए इसे थोड़ा मोड़ने की आवश्यकता होती है। लेकिन यह बहुत अच्छी तरह से काम करता है।

यहां देखें: https://github.com/gccgisteam/leaflet-examples/blob/master/leafletSwipe.html

Comments

मुझे नहीं पता कि आप लेखक हैं, लेकिन मैं आपको दो सुझाव दूंगा: पहले मूव ईवेंट का उपयोग करना और फिर मूव ईंड इवेंट वास्तविक समय पर स्वाइप करना और दूसरा, मुझे लगता है कि यह एक टूल कैसे होना चाहिए उपयोग किया गया। नक्शे को खींचने के बजाय, स्लाइडर को खींचा जाना चाहिए।

— Devdatta Tengshe

मैं वास्तव में नीचे और माउस चाल पर दोनों स्लाइडर रखना पसंद करता हूं। इसका मतलब है कि एक माउस के साथ आप इसे हर समय काम कर रहे हैं, और स्पर्श के साथ, आप अभी भी कर सकते हैं। मुझे केवल यह एक साथ मिला, यह केवल अवधारणा का प्रमाण है। मुझे यकीन है कि बहुत सारे विकल्प हैं।

— एलेक्स लीथ

Answer 4

डब्ल्यूएमएस स्प्लिट के लिए एक नज़र डालें ।

Answer 5

यह पत्रक से संभव है। यहाँ मैंने पत्ती और जेकरी के साथ स्वाइप मैप बनाया।

$(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

क्या आपको पूरा उदाहरण मिला है? आप दोनों के बीच स्वाइप करने के लिए कैसे मैप सेट करते हैं?

— एलेक्स लीथ

आपको दो नक्शों की जरूरत नहीं है, आपको जो चाहिए वह है एक लेयर दो लेयर वाला, $ ("। लीफलेट-लेयर: nth-child (3)")। css ("क्लिप", "रेक्ट (" + ordLeft + ") "); $ ("। पत्रक-परत: nth-child (2)")। css ("क्लिप", "रेक्ट (" + निर्देशांक + ")");

— khousuylong

ठीक है, जहां (2) और (3) मानचित्र में जोड़ने के क्रम में परतों 2 और 3 का संदर्भ देते हैं?

— एलेक्स लेथ

उपरोक्त कोड ऊपर और चल रहा है, जिसे आपको सबसे पहले एक नक्शा बनाने और दो परतों को जोड़ने की आवश्यकता है, फिर jquery के साथ आप शीर्ष परत और दूसरी शीर्ष परत के कंटेनर प्राप्त कर सकते हैं। तदनुसार दो कंटेनरों को क्लिप करने के लिए "सीएसएस" क्लिप का उपयोग करते हुए

— khousuylong

ठीक है, इसलिए मेरे पास एक भोली कार्यान्वयन है: jsfiddle.net/Ah6Bx क्या याद आ रही है?

— एलेक्स लीथ

Answer 6

आपको शायद OpenLayers 3 में देखना चाहिए। आप CTRL + U का उपयोग करके उदाहरणों के कोड को देख सकते हैं: कोड बहुत जटिल नहीं दिखता है:

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

Answer 7

मैं viglino द्वारा एक अच्छा Openlayers 3 और 4 एक्सटेंशन का उपयोग कर रहा हूं। आप यहां स्वाइप टूल और सिंक्रोनाइज़्ड मैप्स के उदाहरण पा सकते हैं।

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

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

उनका GitHub भंडार यहां स्थित है: https://github.com/Viglino/ol3-ext

वे उदाहरण GitHub रिपॉजिटरी में शामिल हैं।