एक शुरुआत के लिए रूसी क्षेत्रों का इंटरेक्टिव मानचित्र। गलतियाँ जो मैंने कीं और जो आपको नहीं करनी चाहिए

इस लेख में मैं आपको बताऊंगा कि एक इंटरेक्टिव मैप बनाते समय हमें किस तरह से विशिष्ट त्रुटियों का सामना करना पड़ा, और सबसे महत्वपूर्ण बात, मैं आपको रूसी संघ के घटक संस्थाओं के सामान्य, वर्तमान मानचित्रों के लिंक दूंगा।

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

इसलिए, हम परियोजना शुरू करते हैं। शुरू करने के लिए, हमें वास्तव में, नक्शे की आवश्यकता है: Google पर जाएं हमें मानचित्र डेटा के विभिन्न स्वरूपों का एक पूरा गुच्छा मिलता है।

चूंकि हम पेशेवर भूवैज्ञानिक नहीं हैं, सिद्धांत रूप में, हम प्रारूपों के बारे में परवाह नहीं करते हैं - मुख्य बात यह है कि काम करना है, इसलिए हम यहां और सब कुछ पर विचार नहीं करेंगे, लेकिन दो मुख्य समूहों को उजागर करेंगे।

• वेक्टर कार्ड
• मेटाडेटा के साथ मैप्स

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

मेटाडेटा के साथ मैप्स। मेटाडेटा के साथ मैप्स, यदि बहुत सरल भाषा में, एक ही वेक्टर बहुभुज हैं, केवल अंदर की जानकारी के साथ। बहुत सारे प्रारूप हैं, मैं मुख्य लोगों को सूचीबद्ध करूंगा: जियोसन, एसएचपी, जियोफिफ़, MIF, TAB, KML। सामान्य तौर पर, उनमें से कई हैं, उनमें से प्रत्येक की अपनी विशेषताएं हैं, जिसके बारे में केवल एक व्यक्ति जो जीआईएस सिस्टम में जानकार है, वह आपको बता सकता है।

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

हमने प्रारूप का पता लगा लिया है और एक विशिष्ट विस्तार के साथ डेटा की तलाश कर रहे हैं। और फिर मजा शुरू होता है। क्या आपको लगता है कि रूसी संघ के काम के अच्छे नक्शे खोजना आसान है? Pff, यह वहाँ नहीं था, बहुत सारा रोमांच आपको इंतजार कर रहा है। तो, आपने मैप डाउनलोड किया, सब कुछ कॉन्फ़िगर किया, इसे लॉन्च किया और ...

क्रीमिया। Google में सबसे पहला लिंक gis-lab में जाता है। और इन मानचित्रों पर कोई प्रायद्वीप नहीं है। यहां सब कुछ सरल है। मुख्य रूसी कार्ड 2000 और 2010 में बनाए गए थे, अर्थात्, क्रीमिया को रूसी संघ में शामिल किए जाने से पहले, और कई पश्चिमी सेवाएं परिग्रहण को मान्यता नहीं देते हैं और प्रायद्वीप को अपने कार्ड में नहीं जोड़ते हैं। और अगर आप क्रीमिया के बिना अपने प्रोजेक्ट में एक नक्शा सम्मिलित करते हैं, जबकि रूस में, आप खुद समझ जाते हैं कि क्या हो सकता है। इसलिए, इस क्षेत्र के बिना नक्शा बनाना एक विकल्प नहीं है।
समाधान: 2014 या विदेशी सेवाओं की तुलना में बाद में शौकिया कार्ड असेंबलियों की तलाश करें जो अभी भी क्रीमिया को रूसी कार्ड में जोड़ते हैं। लेकिन सबसे अधिक संभावना है कि आप उन्हें नहीं पाएंगे।

चलिए आगे देखते हैं। हम Google पर जाते हैं, "रूसी संघ के जियोसन विषयों को डाउनलोड करें" में ड्राइव करते हैं, पाते हैं, mydata.biz से नक्शा डाउनलोड करते हैं और ... सब कुछ हमारे साथ सूज गया है।

अस्थायी सीमाएँ। कुछ मानचित्रों में, प्रादेशिक जल को विषयों में शामिल किया गया है। इस तथ्य के कारण कि समुद्र की सीमा वाले सभी विषयों के क्षेत्र में 24 किमी की वृद्धि हुई है, मानचित्र "तैरता" दिखता है, विशेष रूप से समुद्र तट और द्वीपों वाले क्षेत्र। यदि आप स्पष्ट नहीं हैं, तो आप शायद इस कार्ड का उपयोग कर सकते हैं, लेकिन मेरी परियोजना के लिए यह स्पष्ट रूप से अस्वीकार्य है।
निर्णय। क्षेत्रीय जल को छोड़कर मानचित्रों के लिए आगे खोजें।

आगे बढ़ो। एक परित्यक्त साइट पर इंटरनेट की गहराई में आपको नक्शे मिले, जैसे क्रीमिया के साथ और "फ्लोट" नहीं किया, डाउनलोड करें ...

विषयों की सीमाएँ एक दूसरे में चलती हैं।

यह समस्या अक्सर शौकिया कार्ड में पाई जाती है, विषयों की सीमाएं एक दूसरे में चलती हैं और इस वजह से तत्वों का गलत प्रदर्शन संभव है। यह अनुचित संपीड़न या मानचित्रों के सरलीकरण के कारण भी दिखाई दे सकता है।

लाल डॉट्स एक दूसरे पर बहुभुज का प्रतिच्छेदन हैं।

