OpenLayers एक शक्तिशाली JavaScript टूल है जो हमें वेबसाइट पर सभी प्रकार के मानचित्र बनाने और प्रदर्शित करने में सक्षम बनाता है। यह आलेख आपको एक बिंदु और एक रेखा स्ट्रिंग सुविधा जोड़ने में मार्गदर्शन करेगा, फिर उनके अनुमानों को निर्देशांक का उपयोग करने के लिए बदल देगा, फिर परत की शैली सेट करके कुछ रंग जोड़ें।
कृपया ध्यान दें कि इस आलेख का अनुसरण करने के लिए आपको एक वेबपेज में एक कार्यशील OpenLayers मानचित्र स्थापित करने की आवश्यकता है। यदि आपके पास एक नहीं है, तो OpenLayers 3 का उपयोग करके मानचित्र कैसे बनाएं देखें।
कदम
3 का भाग 1: बिंदु और रेखा स्ट्रिंग सुविधाएँ जोड़ना
चरण 1. एक बिंदु सुविधा बनाएँ।
बस कोड की निम्न पंक्ति को अपने में कॉपी करें
तत्व:
var point_feature = नया ol. Feature({ });
चरण 2. बिंदु की ज्यामिति सेट करें।
OpenLayers को यह बताने के लिए कि बिंदु को कहाँ रखा जाए, आपको एक ज्यामिति बनानी होगी और उसे निर्देशांक का एक सेट देना होगा, जो [देशांतर (E-W), अक्षांश (N-S)] के रूप में एक सरणी है। निम्नलिखित कोड इसे बनाता है और बिंदु की ज्यामिति सेट करता है:
वर point_geom = नया ol.geom. Point([२०, २०]); point_feature.setGeometry (point_geom);
चरण 3. एक लाइन स्ट्रिंग फीचर बनाएं।
लाइन स्ट्रिंग्स सीधी रेखाएं होती हैं जो खंडों में विभाजित होती हैं। हम उन्हें बिंदुओं की तरह ही बनाते हैं, लेकिन हम लाइन स्ट्रिंग के प्रत्येक बिंदु के लिए निर्देशांक की एक जोड़ी प्रदान करते हैं:
var linestring_feature = नया ol. Feature ({ज्यामिति: नया ol.geom. LineString (
चरण 4। सुविधाओं को एक वेक्टर परत में जोड़ें।
मानचित्र में सुविधाओं को जोड़ने के लिए, आपको उन्हें एक स्रोत में जोड़ना होगा, जिसे आप एक वेक्टर परत में जोड़ते हैं, जिसे आप मानचित्र में जोड़ सकते हैं:
var vector_layer = new ol.layer. Vector({source: new ol.source.vector({ features: [point_feature, linestring_feature] })}) map.addLayer(vector_layer);
3 का भाग 2: निर्देशांक का उपयोग करने के लिए सुविधाओं की ज्यामिति को बदलना
किसी भी शक्तिशाली मैपिंग सॉफ़्टवेयर की तरह, OpenLayers के नक्शे में सूचना प्रदर्शित करने के विभिन्न तरीकों के साथ अलग-अलग परतें हो सकती हैं। चूँकि पृथ्वी एक ग्लोब है और समतल नहीं है, जब हम इसे अपने समतल मानचित्रों पर प्रदर्शित करने का प्रयास करते हैं, तो सॉफ़्टवेयर को समतल मानचित्र से मिलान करने के लिए स्थानों को समायोजित करना पड़ता है। मानचित्र जानकारी प्रदर्शित करने के इन विभिन्न तरीकों को कहा जाता है अनुमानों. एक ही नक्शे पर एक वेक्टर परत और एक टाइल परत का एक साथ उपयोग करने का मतलब है कि हमें परतों को एक प्रक्षेपण से दूसरे प्रक्षेपण में बदलना होगा।
चरण 1. सुविधाओं को एक सरणी में रखें।
हम उन सुविधाओं को डालकर शुरू करते हैं जिन्हें हम एक साथ एक सरणी में बदलना चाहते हैं जिसे हम पुनरावृत्त कर सकते हैं।
वर सुविधाएँ = [point_feature, linestring_feature];
चरण 2. ट्रांसफॉर्म फ़ंक्शन लिखें।
OpenLayers में, हम प्रत्येक फीचर के ज्योमेट्री ऑब्जेक्ट पर ट्रांसफॉर्म () फ़ंक्शन का उपयोग कर सकते हैं। इस ट्रांसफ़ॉर्म कोड को एक फ़ंक्शन में रखें जिसे हम बाद में कॉल कर सकते हैं:
फंक्शन ट्रांसफॉर्म_जियोमेट्री (एलिमेंट) { var current_projection = नया ol.proj. Projection ({कोड: "EPSG: 4326"}); वर new_projection = टाइल_लेयर.getSource ()। getProjection (); element.getGeometry().transform(current_projection, new_projection);); }
चरण 3. सुविधाओं पर परिवर्तन फ़ंक्शन को कॉल करें।
अब बस सरणी के माध्यम से पुनरावृति करें।
विशेषताएं। प्रत्येक के लिए (transform_geometry);
भाग ३ का ३: वेक्टर परत की शैली सेट करना
मानचित्र पर प्रत्येक विशेषता कैसी दिखती है, इसे बदलने के लिए, हमें एक शैली बनाने और लागू करने की आवश्यकता है। शैलियाँ रंग, आकार और बिंदुओं और रेखाओं की अन्य विशेषताओं को बदल सकती हैं, और वे प्रत्येक बिंदु के लिए चित्र भी प्रदर्शित कर सकती हैं, जो अनुकूलित मानचित्रों के लिए बहुत उपयोगी है। यह खंड आवश्यक नहीं है, लेकिन यह मजेदार और उपयोगी है।
चरण 1. भरण और स्टोक बनाएँ।
एक भरण शैली वस्तु और एक अर्ध-पारदर्शी लाल रंग, और एक स्ट्रोक (रेखा) शैली बनाएं जो एक ठोस लाल रेखा हो:
वर भरण = नया ol.style. Fill ({रंग: [१८०, ०, ०, ०.३]}); वर स्ट्रोक = नया ol.style. Stroke ({रंग: [१८०, ०, ०, १], चौड़ाई: १});
चरण 2. स्टाइल बनाएं और इसे परत पर लागू करें।
OpenLayers शैली वस्तु काफी शक्तिशाली है, लेकिन हम अभी के लिए केवल भरण और स्ट्रोक सेट करने जा रहे हैं:
var शैली = नया ol.style. Style ({छवि: नया ol.style. Circle ({भरण: भरण, स्ट्रोक: स्ट्रोक, त्रिज्या: 8}), भरण: भरण, स्ट्रोक: स्ट्रोक}); वेक्टर_लेयर.सेट स्टाइल (शैली);
