🚴🏻 🥔 💯 OpenLayers या परिवहन निगरानी सेवा करते हैं 💜 👉 ⏳

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

नक्शा चयन और प्रदर्शन
ऐसा करने के लिए, अपने पृष्ठ पर आपको वांछित आयामों के साथ एक दिव्य तत्व बनाने की आवश्यकता है। यह मानचित्र प्रदर्शित करेगा। एक उदाहरण:

div id="map" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"

OpenLayers कनेक्ट करें:

 script type="text/javascript" src="Scripts/OpenLayers.js"

एक वैश्विक मानचित्र चर बनाएं जिसमें मानचित्र ऑब्जेक्ट संग्रहीत किया जाएगा। पेज लोड घटना पर एक फ़ंक्शन कॉल बनाएं, जिसमें सीधे एक नक्शा बनाने के लिए एक कोड होगा। एक उदाहरण:

 body onload="LoadMap()"

LoadMap फ़ंक्शन का वर्णन करें:

 //    EPSG:900913. var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508); var restrictedExtent = maxExtent.clone(); var maxResolution = 156543.0339; //     EPSG:4326. var options = { projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326"), numZoomLevels: 18, maxResolution: maxResolution, maxExtent: maxExtent, restrictedExtent: restrictedExtent }; //  map = new OpenLayers.Map('map', options); //  - VirtualEarth var veroad = new OpenLayers.Layer.VirtualEarth("Virtual Earth Roads", { 'type': VEMapStyle.Road, sphericalMercator: true }); var veaer = new OpenLayers.Layer.VirtualEarth("Virtual Earth Aerial", { 'type': VEMapStyle.Aerial, hericalMercator: true }); var vehyb = new OpenLayers.Layer.VirtualEarth("Virtual Earth Hybrid", { 'type': VEMapStyle.Hybrid, sphericalMercator: true }); //  - OpenStreet var mapnik = new OpenLayers.Layer.OSM(); //       map.addControl(new OpenLayers.Control.ScaleLine()); map.addControl(new OpenLayers.Control.MousePosition()); //     OpenLayers.Map map.addLayers([ mapnik, veroad, veaer, vehyb]); //    map.addControl(new OpenLayers.Control.LayerSwitcher()); //         var point0 = new OpenLayers.Geometry.Point(37.600328, 55.574624); //      ,       . point0.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); //       9.    15. map.setCenter(new OpenLayers.LonLat(point0.x, point0.y), 9); }

Openlayers प्रोजेक्ट साइट पर, आप कई उदाहरण पा सकते हैं , लगभग दो सौ। किसी दिए गए सेवा से नक्शा दृश्य का एक उदाहरण यहाँ देखा जा सकता है । इस लेख के अधिकांश कार्य इन उदाहरणों को कवर करते हैं। प्रस्तुत कोड में इन कार्डों के संचालन के लिए google और yandex कार्ड्स का कोई जुड़ाव नहीं है। आपको पंजीकरण करना होगा, सेवा पहुंच कुंजी प्राप्त करनी होगी, और उसके बाद ही आप इन सेवाओं से जुड़ सकते हैं। उपरोक्त कोड का परिणाम:

एक बिंदु या चित्र का प्रदर्शन और इसे कैप्शन
ऐसी परतें बनाएं जो हमारी वस्तुओं (डॉट्स और चित्रों) को संग्रहित करेंगी।

 //    .   , ,     , (${} -   ,      ), url  ,  . var styleImage = new OpenLayers.Style( { graphicWidth: 21, graphicHeight: 25, graphicYOffset: -28, label: "${label}", externalGraphic: "http://www.openlayers.org/dev/img/marker.png", fontSize: 12 }); //labelYOffset -       var stylePoint = new OpenLayers.Style( { pointRadius: 5, strokeColor: "red", strokeWidth: 2, fillColor: "lime", labelYOffset: -16, label: "${label}", fontSize: 16 }); //   .   styleMap      .  select     . var vectorPoint = new OpenLayers.Layer.Vector("", { styleMap: new OpenLayers.StyleMap( { "default": stylePoint, "select": { pointRadius: 20} }) }); //     ,       ,         45  var vectorImage = new OpenLayers.Layer.Vector("", { styleMap: new OpenLayers.StyleMap( { "default": styleImage, "select": { rotation: 45} }) }); //    map.addLayer(vectorImage ); map.addLayer(vectorPoint );

परतें बनाई जाती हैं; हम ऐसे कार्य बनाते हैं जो परतों के साथ काम करेंगे।

 //    . : , , ,  , .  ,          . function addImg(lon,lat,title,ident, layr){ var ttt = new OpenLayers.LonLat(parseFloat(lon), parseFloat(lat)); ttt.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); // features-   .    : , , ,  for (var k = 0; k < layr.features.length; k++) { //   features  ,       if(layr.features[k].attributes.ImgId==ident) { // move -       layr.features[k].move(ttt); layr.features[k].attributes.label=title; return false; } } var point0 = new OpenLayers.Geometry.Point(parseFloat(lon), parseFloat(lat)); point0.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); //   Feature   OpenLayers.Feature.Vector layr.addFeatures(new OpenLayers.Feature.Vector(point0, { label: title, name: title, ImgId: ident })); } function addPoint(lon,lat,title,ident){ var ttt = new OpenLayers.LonLat(parseFloat(lon), parseFloat(lat)); ttt.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); for (var k = 0; k < map.layers[5].features.length; k++) { if(map.layers[5].features[k].attributes.PointId==ident) { map.layers[5].features[k].move(ttt); map.layers[5].features[k].attributes.label=title; return false; } } var point0 = new OpenLayers.Geometry.Point(parseFloat(lon), parseFloat(lat)); point0.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); map.layers[5].addFeatures(new OpenLayers.Feature.Vector(point0, { label: title, name: title, PointId: ident })); } </code>       : <code> addPoint(37,55.5,' 1','1',map.layers[4]); addPoint(37,55.1,' 2','2',map.layers[4]); addImg(37,55.6,' 1','2',map.layers[5]); addImg(37,55.9,' 2','2',map.layers[5]);