यह हमेशा प्रदर्शन में कलाकृतियों को नहीं देता है, लेकिन बड़ी संख्या में त्रुटियों के साथ निम्न चित्र हो सकता है:

समाधान: एक दूसरे पर पॉलीगोन को मारने के बिना नक्शों की तलाश करें।

हम आगे देख रहे हैं। कहीं, किसी चमत्कार से, आप एक अच्छा नक्शा पाते हैं - क्रीमिया के साथ, क्षेत्रीय जल के बिना, एक दूसरे पर लैंडफिल मारने के बिना और ...

सब कुछ जम जाता है। अत्यधिक विस्तार के कारण कार्ड का वजन 35mb है, और कमजोर कंप्यूटर प्रदर्शित होने पर धीमा होने लगता है।

समाधान: कम विस्तार वाले मानचित्र की तलाश करें या मानचित्र को संकुचित करें। जियोजोन के लिए मैं maphaper.org सुझाता हूं

यह सब, आप नरक के नौ हलकों के माध्यम से गए, सही नक्शा मिला, इसे डाउनलोड करें और दोनों ...। चुकोटका का हिस्सा आदर्श रूप से रूस के बाकी हिस्सों से कटा हुआ था।

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

कटा हुआ चुकोटका

मैं विवरण में नहीं जाऊंगा, लेकिन तुरंत कार्ड प्रकट कर दूंगा।

यह कोई गलती नहीं है। बात यह है कि मानचित्र सेवाओं में डिफ़ॉल्ट रूप से एक प्रक्षेपण होता है (हाँ, आपको यह समझना होगा कि प्रक्षेपण क्या है और वे क्या हैं) CRS84 जो मोटे तौर पर बोल रहा है, समन्वय मूल 180 मेरिडियन से आता है, यानी नक्शा शुरू होता है और समाप्त होता है चुकोटका। कल्पना कीजिए कि आप इस लाइन के साथ ग्लोब को काट रहे हैं और उसका विस्तार कर रहे हैं।

CRS84 प्रक्षेपण बिंदु से, सब कुछ सही ढंग से प्रदर्शित होता है।

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

प्रक्षेपण एशिया लैंबर्ट कंफर्मल शंकु चुकोटका को उसके स्थान पर लौटा देगा। लेकिन, जैसा कि मैं इसे समझता हूं, यह एक गैर-मानक प्रक्षेपण और कई सेवाएं हैं, उदाहरण के लिए, http://geojson.io , मानक से प्रस्थान का समर्थन नहीं करते हैं।

कॉनिक बराबर क्षेत्र के प्रक्षेपण के साथ, सब कुछ थोड़ा संशोधन के बाद हमारे लिए काम किया।

एक शंकुधारी प्रक्षेपण रखने के बाद, आप निम्न चित्र देखेंगे: रूस इसके किनारे पर गिर गया और आधा डूब गया।

यह फिर से बग नहीं है - नक्शा सही ढंग से प्रदर्शित किया गया था, लेकिन डिफ़ॉल्ट रूप से ऐसा कोण है। यह कार्ड के तुच्छ फ़्लिपिंग और ज़ूम द्वारा हल किया गया है:

<ComposableMap projection={() => geoConicEqualArea() .scale(690) .center([100, 100]) .parallels([40, 80]) .rotate([265].translate([130, 5]) }> <ZoomableGroup> <Geographies geography={map}> {(geographies, proj) => geographies.map(geo => ( <Geography projection={proj} geography={geo} /> )) } </Geographies> </ZoomableGroup> </ComposableMap> 

परिणामस्वरूप, आपको निम्न कार्ड मिलेगा:

... जिसके साथ सब ठीक है, वह बिना स्टॉक और सुंदर है। लगभग। फिर भी, "चुची का निशान" बना रहा जिसे हम हटा नहीं सकते थे। यह विशेष रूप से ध्यान देने योग्य नहीं है और रचना को बहुत नुकसान नहीं पहुंचाता है। हमें इसे हटाने का कोई तरीका नहीं मिला, और, ईमानदार होने के लिए, हमने इसकी तलाश नहीं की - हम पिछली त्रुटियों से बहुत परेशान हो गए थे और सब कुछ छोड़ने का फैसला किया।

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

हमने निम्नलिखित मुद्दों की जांच की:

• क्रीमिया गुम
• विषयों में क्षेत्रीय जल शामिल थे
• विषयों की सीमाएँ एक दूसरे में चलती हैं
• कार्ड बहुत भारी है
• चुकोटका 180 मेरिडियन को काटता है

टीम के डेवलपर से नोट करें

एक और कठिनाई उन मानचित्रों को प्रस्तुत करने के लिए एक घटक ढूंढ रही थी जो क्लाइंट की तरफ निर्भर नहीं करेंगे, जैसा कि नक्शा सर्वर पर प्रस्तुत किया गया है। हम Next.js फ्रेमवर्क का उपयोग करते हैं, जो रिएक्ट पर आधारित है, इसलिए डी 3-जियो सिर्फ काम नहीं करता है, यह रिएक्ट घटक खोजने के लिए आवश्यक था।

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

मानचित्र:

जून 2019 तक, सबसे अच्छा रूसी मानचित्र
दुनिया भर से कार्ड का बड़ा बैंक

सेवाएं:

ऑनलाइन नक्शा देखने और उन्हें संपीड़ित करने के लिए एक उपकरण
प्रक्षेपण

प्रक्षेपण
प्रतिक्रिया मानचित्र मानचित्र घटक