Leaflet: मानचित्र के केंद्र पर ऑफ़सेट की अनुमति दें।

यह वास्तव में कैटलॉग में बहुत आसान है। आपको जो चाहिए वह है map.containerPointToLatLng विधि। यह मानचित्र के ऊपरी बाएँ कोने के सापेक्ष कुछ पिक्सेल निर्देशांक को भौगोलिक स्थिति में परिवर्तित करता है। तो आप कुछ ऐसा करते हैं:

var centerPoint = map.getSize().divideBy(2),
    targetPoint = centerPoint.subtract([overlayWidth, 0]),
    targetLatLng = map.containerPointToLatLng(centerPoint);

map.panTo(targetLatLng);

क्या यह आपके उपयोग के मामले को हल करता है?

अरे। यह एक तरह से करता है, और शायद काफी अच्छा है। लेकिन, यहां मुद्दा यह है कि यह मानता है कि व्यूपोर्ट वह जगह है जहां आप केंद्र करना चाहते हैं, फिर इसे ऑफसेट करें, इसलिए यह दो चरणों वाला आंदोलन होगा। लेट-लैंग में लेने के विरोध में, ऑफसेटिंग, फिर पैनिंग; एक एकल आंदोलन।

ओह, मेरी गणना सही नहीं है। आपको वास्तविक मानचित्र केंद्र को इस तरह सेट करने की आवश्यकता है कि ऑफ़सेट केंद्र लक्ष्य बिंदु में हो, और ऑफ़सेट बराबर होगा overlayWidth / 2 । तो यहाँ एक आंदोलन के लिए कार्य कोड है:

var targetPoint = map.project(targetLatLng, targetZoom).subtract([overlayWidth / 2, 0]),
    targetLatLng = map.unproject(targetPoint, targetZoom);

map.setView(targetLatLng, targetZoom);

यह वही मामला है जो हमारे पास भी था - मानचित्र के शीर्ष पर थोड़ा अपारदर्शी साइडबार ओवरले किया गया था। जब भी हम फिटबाउंड () कहते हैं, तो यह थोड़ा हटकर होगा और इसे ठीक करने के लिए हमें एक और आंदोलन करने की आवश्यकता होगी। हम इसके लिए एक पुल अनुरोध पर विचार कर रहे थे, लेकिन साइडबार को मानचित्र के बगल में ले जाकर समाप्त कर दिया क्योंकि हमें लगा कि यह थोड़ा काम हो सकता है और यह नहीं सोचा था कि यह एक सामान्य उपयोग का मामला था।

@ शोक जो बहुत मायने रखता है। मुझे लगता है कि मैंने प्रोजेक्ट() विधियों को याद किया। यह मेरे अधिकांश उपयोग के मामले को संभालता है। बहुत धन्यवाद।

@ajbeaven की तरह, एक (जियोजसन) परत के लिए एक ऑफसेट फिटबाउंड बहुत बढ़िया होगा, लेकिन ऐसा लगता है कि यह बहुत अधिक जटिल होगा। मुझे नहीं लगता कि केवल ऑफसेट करना काफी अच्छा है, क्योंकि व्यूपोर्ट की सीमाएं प्रभावी रूप से बदल रही हैं, और न ही मुझे यह पता होगा कि इसे एक कॉल में कैसे किया जाए।

किसी भी तरह, इसे बंद करने के लिए स्वतंत्र महसूस करें यदि पुस्तकालय में ही जोड़ने का कोई मतलब नहीं है। मुझे लगता है कि मैं आपके प्रदान किए गए कोड के साथ अपनी विशिष्ट परियोजना का प्रबंधन कर सकता हूं। धन्यवाद।

fitBounds थोड़ा अधिक वर्बोज़ है लेकिन आसान भी है। बस इस https://github.com/CloudMade/Leaflet/blob/master/src/map/Map.js#L275 विधि को कॉपी-पेस्ट करें, यह संशोधित करते हुए कि यह किस आकार का उपयोग करता है, और फिर उपयोग करें

var targetZoom = altGetBoundsZoom(map, bounds);
// ... calculate targetLatLng as above
map.setView(targetLatLng, targetZoom);

नमस्ते। मैं पैरामीटर के रूप में fitBounds के साथ LatLng[] का उपयोग कर रहा हूं और मैंने ऊपर दिए गए कोड स्निपेट का उपयोग करने का प्रयास किया, लेकिन बिना किसी किस्मत के।
मेरे वेब में एक साइडबार ओवरले है जहां मैं चाहता हूं कि नक्शा नीचे दिखाई दे, लेकिन मैं इस ओवरले के नीचे मार्करों को प्रकट होने से रोकना चाहता हूं। (मानचित्र केंद्र को भी ऑफसेट करना बहुत अच्छा होगा, लेकिन यह मैन्युअल रूप से किया जा सकता है।)

