एंटरप्राइज़ सिस्टम के लिए OSM और OpenLayers का एक सा

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

पहला सवाल जो निश्चित रूप से उठेगा: क्यों?

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

मान लो मैंने तुम्हें मना लिया। कहाँ से शुरू करें?

सबसे पहले, कार्ड को ओपनलेयर्स में प्लग करें। सब कुछ सरल है और Google, यैंडेक्स, लीफलेट से बहुत अलग नहीं है।

//  ,       id='map' var map = new OpenLayers.Map('map'); //     OSM   "OSM mapnik" var layer = new OpenLayers.Layer.OSM('OSM mapnik'); //    map.addLayer(layer); //    ,  ,    . map.zoomToMaxExtent(); 

बड़ी कंपनियां अक्सर एक नक्शा सर्वर और कार्ड खरीदने और उन्हें वाट्स या टीएमएस के माध्यम से स्थानीय नेटवर्क पर वितरित करने का जोखिम उठा सकती हैं। WMS और TMS ऐसे मानक हैं जिनके द्वारा आप मानचित्र चित्रों के स्लाइस प्राप्त कर सकते हैं। मुख्य अंतर: wms द्वारा आप मनमानी पैमाने के नक्शे के एक मनमाने टुकड़े का अनुरोध कर सकते हैं, tms द्वारा - तराजू का एक सेट और नक्शे को वर्गों में विभाजित करते हैं, जो एक निश्चित तरीके से प्राप्त किया जा सकता है।

तदनुसार, हम wms के लिए एक परत बनाने के लिए लाइन बदलते हैं

 //    WMS var wms = new OpenLayers.Layer.WMS( //      "NASA Global Mosaic", // wms    "http://wms.jpl.nasa.gov/wms.cgi", //   wms: // ,  wms      ,       {layers: "modis,global_mosaic"} ); 

tms के लिए:

 //    TMS var layer = new OpenLayers.Layer.TMS( //      "My TMS Layer", //  TMS  "http://tilecache.osgeo.org/wms-c/Basic.py/", //   TMS: //    ,     (png/jpeg/gif)  {layername: "basic", type: "png"} ); 

इसके अलावा, कोई भी आपको नक्शे में सभी 3 परतों को जोड़ने और उनके बीच स्विच करने के लिए परेशान नहीं करता है, या दूसरों में से किसी एक परत को जोड़ सकता है।

प्रक्षेपण

अब रेक के बारे में कुछ शब्द जो आप आगे बढ़ने की संभावना रखते हैं।

मान लीजिए कि आप osm.org (OpenLayers.Layer.OSM) से एक मैप लेयर जोड़ते हैं, लेकिन आप चाहते हैं कि मैप मॉस्को क्षेत्र में खुल जाए, न कि पूरी दुनिया के लिए। हम मास्को और इसके बजाय अक्षांश और देशांतर को देखते हैं

 map.zoomToMaxExtent 