परिणाम:

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

 //  :     ,      function addPoly(data,title,ident,layr){ var featuress = Array(); var coords = data.split(';'); for (var i = 0; i < coords.length; i++) { var d = coords[i].split(' '); var ttt = new OpenLayers.LonLat(parseFloat(d[0]), parseFloat(d[1])); var point0 = new OpenLayers.Geometry.Point(ttt.lon, ttt.lat); point0.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); featuress.push(point0); } //   ,     var linearRing2 = new OpenLayers.Geometry.LinearRing(featuress); var polygonFeature2 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Polygon([linearRing2]), { label: title, PolyID: ident }); layr.addFeatures(polygonFeature2); }

बहुभुज ड्रा फ़ंक्शन को कॉल करने का उदाहरण:

 addPoly('37 55.9;37.5 55.4;37 55','','1',map.layers[5]);

OpenLayrs में संपादन OpenLayers.Control.ModifyFeature का उपयोग करके किया जाता है। आपको उस वर्ग के उदाहरण को बनाने की आवश्यकता है, जिसमें उस परत को दर्शाया गया है, जिसकी वस्तुओं को आप संशोधित करना चाहते हैं:

 var modef = new OpenLayers.Control.ModifyFeature(map.layers[5]) modef.clickout = false; modef.toggle = false; modef.standalone = true; map.addControls([ modef]); modef.activate(); //   modef.selectFeature(map.layers[5].features[2]); //   var centr = map.layers[5].features[2].geometry.getCentroid() //     map.setCenter(new OpenLayers.LonLat(centr.x, centr.y));

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

संपादन मोड से बाहर निकलना:

 modef.deactivate();

लाइन प्रदर्शन और संपादन
जैसा कि पहले ही उल्लेख किया गया है, एक बहुभुज एक रेखा से बनाया गया है, इसलिए AddPoly फ़ंक्शन में आपको एक पंक्ति बदलने की आवश्यकता है:

  layr.addFeatures(polygonFeature2);

पर

 layr.addFeatures(linearRing2 );

संपादन प्रक्रिया अलग नहीं है।
टूलटिप्स
टूलटिप को लागू करने के लिए, आपको एक इवेंट हैंडलर को मैप में जोड़ना होगा, जो कि क्लास का एक उदाहरण है: OpenLayers.Control.SelectFeature।

 var selectControl = new OpenLayers.Control.SelectFeature([map.layers[5]]); map.addControls([selectControl], { clickout: true, toggle: false, multiple: false, hover: true, toggleKey: "ctrlKey", multipleKey: "shiftKey" }); selectControl.activate();

उसके बाद, लेयर ऑब्जेक्ट्स पर क्लिक की प्रक्रिया होगी। अंक आकार में बढ़ जाएंगे, चित्र 45 डिग्री घूमते हैं। एक बिंदु चयन ईवेंट हैंडलर बनाएं:

 // on -    map.layers[5].events.on( { "featureselected": function (e) { var HTMLcontent; var point //     HTMLcontent = 'table style="width: 100%;" tr td    td tr table '; //getCentroid() -   ,    ,         point = new OpenLayers.LonLat(e.feature.geometry.getCentroid().x, e.feature.geometry.getCentroid().y); //OpenLayers.Popup.AnchoredBubble -  ,     OpenLayers.Popup var popup = new OpenLayers.Popup.AnchoredBubble("SDVegetationInfo", point, new OpenLayers.Size(100, 100), HTMLcontent, null, false); popup.opacity = 0.9; popup.autoSize = true; popup.setBackgroundColor("#bcd2bb"); //   map.addPopup(popup, true); } //   ,     , "featureunselected": function (e) { setTimeout('if(map.popups.length - 1>-1){map.removePopup(map.popups[map.popups.length - 1]);}', 1000); } });

यात्रा की गई दूरी को गिनते हुए, बहुभुज का क्षेत्रफल, बिंदु बहुभुज के अंतर्गत आता है
की दूरी तय करते हुए यात्रा की

 map.layers[4].features[2].feature.geometry.getLength()

लैंडफिल क्षेत्र

 map.layers[4].features[2].feature.geometry.getArea()

बहुभुज बिंदु

 map.layers[4].features[2].containsPoint(map.layers[4].features[0])

पिछले सभी कार्यों का परिणाम पृष्ठ पर देखा जा सकता है: लिंक

अंत में, मैं ध्यान देता हूं कि कई कंपनियों ने पहले से ही अपने ट्रैकर्स को ओपन लाइयर्स को सस्ता और आसान बना दिया है। OpenLayers प्रलेखन यहाँ पाया जा सकता है ।

OpenLayers या परिवहन निगरानी सेवा करते हैं

More articles: