2012-10-31 9 views
6

में एक अतिरिक्त ज़ूम स्तर जोड़ना leaflet का उपयोग करके एक फोटो मैप बनाने के लिए, अपने स्वयं के टाइल्स के साथ, जो अपेक्षा के अनुसार काम करता है।पत्रिका मानचित्र

इम बाहर काम करने के लिए कैसे मैं इस Quadtree प्रकार पैटर्न का अनुसरण करने से ज़ूम रोका जा सकता है की कोशिश कर रहा:

  • ज़ूम स्तर 0 - संपूर्ण नक्शा चौड़ाई = 256px;
  • ज़ूम स्तर 1 - संपूर्ण नक्शा चौड़ाई = 512 पीएक्स;
  • ज़ूम स्तर 2 - संपूर्ण नक्शा चौड़ाई = 1024px;
  • और इसी तरह ...

मैं ज़ूम करने के लिए सक्षम होने के लिए चाहते हैं 25% की दर से वृद्धि का कहना है कि या 100px।

100px वेतन वृद्धि का एक उदाहरण:

  • ज़ूम स्तर 0 - संपूर्ण नक्शा चौड़ाई = 200px;
  • ज़ूम स्तर 1 - संपूर्ण नक्शा चौड़ाई = 300 पीएक्स;
  • ज़ूम स्तर 2 - संपूर्ण नक्शा चौड़ाई = 400 पीएक्स;
  • और इसी तरह ...

प्रश्न: ऐसा करने के लिए तर्क क्या है? यदि यह सब संभव है?


ऐसा करने के लिए इच्छुक के लिए मेरे कारण तो यह है कि मेरी तस्वीर नक्शा (जो एक सामान्य मानचित्र की तरह लपेट नहीं करता) अधिक responsive हो सकता है और फिट उन अच्छी तरह से आकार स्क्रीन कर सकते हैं है।

मैं अपने मुद्दे का एक प्रदर्शन here

उत्तर

8

देखा जा सकता है जो संक्षिप्त उत्तर है कि आप केवल ज़ूम स्तर है जिसके लिए आप का पूर्व-प्रदान की गई टाइल्स दिखा सकते हैं बनाया है। पत्रक आपके लिए मध्यस्थ ज़ूम स्तर नहीं बनाएगा।

उत्तर है कि ऐसा करने का उपयोग करने के, आप उदाहरण के लिए अपने स्वयं के सीआरएस पैमाने विधि को परिभाषित करने और इसे अपने नक्शे में पारित करने के लिए, की जरूरत है: इस उदाहरण में

L.CRS.CustomZoom = L.extend({}, L.CRS.Simple, { 
    scale: function (zoom) { 
     // This method should return the tile grid size 
     // (which is always square) for a specific zoom 
     // We want 0 = 200px = 2 tiles @ 100x100px, 
     // 1 = 300px = 3 tiles @ 100x100px, etc. 
     // Ie.: (200 + zoom*100)/100 => 2 + zoom 

     return 2 + zoom; 
    } 
}); 

var map = L.map('map', { crs: L.CRS.CustomZoom }).setView([0, 0], 0); 

, मैं विस्तार किया है ताकि L.CRS.Simple, लेकिन आप निश्चित रूप से एपीआई से किसी भी सीआरएस का विस्तार कर सकते हैं, या यहां तक ​​कि खुद को स्क्रैच से भी बना सकते हैं।

ज़ूम कारक का उपयोग करना जिसके परिणामस्वरूप नक्शा पिक्सेल आकार होता है जो आपके टाइल्सइज़ का एक बहु नहीं है, इसका मतलब है कि आपकी दाएं/नीचे किनारे की टाइलें आंशिक रूप से आंशिक रूप से मानचित्र डेटा से भरी होंगी। इस तरह के टाइल्स का गैर-नक्शा भाग 100% पारदर्शी (या आपकी पृष्ठभूमि के समान रंग) बनाकर तय किया जा सकता है।

हालांकि, मेरी राय में, इस मामले में 100px में सबसे कम आम denominator से मिलान करने के लिए टाइल्सize सेट करने के लिए एक बेहतर विचार है। अपनी टाइल परत में tileSize विकल्प का उपयोग करके इसे प्रतिबिंबित करना याद रखें। और, ज़ाहिर है, आप वर्तमान में उपयोग कर रहे 256x256 टाइल्स की बजाय अपनी छवि को 100x100 पिक्सेल टाइल्स में फिर से प्रस्तुत करने की आवश्यकता होगी।

एक चेतावनी, letterJS (0.5) के वर्तमान संस्करण में एक बग है जो कस्टम स्केल() विधि को काम करने से रोकता है, क्योंकि टाइललेयर क्लास को पावर-ऑफ-2 ज़ूम स्केलिंग का उपयोग करने के लिए हार्डकोड किया जाता है। हालांकि, आपको जो परिवर्तन करने की ज़रूरत है वह मामूली है और उम्मीद है कि इसे भविष्य की रिलीज में संबोधित किया जाएगा।

_getWrapTileNum: function() { 
    // TODO refactor, limit is not valid for non-standard projections 
    return Math.pow(2, this._getZoomForUrl()); 
}, 

करने के लिए:: बस से TileLayer._getWrapTileNum() बदलने

_getWrapTileNum: function() { 
    return this._map.options.crs.scale(this._getZoomForUrl()); 
}, 
+1

आप हर ज़ूम स्तर के लिए पूर्व प्रदान की गई टाइल्स है, किसी भी तरह उच्च ज़ूम स्तर टाइल्स का उपयोग करें और उन्हें पैमाने पर और उन का उपयोग कर सकते हैं पत्रक नहीं है, तो? भले ही वे थोड़ा पिक्सलेटेड हों? –

संबंधित मुद्दे