लिखने

 map.moveTo( //    new OpenLayers.LonLat(37.16, 55.604), // 9 ); 

और हम सागर में गिर जाते हैं। यह सभी समन्वय प्रणाली के बारे में है। मेपल परत के लिए, मूल समन्वय प्रणाली EPSG: 900913 है। इसमें संदर्भ बिंदु ग्रीनविच मेरिडियन और भूमध्य रेखा का चौराहा है, और इकाइयां मीटर हैं। तदनुसार, हम संदर्भ बिंदु से 37 मीटर पूर्व और 55 मीटर उत्तर में थे।

हर किसी के लिए परिचित देशांतर और अक्षांश का मतलब है कि वे EPSG: 4326 में निर्दिष्ट हैं। तदनुसार, निर्देशांक को पुनर्गणना करना आवश्यक है।

 map.moveTo( //   new OpenLayers.LonLat(37.16, 55.604).transform( //   EPSG:4326 new OpenLayers.Projection('EPSG:4326'), //    (EPSG:900913) map.getProjectionObject() ), 9 ); 

तथ्य यह है कि दुनिया में कई निर्देशांक प्रणालियां हैं, यह याद रखना बेहतर है कि ओपनर में कोई निर्देशांक सेट करते समय। यह एक सिरदर्द जोड़ता है, लेकिन आपको ग्राहक डेटा के साथ काम करने की अनुमति देता है यदि वे कुछ विदेशी का उपयोग करते हैं, उदाहरण के लिए, पुलकोवो 42।

ऐसा करने के लिए, proj4js ( trac.osgeo.org/proj4js/wiki/Download ) से कनेक्ट करें और लाइन जोड़ें

 Proj4js.defs['EPSG:28403'] = '+proj=tmerc +lat_0=0 +lon_0=39 +k=1 ' + '+x_0=500000 +y_0=0 +no_defs +a=6378140 +rf=298,257223563 +units=m ' + '+towgs84=28.000,-130.000,-95.000 +to_meter=1'; 

अब आप एक नए प्रक्षेपण को निर्दिष्ट कर सकते हैं जब निर्देशांक पुनर्गणना करते हैं।

यह पुलकोवो 42 बिल्कुल भी नहीं है, लेकिन मापदंडों को थोड़ा कम करने के साथ, आप अन्य समन्वय प्रणालियों में परतों के शीर्ष पर डेटा का एक सामान्य प्रदर्शन प्राप्त कर सकते हैं।

अब हम यह पता लगा चुके हैं कि परतों को कैसे जोड़ा और प्रदर्शित किया जाए, तो हम मार्कर, लाइन और इवेंट प्रोसेसिंग पर चलते हैं।

मार्कर

लीयर में 2 प्रकार हैं:
HTML (OpenLayers.Marker) और वेक्टर (OpenLayers.Geometry.Point)। बाद में मैं समझाऊंगा कि यहाँ मार्कर का क्या मतलब है और क्यों बिंदु है।

HTML मार्कर एक या अधिक divs बनाता है, जिसमें यह एक चित्र रखता है और निर्देशांक के अनुसार नक्शे के ऊपर स्थित होता है। यदि आपने कभी फायरबग या अन्य डीबगर के साथ देखा है कि Google मानचित्र पर एक मार्कर कैसे काम करता है, तो आप हर चीज से परिचित होंगे। पॉपअप कनेक्ट करने के लिए अपेक्षाकृत आसान है, वे उपयोग करना आसान है (क्योंकि वहाँ एक html वस्तु है) jquerry से, और फिर भी, लाइब्रेरी के निर्माता उन्हें उपयोग करने की अनुशंसा नहीं करते हैं। क्यों? वे कुछ भारी हैं: जब आपके पास 1 मार्कर होता है, तो सब कुछ ठीक होता है, जब एक हजार खराब होता है। वे डेटा भंडारण की सामान्य अवधारणा से बाहर खटखटाए गए हैं और ol में अपनाए गए हैं। खैर, व्यावहारिक कारणों से: जब मैंने लीयर के साथ काम करना शुरू किया, तो ऐसे मार्करों के लिए कोई ड्रैग कंट्रोल नहीं था। हालाँकि, वह अभी भी गया है।

हालाँकि, मानचित्र में मार्कर जोड़ने के लिए कुछ कोड:

 //    var markers = new OpenLayers.Layer.Markers( "Markers" ); //    map.addLayer(markers); //,    var lonLat = new OpenLayers.LonLat( 0, 0 ); //       0, 0 //    markers.addMarker(new OpenLayers.Marker(lonLat)); 

हां, मार्करों के साथ कई परतें हो सकती हैं। हां, आप परतों की दृश्यता को नियंत्रित कर सकते हैं और अपनी इच्छानुसार मार्करों के समूहों को छिपा सकते हैं।

अब इन वेक्टर मार्करों के बारे में और "डेटा संग्रहीत और प्रदर्शित करने की अवधारणा" के बारे में क्या है।
कुछ लोग नक्शे के साथ अलग-अलग रेखापुंज परतों को दिखाने की क्षमता से खुश हैं। उनके शीर्ष पर अपने अद्वितीय डेटा को प्रदर्शित करने में मुख्य आकर्षण। तो, मान लीजिए कि हम ऑप्टिकल केबल, कॉपर केबल और कुएं / पोल प्रदर्शित करना चाहते हैं, जिसके माध्यम से यह अच्छा नक्शा पार करता है। प्रत्येक ऑब्जेक्ट में ज्यामितीय जानकारी होगी (कैसे केबल वास्तव में गुजरती है / जहां पोल ​​या कुआं स्थित है) और एट्रिब्यूटिव (केबल प्रकार, केबल कोर की संख्या, सिग्नल क्षीणन, पोल की ऊंचाई ... सूची को अनन्तता तक फिर से बनाया जा सकता है)। वास्तव में इस विचार को सीधे तौर पर लागू किया जाता है:

ऑब्जेक्ट - "OpenLayers.Feature.Vector", इसकी विशेषताओं, ज्यामिति और वैकल्पिक रूप से, प्रदर्शन शैली के साथ संग्रहीत है।
बिंदु सुविधाओं के लिए:

 new OpenLayers.Feature.Vector( // -    x, y (x -longitude, y - latitude) new OpenLayers.Geometry.Point(x, y), //: ,  {'type':'pillon', 'height':100}, //,         . //        null ); 

शैलियों के बारे में कुछ शब्द।
शैलियों में, आप निर्दिष्ट कर सकते हैं कि ऑब्जेक्ट की विशेषताओं का उपयोग करके ज्यामिति कैसे प्रदर्शित होती है। प्रकार के आधार पर, विभिन्न आइकन का उपयोग किया जा सकता है, उदाहरण के लिए, हलकों के साथ कुओं को आकर्षित करें, और स्तंभों के साथ समर्थन करते हैं। आप भरण रंग, मोटाई और स्ट्रोक रंग को परिभाषित कर सकते हैं। विशेषताओं के आधार पर, आप ऑब्जेक्ट्स के लिए पाठ लेबल प्रदर्शित कर सकते हैं, आदि। आप किसी विशिष्ट ऑब्जेक्ट के लिए शैली सेट कर सकते हैं, उदाहरण के लिए, आप एक शैली को एक परत को निर्दिष्ट कर सकते हैं ताकि परत में सभी वस्तुओं को उसके अनुसार प्रदर्शित किया जाए।

और अभी तक मार्करों के लिए:

 //   . //Markers -      . //     {showInLayerSwitcher: false} //      . var markers = new OpenLayers.Layer.Vector('Markers'); //    map.addLayer(markers); //,     var marker = new OpenLayers.Feature.Vector( /// new OpenLayers.Geometry.Point(0, 0), //   {}, //,   { //  externalGraphic:'http://someware.com/my_favorite_marker_icon.png', //   graphicWidth:16, //   * graphicHeight:16, //   8   //   graphicXOffset:-8, //  16   graphicYOffset:-16, //   (     ) label:'   ', //     -  labelAlign: 'ct', //   5   labelYOffset: '5' } ); markers.addFeatures([marker]); 

* प्रिय व्याकरण-नाज़ी, यह एक बच्चों के गीत के लिए एक भ्रम था।

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

इसलिए, हमने एक मार्कर जोड़ा। अब इसे स्थानांतरित करने की क्षमता जोड़ें, इस पर क्लिक करें, और अन्य घटनाओं पर प्रतिक्रिया दें। दरअसल, घटनाओं का प्रसंस्करण बाकी सभी पुस्तकालयों से अलग होता है, जिनके साथ मुझे काम करने का मौका मिला था (एक चौकस पाठक जो बिना अनुच्छेदों के पूरे लेख को पढ़ता है, उसे पता चल जाएगा कि, सबसे पहले, यह Google है और यांडेक्स के साथ थोड़ा पत्ता है)।

ड्रैग जोड़ें:

 //     ,      . var drag = OpenLayers.Control.DragFeature(markers); //      ,     //OpenLayers.Layer.Vector.RootContainer    // //    map.addControl(drag); //  //(      ,  ...) drag.activate(); 

यदि मेरी मेमोरी मुझे विफल नहीं करती है, तो आपको अंततः मार्कर को मानचित्र के चारों ओर घूमते हुए मिलेगा।

या क्लिक करके हमारे मार्कर पॉपअप में जोड़ें:

 selectControl = new OpenLayers.Control.SelectFeature(markers, { //     onSelect: onFeatureSelect, //     onUnselect: onFeatureUnselect }); function onFeatureSelect(feature) { popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry.getBounds().getCenterLonLat(), null, "<div style='font-size:.8em'> Habr!</div>", null, true, onPopupClose ); feature.popup = popup; map.addPopup(popup); } function onFeatureUnselect(feature) { map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; } 

आप यहां एक उदाहरण देख सकते हैं: openlayers.org/dev/examples/select-feature-openpopup.html

जब आप की आवश्यकता होती है तो बड़ी समस्याएं शुरू होती हैं

• मार्करों को स्थानांतरित करने में सक्षम हो
• प्रदर्शन मंडराना (यानी onmousein और onmouseout संभाल)
• हैंडल क्लिक, ऑब्जेक्ट पर डबल क्लिक करें
• हैंडल पर क्लिक करें, ऑब्जेक्ट के बाहर डबल क्लिक करें

यह एक निराकृत आपदा है, लेकिन समाधान, शायद, एक अलग लेख के हकदार हैं।

जियोकोडिंग

Fuf, हमने साइट पर OSM जोड़ा और शीर्ष पर अपना डेटा प्रदर्शित करना सीखा। लेकिन फिर भी, Google एपीआई (यांडेक्स) का एक महत्वपूर्ण हिस्सा ओवरबोर्ड रहा। अर्थात्, जियोकोडिंग (निर्देशांक द्वारा पते और पते के निर्देशांक प्राप्त करना) और मार्गों को बिछाना।

मैं एक बार OSM में मानचित्रों पर रूट करने के बारे में बात करूंगा, अब जियोकोडिंग के बारे में कुछ शब्द। मैंने रिवर्स जियोकोडिंग (निर्देशांक द्वारा पता) नहीं किया, इसलिए अब मैं पते द्वारा निर्देशांक खोजने पर ध्यान केंद्रित करूंगा।

कई विकल्प हैं: नोमिनटिम या ओपनस्ट्रीटमैप.ru से तैयार खोज का उपयोग करें, अपनी बाइक लिखें। आपको अपने जियोकोडर की आवश्यकता क्यों हो सकती है, इसके बारे में कुछ शब्द।

1. उदाहरण के लिए, आप केवल मास्को में रुचि रखते हैं, क्रमशः, डेटा आयात करना आसान होगा, और शहर को निर्दिष्ट किए बिना खोज क्वेरी सरल होगी।
2. किसी कारण से, आप क्लाइंट मशीनों से या सर्वर से बाहरी को एक्सेस नहीं दे सकते।
3. आपको क्लाइंट पते के अपने डेटाबेस का उपयोग करके एक जियोकोडर की आवश्यकता है।

खैर, कोई जादू नहीं है: सबसे आसान विकल्प सोलर या स्फिंक्स का उपयोग करना है। वास्तव में, मैं सिर्फ दस्तावेजों को पूरे पते के साथ सहेजता हूं और सोल में ऑब्जेक्ट का निर्देशांक करता हूं।

पते की एक सूची प्राप्त करने के लिए, उदाहरण के लिए, आप उस क्षेत्र को ले सकते हैं जिसे आप shp प्रारूप में रुचि रखते हैं, इसे पोस्टगिस पर अपलोड करें, और फिर प्रपत्र के अनुरोध के साथ पते प्राप्त करें:

 select bldng.osm_id, bldng."A_STRT", bldng."A_SBRB", bldng."A_HSNMBR", settle."NAME", ST_AsText(ST_Centroid(bldng.geom)) from building-polygon bldng join settlement-polygon settle on ST_Within(bldng.geom, settle.geom) 

आज के लिए बस इतना ही। अगली बार मैं आपको ओपनरों में ईवेंट सिस्टम के बारे में अधिक बताने की कोशिश करूंगा।

संदर्भ

Openlayers प्रलेखन - dev.openlayers.org/docs/files/OpenLayers/Map-js.html

उदाहरणों के साथ एक सैंडबॉक्स भी है - Openlayers.org/dev/examples

Proj4js - trac.osgeo.org/proj4js

विभिन्न स्वरूपों में विभिन्न समन्वय प्रणालियों के विवरण के साथ एक साइट,
proj4 प्रारूप में शामिल हैं - spatialreference.org