मिग स्थान चिह्न जेनरेटर

अभिवादन को नमस्कार। मैं आपके साथ अपने आखिरी मिनी प्रोजेक्ट्स - एमआईजी जियोडेटा आइकन जनरेटर को साझा करना चाहता हूं। इसका उपयोग करके, आप निर्दिष्ट मापदंडों (रंग, आकार, स्ट्रोक, आदि) के साथ वेक्टर ( एसवीजी ) और बिटमैप (पीएनजी) आइकन उत्पन्न कर सकते हैं।



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

कैसे उपयोग करें

डिफ़ॉल्ट रूप से, MIG आइकनों को उत्पन्न करने के लिए प्राकृतिक पृथ्वी डेटा जियोडाटा पर आधारित 1: 110 मीटर का विश्व मानचित्र का उपयोग करता है। इसमें दुनिया के ( 174 + 3 ) देशों के डेटा शामिल हैं (बाकी इस पैमाने पर पतित हैं), साथ ही तीन देश - ये उत्तरी साइप्रस, कोसोवो और सोमालीलैंड हैं। यदि यह आपके लिए पर्याप्त है, तो केवल उन आइकन के पैरामीटर सेट करें जिनकी आपको सीधे कोड में आवश्यकता है, या MIG डेमो पेज पर GUI का उपयोग करें। यदि आपको देशों के हिस्से को फ़िल्टर करने की आवश्यकता है, तो यह आसानी से उपलब्ध गुणों के लिए शर्तों को निर्धारित करके किया जा सकता है। उदाहरण के लिए, आईडी द्वारा फ़िल्टर करना इस तरह दिखता है:

 .data(topojson.feature(world, world.objects.countries).features .filter(function(d) {return contryList.indexOf(d.id) > -1;})) 

डेमो बहुत ही तपस्वी दिखता है, क्योंकि दिलचस्प परिणाम प्राप्त करने के लिए, आपको अभी भी कोड बदलना होगा। तो मिग को कांटा और खुद के लिए इसे बदलने के लिए स्वतंत्र महसूस करें। हां, डेमो नए इनपुट्स (एचटीएमएल 5) का उपयोग करता है, वे अभी तक हर जगह समर्थित नहीं हैं: कैनीयूज़ , लेकिन एक फॉलबैक है, इसलिए इसे वैसे भी काम करना चाहिए।

तो क्या करें यदि डिफ़ॉल्ट विकल्प आपको सूट नहीं करता है। पहला कदम नए जियोडेटा को निर्धारित करना है - यह एक विश्व मानचित्र हो सकता है, प्रशासनिक सीमाओं वाले देश का नक्शा, जिलों में विभाजन के साथ शहर का नक्शा या कोई अन्य नक्शा। एक बार जब आप जियोडेटा पर निर्णय ले लेते हैं, तो आपको इसे टॉपोजेन्सन में बदलने की आवश्यकता होती है । यह TopoJSON कमांड-लाइन का उपयोग करके किया जा सकता है, पहले Node.js. के लिए TopoJSON कार्यान्वयन स्थापित किया गया था। रूपांतरण चरण में, आपको सभी अनावश्यक गुणों को हटाने की आवश्यकता होती है, यदि आप इसके लिए किसी बाहरी फ़ाइल का उपयोग नहीं करने जा रहे हैं तो आप नाम भी जोड़ सकते हैं। जब नई TopoJSON फ़ाइल तैयार होती है, तो पथ और नामों को अपडेट करें:

 .defer(d3.json, "data/TopoJSON_file.json") .defer(d3.tsv, "data/external_file_for_names.tsv") 

अपनी नई फ़ाइल में feature का नाम बदलें:

 .data(topojson.feature(world, world.objects.YourNewFeatureName).features 

यही है, अब आप आइकन उत्पन्न कर सकते हैं!

अतिरिक्त विशेषताएं

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

 switch (d.id) { //Russia case "RUS": var projection = d3.geo.albers().rotate([-105, 0]).center([-10, 65]).parallels([52, 64]); path = d3.geo.path().projection(projection); break; //USA case "USA": var projection = d3.geo.albersUsa(); path = d3.geo.path().projection(projection); break; default: var projection = d3.geo.mercator(); path = d3.geo.path().projection(projection); break; } 

सामान्य तौर पर, प्रयोग के लिए एक विशाल क्षेत्र है।

हुड के नीचे क्या है

जेनरेटर को D3.js लाइब्रेरी का उपयोग करके लिखा गया है, कोड को GitHub: Map Icons Generator पर देखा जा सकता है। तो यहां क्या हो रहा है। सबसे पहले, जियोडेटा और संबंधित नाम लोड किए जाते हैं (केस के लिए जब उन्हें टॉपोजन्स फाइल में सीवन नहीं किया जाता है)। फिर, प्रत्येक ऑब्जेक्ट के लिए, किसी दिए गए आकार का एक एसवीजी तत्व बनाया जाता है और संबंधित मानचित्र क्षेत्र को एक दिए गए प्रक्षेपण में इसमें खींचा जाता है, जबकि सेंटिंग और स्केल की गणना BoundingBox आधार पर की जाती है। इस बिंदु के साथ कई बारीकियां जुड़ी हुई हैं, चूंकि जियोडेटा की प्रस्तुति प्रक्षेपण पर निर्भर करती है, कुछ मामलों में ऑटो-सेंटरिंग और ऑटो-स्केलिंग एक भयावह परिणाम देगा। उदाहरण के लिए, जिन देशों के माध्यम से एंटी-मेरिडियन गुजरता है (हमारे लंबे समय तक पीड़ित रूस सहित) या वे देश जिनमें क्षेत्र (द्वीप) का एक बड़ा फैलाव है, बहुत छोटे दिखेंगे। इसे एक उपयुक्त प्रक्षेपण का उपयोग करके, या प्रदर्शित क्षेत्र के प्रदेशों के हिस्से को हटाकर (फ़िल्टर करके) ठीक किया जा सकता है। फिर आइकन को स्टाइल करने के लिए आगे बढ़ें। इस स्तर पर, आप विभिन्न एसवीजी फिल्टर, ग्रेडिएंट, पैटर्न, clipping उपयोग कर सकते हैं - सामान्य रूप से, एसवीजी की सभी शक्ति।

इसके अलावा, बनाए गए वेक्टर आइकन के आधार पर, रास्टर वाले बनाए जाते हैं। यह निम्नानुसार होता है: एक लूप में हम सभी एसवीजी तत्वों पर जाते हैं, कैनवास तत्वों का निर्माण करते हैं और context.drawImage() हमारे आइकन को वहां खींचते हैं। context.drawImage() , यहां एक छोटी सी बारीकियां भी हैं, एसवीजी के पास xmlns विशेषता के साथ सब कुछ होना चाहिए, और इसकी Blob 'एक मान्य MIME प्रकार निर्दिष्ट किया जाता है, अन्यथा हमारे पास कुछ भी नहीं आएगा। अब हम सेव आइकन को फास्ट करते हैं, शुरू करते हैं और प्राप्त आइकनों का आनंद लेते हैं।

आगे का विकास

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

यदि आपके कोई प्रश्न हैं, तो कुछ अस्पष्ट है, बग या कुछ और मिला है - लिखें।

यही सब है, शुभकामनाएँ!