एक ओपनलेयर 3 मानचित्र (चित्रों के साथ) में वेक्टर सुविधाओं को कैसे जोड़ें

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

कृपया ध्यान दें कि इस आलेख का पालन करने के लिए आपको वेबपृष्ठ में एक कामकाजी ओपनलायर मानचित्र स्थापित करने की आवश्यकता है. यदि आपके पास कोई नहीं है, तो देखें कि ओपनलेयर 3 का उपयोग करके नक्शा कैसे बनाएं.

कदम

3 का भाग 1:

बिंदु और रेखा स्ट्रिंग विशेषताएं जोड़ना

1. एक बिंदु सुविधा बनाएँ. बस अपने कोड की निम्न पंक्ति की प्रतिलिपि बनाएँ तत्व:.

var point_feature = नया ओल.फ़ीचर ({})-

2. बिंदु की ज्यामिति सेट करें. ओपनलेयर बताने के लिए कि बिंदु कहां रखें, आपको एक ज्यामिति बनाने की आवश्यकता है और इसे निर्देशांक का एक सेट देना होगा, जो [देशांतर (ई-डब्ल्यू), अक्षांश (एन-एस) के रूप में एक सरणी है]. निम्नलिखित कोड यह बनाता है और बिंदु की ज्यामिति सेट करता है:

var point_geom = नया ओल.जियोम.बिंदु ([20, 20]) - point_feature.Setgeometry (POINT_GEOM)-

3. एक लाइन स्ट्रिंग सुविधा बनाएँ. लाइन स्ट्रिंग्स सीधी रेखाओं को सेगमेंट में विभाजित कर रहे हैं. हम उन्हें अंक की तरह बनाते हैं, लेकिन हम लाइन स्ट्रिंग के प्रत्येक बिंदु के लिए निर्देशांक की एक जोड़ी प्रदान करते हैं:

var scenestring_feature = नया ओल.फ़ीचर ({ज्यामिति: नया ओल.जियोम.लाइनस्ट्रिंग ([[10, 20], [20, 10], [30, 20]])})-

4. एक वेक्टर परत में विशेषताएं जोड़ें. मानचित्र में सुविधाओं को जोड़ने के लिए, आपको उन्हें किसी स्रोत में जोड़ने की आवश्यकता है, जिसे आप एक वेक्टर परत में जोड़ते हैं, जिसे आप मानचित्र में जोड़ सकते हैं:

var vector_layer = नया ओल.परत.वेक्टर ({स्रोत: न्यू ऑल.स्रोत.वेक्टर ({विशेषताएं: [point_feature, scenestring_feature]})} मानचित्र.AddLayer (Vector_layer)-

3 का भाग 2:

निर्देशांक का उपयोग करने के लिए सुविधाओं की ज्यामिति को बदलना

किसी भी शक्तिशाली मैपिंग सॉफ्टवेयर के साथ, ओपनलेयर मैप्स में जानकारी प्रदर्शित करने के विभिन्न तरीकों से अलग-अलग परतें हो सकती हैं. क्योंकि पृथ्वी एक ग्लोब है और फ्लैट नहीं है, जब हम इसे हमारे फ्लैट मानचित्रों पर प्रदर्शित करने का प्रयास करते हैं, तो सॉफ़्टवेयर को फ्लैट मानचित्र से मेल खाने के लिए स्थानों को समायोजित करना होता है. मानचित्र जानकारी प्रदर्शित करने के इन विभिन्न तरीकों को बुलाया जाता है अनुमानों. एक ही मानचित्र पर एक वेक्टर परत और एक टाइल परत का उपयोग करने का मतलब है कि हमें परतों को एक प्रक्षेपण से दूसरे में बदलना होगा.

1. सुविधाओं को एक सरणी में रखें. हम उन सुविधाओं को डालकर शुरू करते हैं जिन्हें हम एक सरणी में बदलना चाहते हैं जिसे हम पुनरावृत्त कर सकते हैं.

var विशेषताएं = [point_feature, skestring_feature]-

2. ट्रांसफॉर्म फ़ंक्शन लिखें. ओपनलेयर में, हम प्रत्येक सुविधा के ज्यामिति वस्तु पर ट्रांसफॉर्म () फ़ंक्शन का उपयोग कर सकते हैं. इस ट्रांसफॉर्म कोड को एक फ़ंक्शन में रखें जिसे हम बाद में कॉल कर सकते हैं:

फंक्शन ट्रांसफॉर्म_गेमेट्री (एलिमेंट) {var current_projection = नया ओल.प्रोजे.प्रक्षेपण ({कोड: "EPSG: 4326"}) - var new_projection = tile_layer.Getource ().GetProjection () - तत्व.GetGeometry ().ट्रांसफॉर्म (current_projection, new_projection) -) -}

3. सुविधाओं पर ट्रांसफॉर्म फ़ंक्शन को कॉल करें. अब बस सरणी के माध्यम से पुनरावृत्ति.

विशेषताएं.foreach (transform_geometry)-

3 का भाग 3:

वेक्टर परत की शैली निर्धारित करना

मानचित्र पर प्रत्येक सुविधा को बदलने के लिए, हमें शैली बनाने और लागू करने की आवश्यकता है. शैलियाँ रंगों और रेखाओं के रंग, आकार, और अन्य विशेषताओं को बदल सकती हैं, और वे प्रत्येक बिंदु के लिए छवियों को भी प्रदर्शित कर सकते हैं, जो अनुकूलित मानचित्रों के लिए बहुत आसान है. यह खंड आवश्यक नहीं है, लेकिन यह मजेदार और उपयोगी है.

1. भरें और स्टोक बनाएं. एक भरें शैली वस्तु और एक अर्द्ध पारदर्शी लाल रंग, और एक स्ट्रोक (रेखा) शैली बनाएं जो एक ठोस लाल रेखा है:

var fill = new ol.अंदाज.भरें ({रंग: [180, 0, 0, 0.3]}) - var स्ट्रोक = नया ओल.अंदाज.स्ट्रोक ({रंग: [180, 0, 0, 1], चौड़ाई: 1})-

2. शैली बनाएं और इसे परत पर लागू करें. ओपनलेयर स्टाइल ऑब्जेक्ट काफी शक्तिशाली है, लेकिन अब हम केवल भरने और स्ट्रोक सेट करने जा रहे हैं:

var शैली = नया ओल.अंदाज.शैली ({छवि: नया ओल.अंदाज.सर्कल ({भरें: भरें, स्ट्रोक: स्ट्रोक, त्रिज्या: 8}), भरें: भरें, स्ट्रोक: स्ट्रोक}) - वेक्टर_लेयर.SetStyle (शैली)-