More

    आसान तरीके से अपना खुद का वेक्टर बेसमैप बनाएं

    on

    |

    views

    and

    comments

    वेक्टर बेसमैप बनाएं: बेसमैप वेब मानचित्रकारों का सबसे अच्छा मित्र है, है ना। उनमें से बहुत सारे ऑनलाइन हैं, जो आपके आगामी अच्छे वेब मानचित्र एप्लिकेशन में एम्बेड होने के लिए तैयार हैं। इस लेख में हम अपना स्वयं का आधार मानचित्र प्रकाशित करेंगे… लेकिन इस बार: वेक्टरस्टाइल!

    क्लासिक बेसमैप पीएनजी/जेपीजी फाइलों का एक सेट है जो एक विशिष्ट क्रम में हैं (xyz-टाइल्स के लिए)। उपयोग के लिए एक क्लासिक बेसमैप बनाने के लिए आपको अपनी पसंद के जीआईएस के अंदर एक अच्छा मानचित्र बनाने/स्टाइल करने में कुछ समय बिताने की आवश्यकता है। फिर आप टाइल्स प्रस्तुत करेंगे. विभिन्न पैमानों के आधार पर आप इन फ़ाइलों को काफी समय तक प्रस्तुत करेंगे (हम यहां घंटों/दिनों/सप्ताहों के बारे में बात कर रहे हैं!)। इसे ध्यान में रखते हुए, बेसमैप को बदलना या अपडेट करना बहुत बड़ा खेल है!

    ब्रेकिंग न्यूज़ के लिए आपका सबसे तेज़ स्रोत! अभी पढ़ें। – हिन्द महासागरीय भू-राजनीतिक नवीन प्रवृत्ति: भारत की भूमिका

    वेक्टर बेसमैप बनाएं: वेक्टर मानचित्र

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

    • OSM से डेटा प्राप्त करें
    • QGIS में डेटा प्रदर्शित करें
    • डेटा को पीबीएफ में निर्यात करें
    • लीफलेट में परत को स्टाइल करें

    यह आपको अपना स्वयं का कस्टम बेसमैप प्रकाशित करने या एक नया Etsy व्यवसाय शुरू करने में सक्षम करेगा।

    वेक्टर बेसमैप बनाएं: डेटा प्राप्त करना

    हमारे उदाहरण के लिए हम QGIS के लिए/में QuickOSM प्लगइन का उपयोग करेंगे।

    सही डेटा प्राप्त करने के लिए मैं अपनी रुचि के क्षेत्र की पहली सीमाएँ निर्यात कर रहा हूँ और अन्य सभी सुविधाएँ हटा रहा हूँ:

    वेक्टर मानचित्र
    बर्लिन में पैंको

    हम तीन अतिरिक्त परतों के निष्कर्षण के लिए इस बहुभुज परत का उपयोग करेंगे:

    • इमारतों
    • राजमार्ग (“सड़कों” के लिए OSM नाम)
    • पार्क

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

    कृपया सीधे निर्यात से बचें: कुछ ओएसएम डेटा टेढ़ा हो सकता है, इसलिए अपनी सभी परतों पर “फिक्स जियोमेट्रीज़” एल्गोरिदम चलाना सुनिश्चित करें!

    फिक्स जियोमेट्रीज़
    QGIS में डेटा

    अपना डेटा साफ़ करने के बाद, इसे जियोजोन के रूप में सहेजें। फिर भी ध्यान रखें: अपनी समन्वय परिशुद्धता में दशमलव की संख्या को यथासंभव कम करें।

    जियोजसन को पीबीएफ में निर्यात करें

    एक बार जब आप अपने बेसमैप के लिए आवश्यक सभी परतों को जियोजोन के रूप में सहेज लेते हैं, तो हम टाइल मैप योजना बनाने के लिए टिप्पेकेनो का उपयोग करेंगे, जिसका उपयोग हम रैस्टर बेसमैप के साथ करते हैं, लेकिन हम अपनी परतों को तथाकथित प्रोटोबफ़ फ़ाइलों के रूप में निर्यात करेंगे (पीबीएफ फ़ाइल प्रारूप है) . हम इन फ़ाइलों को सीधे QGIS में और लीफलेट के साथ उपभोग करेंगे।

    टिप्पेकेनो को मैक के साथ-साथ उबंटू पर भी इंस्टॉल करना आसान है। टिप्पेकेनो के साथ निर्यात को काफी हद तक अनुकूलित किया जा सकता है और आप मैपबॉक्स के दस्तावेज़ के अनुसार दर्जनों मापदंडों के साथ खेल सकते हैं।

    मेरा निर्यात बहुत बुनियादी था क्योंकि मैं एक साधारण आदमी हूं। मैं इस आदेश के साथ अपनी परतें निर्यात कर रहा हूं:

    tippecanoe -pk -pC -P -an -z17 -Z11 -e vector_tiles --extend-zooms-if-still-dropping
           buildings.GeoJSON highways.GeoJSON leisure.GeoJSON  --force*/
    
    
    • -पीके: कोई आकार सीमा नहीं
    • -pC: कोई संपीड़न नहीं
    • -z17 – Z11 ज़ूम 11-17
    • -e फ़ोल्डर में “बनाता है”
    • -विस्तार करें… मैपबॉक्स हमें बताता है: यदि उच्च ज़ूम स्तर पर टाइलें भी बहुत बड़ी हैं, तो ज़ूम स्तर तब तक जोड़ते रहें जब तक कि एक ऐसा स्तर न पहुंच जाए जो सभी सुविधाओं का प्रतिनिधित्व कर सके।

    इस कमांड के परिणामस्वरूप रूट पर सबफ़ोल्डर और प्रॉपर्टी फ़ाइल के साथ फ़ोल्डरों का एक सेट (प्रत्येक ज़ूम स्तर पर एक फ़ोल्डर होता है) होता है जो कुछ मेटा जानकारी संग्रहीत करता है।

    जैसा कि मैं इसे मैक पर चला रहा हूं, मुझे आश्चर्य हुआ (मैं उबंटू का परीक्षण नहीं कर रहा था): इसमें पूर्ण कोर समर्थन है और यह आपके सभी कोर को बंद कर देगा… पूरे निर्यात में लगभग 4400 फाइलें बनाने में केवल 1 मिनट का समय लगा।

    वेक्टर बेसमैप बनाएं: वेक्टर डेटा का उपभोग करना

    परिणामस्वरूप हम पहले से ही क्यूजीआईएस के साथ परिणामी फ़ोल्डर का उपभोग कर सकते हैं लेकिन हम कहानी के पत्रक भाग पर अधिक ध्यान दे रहे हैं।

    वेक्टर डेटा का उपभोग करना
    QGIS में वेक्टर टाइलें

    मैं लीफलेट में पीबीएफ फाइलों को स्टाइल करने के लिए वेक्टरग्रिड प्लगइन का उपयोग कर रहा हूं। यह मुझे प्रसिद्ध z/x/y शैली में प्रोटोबफ़ को समझने की अनुमति देगा। लेकिन इस प्लगइन के वर्तमान संस्करण में एक नुकसान है: यह लीफलेट में दिखाई देने वाली आपकी परतों के क्रम को नियंत्रित करने की अनुमति नहीं देता है, इसलिए हमें यहां बताए अनुसार आपकी स्थानीय प्रतिलिपि पर संस्करण को समायोजित करने की आवश्यकता है।

    मूल सेटअप किसी भी अन्य लीफ़ल्ट वेबमैप से तुलनीय है:

    • एक मानचित्र कंटेनर बनाएं
    • वेक्टरग्रिड प्लगइन का उपयोग करके एक परत जोड़ें
    • स्टाइलिंग के लिए कुछ नियम लागू करें
    <!DOCTYPE html>
    <html>
    <head>
        <title>Vector styles basemap</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" type="image/x-icon" href="https://digital-geography.com/create-your-own-vector-basemaps-the-easy-way/docs/images/favicon.ico" />
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-hash/0.2.1/leaflet-hash.min.js"></script>
        <script src="Leaflet.VectorGrid.bundled.js"></script>
        <style>
            body {
                padding: 0;
                margin: 0;
            }
            html, body, #mapid {
                height: 100%;
                width: 100%;
                background: pink; /* just to get good contrast*/
            }
        </style>
    </head>
    <body>
        <div id='mapid'></div>
        <script>
    var map = L.map('mapid').setView([52.54902, 13.42455], 16);
            var hash = new L.Hash(map);
        </script>
    </body>
    </html>
    

    चूँकि अब हमारे पास पिग्गी-गुलाबी पृष्ठभूमि रंग के साथ मानचित्र चल रहा है, आइए पहली परत जोड़ें। कृपया याद रखें, हमने वेक्टर डेटा केवल ज़ूम लेवल 17 तक ही निर्यात किया है…

    var myLayer = L.vectorGrid.protobuf('http://localhost:8080/pankow_talk/data/vector_tiles/{z}/{x}/{y}.pbf', {
                maxZoom: 20,
                maxNativeZoom: 17,
                minZoom: 11,
                vectorTileLayerStyles: {
                    //////////////////////////////////////
                    // simple style                     //
                    //////////////////////////////////////
                    leisure: function (properties, zoom) {
                        return {
                            fillColor: "#becf50",
                            opacity: 1,
                            fillOpacity: 0.5,
                            weight: 1,
                            color: "grey",
                            fill: true,
                            zorder: 1
                        }
                    },
                    ///////////////////////////////////////
                    // we need zoom !!!                  //
                    ///////////////////////////////////////
                    building: function (properties, zoom) {
                        zoom2 = map.getZoom();
                        var color, weight;
                        if (zoom2 >= 16) {
                            color = "grey";
                            weight = 1;
                        }
                        if (zoom2 >= 18) {
                            color = "grey";
                            weight = 0.5;
                        }
                        return {
                            fillColor: "#bfc7c8",
                            opacity: 1,
                            fillOpacity: 1,
                            weight: weight,
                            color: color,
                            fill: true,
                            zorder: 2
                        }
                    },
                    //////////////////////////////////////
                    // properties! we need properties!  //
                    //////////////////////////////////////
                    highway: function (properties, zoom) {
                        var weight;
                        if (properties.highway == "primary" || properties.highway == "motorway") {
                            weight = 4;
                        }
                        else if (properties.highway == "secondary") {
                            weight = 2;
                        }
                        else {
                            weight = 1;
                        }
                        return {
                            opacity: 1,
                            weight: weight,
                            color: "black",
                            zorder: 3
                        }
                    },
                }
            }).addTo(map);
    
    दुर्भाग्य से मैंने ओवरज़ूमिंग
    पत्रक में प्रारंभिक शैली.

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

    आप स्वयं से पूछ सकते हैं कि ज़ूम2 क्यों है। दुर्भाग्य से मैंने ओवरज़ूमिंग के साथ कुछ समस्याएं देखीं। इसलिए मैंने लक्ष्य ज़ूम स्तर प्राप्त करने और सही शैली लागू करने के लिए प्रत्येक ज़ूम-इन/ज़ूम-आउट के लिए एक परत को फिर से बनाने का निर्णय लिया:

    map.on('zoomend', function () {
        myLayer.redraw();
    })
    

    परिणामी बेसमैप:

    यदि आप स्रोत के साथ खेलना चाहते हैं: यहाँ ज़िप है।

    इस ट्यूटोरियल के निर्माण में किसी QGIS-सर्वर या ArcGIS सर्वर और न ही जियोसर्वर को नुकसान पहुँचाया गया 😉

    Share this
    Tags

    Must-read

    खिलजी वंश के अंतिम शासक Qutub-ud-din Mubarak का Cursed Fate

    खिलजी वंश के अंतिम शासक Qutub-ud-din Mubarak का Cursed Fate: 18 अप्रैल, 1316 को अलाउद्दीन खिलजी का पुत्र कुतुबुद्दीन मुबारक शाह दिल्ली की गद्दी...

    First Battle of Tarain में मुहम्मद गोरी की करारी हार

    First Battle of Tarain में मुहम्मद गोरी की करारी हार: पृथ्वीराज चौहान, जिन्हें राय पिथौरा और पृथ्वीराज के नाम से भी जाना जाता है,...

    1192 के बाद Muhammad Ghori का Indian Campaigns

    1192 के बाद Muhammad Ghori का Indian Campaigns: शहाब-उद-दीन मुहम्मद गोरी, जिन्हें मुइज़-उद-दीन मुहम्मद बिन सैम के नाम से भी जाना जाता है, ने...
    spot_img

    Recent articles

    More like this

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here