क्या आप कृपया _offset map_ पर fitBounds के लिए एक पूर्ण कोड स्निपेट पोस्ट कर सकते हैं?
आपने ऊपर जो लिखा है उससे मैं काफी भ्रमित हूं। समस्या यह है कि मेरे पास कोई targetLatLng नहीं है और न ही targetPoint क्योंकि मैं अंकों की सरणी का उपयोग करता हूं।

बीटीडब्ल्यू। कंटेनर के प्रत्येक तरफ अर्ध-ओवरले स्थान की मात्रा को परिभाषित करने का विकल्प होना वास्तव में बहुत बढ़िया होगा, जहां आप अभी भी नक्शा खींचेंगे, लेकिन वहां मार्करों पर कोई नियंत्रण नहीं रखेंगे।

आप मेरे द्वारा लागू किए गए कोड को यहां देख सकते हैं। (यह किसी भी तरह से कोड का एक बड़ा उदाहरण नहीं है, लेकिन विचार वहां है) यह एक ऐसी वस्तु में भी बनाया गया है जिसमें नक्शा संपत्ति है जो कि पत्रक मानचित्र है। इसकी निम्नलिखित विधियाँ हैं:

ऐपसेट व्यू
ऐपसेटबाउंड
ऐपगेटबाउंडज़ूम

https://github.com/MinnPost/minnpost-my-boundaries/blob/master/visualizations/index.html#L556

फिर से खोलना, क्योंकि इसमें निर्मित इस कार्यक्षमता को जोड़ना उपयोगी होगा।

इस चर्चा में आया क्योंकि मुझे इसके पीछे के नक्शे के साथ 550px की स्क्रीन के बाईं ओर एक सूची रखनी थी। मैंने फैसला किया कि एल.मैप के कुछ मूल कार्यों को ओवरराइड करना शायद आसान होगा। आपके सभी आइडियाज के लिए धन्यवाद।

आशा है कि मैंने उन सभी को कवर कर लिया है, लेकिन मुझे 100% यकीन नहीं है।

MapCenterOffsetMixin = {
    UIOffset: [550, 0], // x, y
    getBounds: function(){
        var a=this.getPixelBounds(),
            b=this.unproject(new L.Point(a.min.x+this.UIOffset[0],a.max.y+this.UIOffset[1]), this._zoom,!0),
            c=this.unproject(new L.Point(a.max.x,a.min.y),this._zoom,!0);
            return new L.LatLngBounds(b,c)
    },
    _latLngToNewLayerPoint: function (latlng, newZoom, newCenter) {
        var targetPoint = this.project(newCenter, newCenter).subtract([this.UIOffset[0]/2, this.UIOffset[1]/2]),
            newCenter = this.unproject(targetPoint, newZoom);
        var topLeft = this._getNewTopLeftPoint(newCenter, newZoom).add(this._getMapPanePos());
        return this.project(latlng, newZoom)._subtract(topLeft);
    },
    _getCenterLayerPoint: function () {
        return this.containerPointToLayerPoint(this.getSize().divideBy(2).add([this.UIOffset[0]/2, this.UIOffset[1]/2]));
    },
    _resetView: function (a, b, c, d) {
        var e = this._zoom !== b;
        // Change the center
        var targetPoint = this.project(a, b).subtract([this.UIOffset[0] / 2, this.UIOffset[1]/2]),
            a = this.unproject(targetPoint, b);
        d || (this.fire("movestart"), e && this.fire("zoomstart")), this._zoom = b, this._initialTopLeftPoint = this._getNewTopLeftPoint(a);
        if (!c) L.DomUtil.setPosition(this._mapPane, new L.Point(0, 0));
        else {
            var f = L.DomUtil.getPosition(this._mapPane);
            this._initialTopLeftPoint._add(f)
        }
        this._tileLayersToLoad = this._tileLayersNum, this.fire("viewreset", {
            hard: !c
        }), this.fire("move"), (e || d) && this.fire("zoomend"), this.fire("moveend"), this._loaded || (this._loaded = !0, this.fire("load"))
    }
}

L.Map.include(MapCenterOffsetMixin);

