javascript - Matching leaflet zoom level with d3 geo scale -

मुझे क्या करना है?

• ओवरले एक
• मेरे एसवीजी परत में d3js और d3.geo.mercator स्थिति तत्वों का उपयोग करने के लिए एसएलजी लेवलिपेट के ऊपर एसवीजी परत। इसलिए वे लीफलेट पर सही तरीके से तैनात हैं।
• I केवल ज़ूम स्तर तक पहुंच प्राप्त कर सकते हैं, नक्शे का केंद्र (लेट / लम्बी), नक्शा एसवीजी तत्व की चौड़ाई और ऊंचाई।
• ज़ूम स्तर और मानचित्र केंद्र में होने वाले परिवर्तनों के लिए मुझे केवल सुनना चाहिए अपने एसवीजी तत्वों को पुनर्स्थापित करने के बारे में जानने के लिए।

मैंने पहले से ही एसवीजी तत्व को लीफलेट लेयर के समान आकार बना दिया है;

मेरे पास कुछ ग्लोबल हैं जो कि लीफलेट के मानों (map.zoom, Map.width, Map.height, Map.center)।

  Map.center = [43, -72]; Map.zoom = 3; Map.projection = d3.geo.mercator ()। केंद्र ([मानचित्र। केंद्र [1], मानचित्र। केंद्र [0]]) / मुझे लगता है कि यह समस्या है। मैं वास्तव में यह नहीं समझता। .scale (256 * Math.pow (2, map.zoom)) ट्रांसस्लेट ([Map.width / 2, map.height / 2]) Map.lt = new L.Map ... (केंद्र है Map.center  

कोई भी समय पत्रक बदलता है, मैं वैश्विक मानों को अपडेट करता हूं और मानचित्र पुनरावृत्ति का पुनर्गणना करता हूं।

मेरे पास एक फ़ंक्शन है:

पूर्व> फ़ंक्शन परिणत (डी) {d = नक्शा। प्रक्षेपण (डी.वल्यू.एजिमेट्री.कोर्डिनेट्स [0], डी.वल्यू.एजीमेट्री.कोर्डिनेट [1]); वापसी "का अनुवाद करें (" + d [0] + "," + d [1] + ")"; }

तब वस्तुओं और तत्वों पर मुझे कॉल करने की स्थिति में होना चाहिए:

  object.attr ("transform", transform);  

मेरी समस्या यह है कि परतें सिंक में नहीं हैं।

जब मैं [43, -72] पर अपना मानचित्र केन्द्रित करता हूं और मैं एक्स, वाई मान को देखता हूं (मानचित्रपॉजेशन से) लौट आया, यह वास्तव में मेरे एसवीजी परत के बीच में है, इसलिए मुझे लगता है कि मेरे पैमाने पर कुछ गलत है। मुझे यकीन नहीं है कि मैं इन मानों को सही तरीके से कैसे बना सकता हूं।

मुझे डी 3.geo.tile, या d3.geo.path () का उपयोग नहीं करना है क्योंकि मुझे नियंत्रण में अधिक लचीलेपन की आवश्यकता है मेरे तत्वों की पोजिशनिंग और एनीमेशन।

मैं सिर्फ यह जानना चाहता हूं कि मैं कैसे अपनी एसवीजी परत के साथ पृष्ठपत्र पटलिंग कर सकता हूं, केवल डी 3 फ़ंक्शन का उपयोग करके। मैं अपने आइटम की स्थिति के लिए लीफलेट पर भरोसा करना चाहता हूं क्योंकि मैं भविष्य में पत्रक का उपयोग नहीं कर सकता हूं; मुझे अपने d3.geo.mercator प्रोजेक्शन को स्केल / अनुवाद करने में सक्षम होने की आवश्यकता है, इसलिए यह लिफ़ाफ़ाइल के साथ लिखे गए हैं। मैं यह कैसे कर सकता हूं?

धन्यवाद!

< / P>

<पूर्व> Map.projection = d3.geo.mercator ()। केंद्र ([Map.center [ 1], मानचित्र। केंद्र [0]]। Sccale ((1 & lt; 8; + map.zoom) / 2 / Math.PI) ट्रांसस्लेट ([मानचित्र.विड्थ / 2, मानचित्र। हल्का / 2])

निश्चित रूप से यह कैसे काम करता है, लेकिन कुछ अन्य उदाहरणों को देखा और इसे समझ लिया।