@averrips इसे पोस्ट करने के लिए धन्यवाद। आपका समाधान वर्तमान में मेरे लिए अच्छा काम कर रहा है ... सिवाय इसके कि ज़ूम नियंत्रण अब फ़ायरफ़ॉक्स में टूट गया है :( मुझे "कैचॉल" त्रुटि मिल रही है: TypeError: t अपरिभाषित है

यहाँ FitBoundsPadded का कार्यान्वयन है, जिसे मानचित्र में रहना चाहिए:
इसे फिटबाउंड की तरह प्रयोग करें, लेकिन अपनी इच्छित पैडिंग में पास करें, इसलिए इसका उपयोग इस तरह करें:

map.fitBoundsPadded(myBounds, new L.Point(0, 0), new L.Point(0, 150));

और कोड:

    fitBoundsPadded: function (bounds, paddingTopLeft, paddingBottomRight) { //(LatLngBounds, Point, Point)

        var zoom = this.getBoundsZoom(bounds);
        var zoomToTry = zoom;

        while (true) {
            var newTopLeft = this.unproject(this.project(bounds.getNorthEast(), zoomToTry).add(paddingTopLeft), zoomToTry);
            var newBottomRight = this.unproject(this.project(bounds.getSouthWest(), zoomToTry).add(paddingBottomRight), zoomToTry);

            var paddedBounds = new L.LatLngBounds([bounds.getSouthWest(), bounds.getNorthEast(), newTopLeft, newBottomRight]);

            var zoom2 = this.getBoundsZoom(paddedBounds);

            if (zoom2 == zoomToTry) {
                return this.fitBounds(paddedBounds);
            } else {
                zoomToTry--;
            }
        }
    },

मास्टर में लागू! इसे इस तरह इस्तेमाल करें:

map.fitBounds(bounds, [20, 30], [40, 50]); // bounds, topLeftPadding, bottomRightPadding

या केवल दूसरा तर्क पास करें और नीचे-दाएं पैडिंग को बराबर शीर्ष-बाएं में डिफ़ॉल्ट किया जाएगा।

हस्ताक्षर थोड़ा बदल गया। अब आप इसे इस तरह इस्तेमाल करें:

map.fitBounds(bounds, {
    padding: [20, 30]
});

map.fitBounds(bounds, {
    paddingTopLeft: [20, 30],
    paddingbottomRight: [40, 50]
});

क्या अन्य कार्यों में पैडिंग जोड़ने पर कोई नियोजित कार्य है?

शायद, हाँ। कम से कम setView और panTo के लिए।

सभी तरफ एक ही पैडिंग लगाने का शॉर्टकट होना चाहिए। कुछ इस तरह।

map.fitBounds(bounds, { padding: 20 });

वर्तमान के बजाय ...

map.fitBounds(bounds, { padding: [20, 20] });

@averrips वह मिक्सिन बहुत मददगार था, धन्यवाद।

मुझे अभी तक समाधान नहीं मिला, इसलिए आप यहां जाएं (असली आसान):

 फ़ंक्शन रीसेंटर (मानचित्र, अक्षांश, ऑफ़सेट, ऑफ़सेटी) {
 वर केंद्र = नक्शा.परियोजना (latlng);
 केंद्र = नया एल.बिंदु (केंद्र.एक्स+ऑफ़सेटएक्स,सेंटर.वाई+ऑफ़सेटी);
 वर लक्ष्य = map.unproject (केंद्र);
 map.panTo (लक्ष्य);
 }

कृपया "सेट व्यू" और "पैनटो" के लिए भी वही कार्यक्षमता जोड़ें।
धन्यवाद!

साथ ही, बाएं | दाएं नियंत्रण को भी पैडिंग करने का कोई तरीका है?

यहां बताया गया है कि मैंने वर्तमान में https://github.com/codeforamerica/lv-trucks-map (http://clvfoodtrucks.com/ पर लाइव साइट) पर हमारी परियोजना में ऑफसेट के साथ एक पैनटो कैसे लागू किया है। यह L.map प्रोटोटाइप ऑब्जेक्ट को संशोधित करता है ताकि यह विधि मैप ऑब्जेक्ट पर "मूल रूप से" उपलब्ध हो, और इसे मैप बनाने से पहले आपके जावास्क्रिप्ट कोड में जोड़ा जाना चाहिए:

L.Map.prototype.panToOffset = function (latlng, offset, options) {
    var x = this.latLngToContainerPoint(latlng).x - offset[0]
    var y = this.latLngToContainerPoint(latlng).y - offset[1]
    var point = this.containerPointToLatLng([x, y])
    return this.setView(point, this._zoom, { pan: options })
}

यह panTo() की तरह ही काम करता है लेकिन एक अतिरिक्त पैरामीटर के साथ, offset , जो [xOffset, yOffset] के रूप में एक सरणी है। आप इसे एक setViewOffset() विधि बनाने के लिए भी संशोधित कर सकते हैं।

धन्यवाद, लोह!

संदर्भ के लिए, यह कॉन्फ़िगरेशन मेरे लिए क्षैतिज ऑफसेट का अनुकरण करने के लिए काम करता है जैसा कि फोरस्क्वेयर होमपेज पर देखा गया है।
https://gist.github.com/missinglink/7620340

धन्यवाद @louh!

धन्यवाद @missinglink , आपका कोड काम करता है!

क्या ज़ूम इन/आउट क्रियाओं के लिए भी कोई समाधान है?

मैं कुछ इस तरह उपयोग कर रहा हूँ:

        var MapCenterOffsetMixin = {
            getMapOffset: function() {
                console.log('getMapOffset');
                return [$('#left-panel').offset().left, 0];
            },
            getBounds: function(){
                console.log('getBounds');
                var offset = this.getMapOffset(),
                    bounds = this.getPixelBounds(),
                    sw = this.unproject(new L.Point(bounds.min.x + offset[0], bounds.max.y + offset[1]), this._zoom, !0),
                    ne = this.unproject(new L.Point(bounds.max.x, bounds.min.y), this._zoom, !0);

                return new L.LatLngBounds(sw, ne)
            },
            _oldLatLngToNewLayerPoint: L.Map.prototype._latLngToNewLayerPoint,
            _latLngToNewLayerPoint: function (latlng, newZoom, newCenter) {
                console.log('_latLngToNewLayerPoint');
                var offset = this.getMapOffset(),
                    targetPoint = this.project(newCenter, newCenter).subtract([offset[0] / 2, offset[1] / 2]);
                newCenter = this.unproject(targetPoint, newZoom);

                return this._oldLatLngToNewLayerPoint(latlng, newZoom, newCenter);
            },
            _getCenterLayerPoint: function () {
                console.log('_getCenterLayerPoint');
                var offset = this.getMapOffset();
                return this.containerPointToLayerPoint(this.getSize().divideBy(2).add([offset[0] / 2, offset[1] / 2]));
            },
            _oldResetView: L.Map.prototype._resetView,
            _resetView: function (center, zoom, preserveMapOffset, afterZoomAnim) {
                console.log('_resetView');
                var offset = this.getMapOffset(),
                    targetPoint = this.project(center, zoom).subtract([offset[0] / 2, offset[1] / 2]);
                center = this.unproject(targetPoint, zoom);

                this._oldResetView(center, zoom, preserveMapOffset, afterZoomAnim);
            }
        };
        L.Map.include(MapCenterOffsetMixin);

लेकिन यह ज़ूम करने में विफल रहता है।

यहाँ समाधान है: https://github.com/Mappy/Leaflet-active-area। बहुत खूब! :)

ऐसा लगता है कि 'map.fitBounds (सीमा, topLeftPadding, bottomRightPadding)' फ़ंक्शन, पिक्सेल को नहीं, बल्कि लंबे समय तक समायोजित करने के लिए मानों का उपयोग कर रहा है। तो ज़ूम के विभिन्न स्तरों के अलग-अलग परिणाम होंगे कि नक्शा कितनी दूर समायोजित किया गया है। मुझे यकीन है कि इसके लिए एक उपयोग का मामला है, लेकिन ऐसा लगता है कि इस मुद्दे के लिए हर कोई एक सेट आकार साइड-बार या शीर्ष मेनू ला रहा है, समायोजन ज़ूम स्तर पर निर्भर नहीं होना चाहिए। क्या कोई बिल्ट-इन लीफलेट फ़ंक्शन है जो निर्देशांक के बजाय पिक्सेल के आधार पर पैडिंग जोड़ता है?

topLeftPadding और bottomRightPadding पिक्सल में अपेक्षित मान: http://leafletjs.com/reference.html#map -fitboundoptions

किसी कारण से मेरे लिए ऐसा नहीं लगता है। इसका परीक्षण करने के लिए मैं एक मार्कर को 15 के ज़ूम स्तर पर केंद्रित करता हूं और फिर यह आदेश चलाता हूं ...
map.fitBounds(pointsArray, {paddingTopLeft: [0,0], paddingBottomRight: [800,0], maxZoom: map.getZoom()});
फिर मैं मार्कर को 19 के ज़ूम स्तर पर पुन: चलाता हूं और इसे फिर से चलाता हूं। 15 के स्तर पर यह लगभग ध्यान देने योग्य नहीं है कि यह कितनी राशि स्थानांतरित करता है। हालाँकि, 19 के स्तर पर, यह लगभग आधे पृष्ठ पर स्थानांतरित हो जाता है। क्या मैं अपने फ़ंक्शन कॉल में कुछ गलत कर रहा हूँ?