हाल ही में, 2GIS ने अपनी मैपिंग JS API के संस्करण 1.0 की रिलीज़ से हम सभी को प्रसन्न किया। घरेलू उत्पादन के एपीआई कार्ड - एक दुर्लभ चीज; उदाहरण के लिए Mail.ru और रेम्बलर को सम्मानित नहीं किया गया है, हालांकि उन्होंने वादा किया था ( प्रमाण एक , प्रमाण दो )। आइए देखें कि नोवोसिबिर्स्क लोगों के साथ क्या हुआ।

परिचित हो जाओ

हम इसे स्थगित नहीं करेंगे, " त्वरित प्रारंभ " अनुभाग खोलें और प्रस्तावित कोड की प्रतिलिपि बनाएँ। यह काम करता है! सच है, शीर्षक krakozyabry से पता चलता है - यह, हालांकि, आश्चर्य की बात नहीं है, क्योंकि वहाँ कोई टैग नहीं है जो कि चार्ट को इंगित करता है। ठीक है, ठीक है, जीवन में छोटी चीजें। हम कोड को देखते हैं।

//   ,   : var myMap = new DG.Map('myMapId'); //   : myMap.setCenter(new DG.GeoPoint(82.927810142519,55.028936234826)); //   : myMap.setZoom(15); 

हम्म। कुछ अस्पष्ट रूप से यह याद दिलाता है। यह स्पष्ट नहीं है कि सेटकेंटर को तुरंत ज़ूम करने के लिए सेट क्यों नहीं किया जा सकता है। यदि आप "myMap.setZoom (15)" लाइन पर टिप्पणी करते हैं, तो मानचित्र 0 वें पैमाने को दिखाएगा। दिलचस्प है, क्या टाइलें तुरंत लोड करना शुरू कर देती हैं? हम स्निफर को देखते हैं - हां, निश्चित रूप से। ब्राउज़र टाइल्स के दो सेटों को पंप करता है, एक 0 वें पैमाने के लिए, दूसरा 15. किसी भी तरह गलत। आगे देखते हुए: आप अभी भी सेटकेंटर में ज़ूम सेट कर सकते हैं, लेकिन इस जानकारी पर दस्तावेज़ ढूंढना, अहम, आसान नहीं है।

ठीक है। हम आगे देखते हैं।

  //     : myMap.controls.add(new DG.Controls.Zoom()); //  : var myBalloon = new DG.Balloons.Common({ //     : geoPoint: new DG.GeoPoint(82.927810142519,55.028936234826), //   : contentHtml: '!<br>    :)' }); //  : var myMarker = new DG.Markers.Common({ //      (  ,  ,   ): geoPoint: new DG.GeoPoint(82.927810142519,55.028936234826), // ,       : clickCallback: function() { //      : if (! myMap.balloons.getDefaultGroup().contains(myBalloon)) { //    : myMap.balloons.add(myBalloon); } else { //       ,    : //  : myBalloon.show(); } } }); //  : myMap.markers.add(myMarker); }); 

पहली नज़र में, यह कुछ भी नहीं की तरह लगता है। कुछ विषमताएं हैं, htmlContent के बजाय कंटेंटहट एमएल (कॉलबैक के लिए संदर्भ सेट करने में असमर्थता)। लेकिन यहाँ मानचित्र पर गुब्बारे के स्थान का निर्धारण करने के लिए कोड ने मुझे झकझोर दिया:

 if (! myMap.balloons.getDefaultGroup().contains(myBalloon)) 

क्या यह किसी भी तरह से आसान है? उदाहरण के लिए IsOpen बालुन विधि है?

उसके अंदर एक नीयन है

ठीक है, चलो जल्दी छोड़ दो। देखते हैं अंदर क्या है।



एक 1.5 Kb प्रीलोडर उत्कृष्ट है। 200 Kb का एपीआई कोड सामान्य है। समय - so-so। 955 बाइट पर सीएसएस - wtf?

अधिकांश खतरनाक एपीआई के साथ स्क्रिप्ट हेडर हैं। कोई कैशिंग नहीं - अजीब। अंतिम परिवर्तन की तारीख 17 जनवरी है, जिसका अर्थ है कि स्क्रिप्ट संस्करण संख्या को बदलने के बिना सही है, जो कम से कम अच्छा नहीं है। आईपीए ऑडिट को ठीक करने का कोई अवसर नहीं है - बड़ी व्यावसायिक परियोजनाओं के लिए यह एक अतिरिक्त और बहुत असहज तनाव है। (वैसे, आज सुबह 2 जीआईएस-ओवेस्की एपीआई के बीटा टेस्टर flamp.ru पर कार्ड नहीं खुला था। सावधानी आवश्यक है, आखिरकार।)

एपीआई वैश्विक दायरे में तीन चर बनाता है - महानिदेशक (डोल्से और गबाना; डॉयचे ग्रैमोफॉन। नेमस्पेस के लिए सबसे अच्छा विकल्प नहीं), ओपन लाइयर्स (आश्चर्य!) और $।

हम कोड में देखते हैं। वास्तव में, हम अच्छे पुराने ओपन लॉयर्स से मिलते हैं।

फैसला अजीब है। सबसे पहले, OpenLayers, इसे हल्के ढंग से रखने के लिए, जीवन में पिछड़ गया: 2012 में, ट्रांसफॉर्म और संक्रमण के उपयोग के बिना काम करना पहले से ही कुछ बुरा है। दूसरे, बीएसडी-लाइसेंस कुछ प्रतिबंध लगाता है (http://trac.osgeo.org/openlayers/browser/license.txt), जो वास्तव में देखा जाना चाहिए।

प्रोटोटाइप से वैश्विक क्षेत्र में $ प्रकट होता है। कम से कम, यह गड़बड़ है, भले ही कस्टम jQuery को $ में जोड़ने पर यह हो जाता है (क्या तब प्रोटोटाइप उपस्थिति के निशान को हमेशा के लिए हटाने से रोकता है?)

वैसे, लेआउट किसी भी संस्करण के IE में विचित्र मोड में जाता है - यह एपीआई में क्यूएम का समर्थन करने के लिए अभी भी वांछनीय है।

टाइलें स्वयं छोटी हैं, प्रत्येक में 20 केबी। वे स्पष्ट रूप से डेस्कटॉप संस्करण से मिला रेंडर।



एक तरफ, सब्सट्रेट को वेब मैपिंग के लिए काफी आधुनिक बनाया जाता है - विवरणों के साथ अतिभारित नहीं और ग्रे टोन में ला कॉन्ट्रास्टिंग भी नहीं।

दूसरी ओर, फोंट और सबपिक्सल एंटी-अलियासिंग के साथ काम करना भयानक है। इसके अलावा, सर्वर के लिए पिंग बहुत बड़े हैं।

समन्वय क्रम दीर्घ-अव्यक्त है। मुझे आश्चर्य है कि कौन सा प्रक्षेपण Google की तरह गोलाकार है या यैंडेक्स की तरह अण्डाकार है? प्रलेखन एक जवाब नहीं देता है। हम शीर्ष पर एक यैंडेक्स हाइब्रिड लगाने की कोशिश करते हैं - टाइलों का विचलन। तो, फिर भी, प्रक्षेपण गोलाकार है। उपयोगकर्ता परतों के बारे में प्रलेखन में, इस बारे में एक शब्द नहीं है - फिर उपयोगकर्ता को टाइल कैसे कटनी चाहिए? यादृच्छिक पर?

ठीक है। तैयारी के साथ समाप्त करें, आगे बढ़ें।

डिलीवरी का दायरा

तो, हम कार्यात्मक से दिए गए हैं:

• कार्ड ही;
• टैग;
• ग्राफिक्स;
• नियंत्रण (या बल्कि, नियंत्रण - ज़ूम);
• परतों;
• AJAX अनुरोधों के लिए एपीआई;
• खोजें।

शुरू करने के लिए, एपीआई सिद्धांत रूप में, सामान्य है। केवल पूर्व-स्थापित नियंत्रणों की कमी को आश्चर्यचकित करना - क्या इसके लिए समय नहीं था?

हमने डॉक्यूमेंटेशन पढ़ा। हम प्वाइंट-जियोप्वाइंट के बारे में अनुभाग छोड़ते हैं, सब कुछ मानक है। केवल यहां डिजाइन पर काम करना संभव होगा, क्लास इंटरफेस, सब कुछ मर्ज के विवरण को पढ़ना पूरी तरह से असंभव है।



हम "मैप" अनुभाग में पास होते हैं और हम "परिचय" - "लाइब्रेरी डाउनलोड करना" - "लाइब्रेरी का संस्करण" भर में आते हैं। "मैप" अनुभाग में इसे देखना किसी भी तरह अप्रत्याशित है, है ना?

फिर हम DG.autoload फ़ंक्शन का उपयोग करते हैं, जिसमें हम कार्ड इनिशियलाइज़ेशन कोड रखते हैं:

[कोड]

इस पद्धति को "त्वरित प्रारंभ" अनुभाग में माना गया था। लेकिन DG.autoload फ़ंक्शन की कुछ सीमाएँ हैं: आंतरिक रूप से, यह window.onload इवेंट हैंडलर का उपयोग करता है। इसलिए, यदि window.onload हैंडलर पहले से ही पृष्ठ पर परिभाषित किया गया है, तो संघर्ष होगा (इन संघर्षों को प्राप्त करने के लिए, आप मौजूदा window.onload हैंडलर में कार्ड इनिशियलाइज़ेशन कोड सम्मिलित कर सकते हैं)।

WTF? क्यों फिर से परिभाषित करें window.onload? लिखने के लिए

  window.attachEvent && window.attachEvent('onload', callback) || window.addEventListener('load', callback, false); 

प्रलेखन के इस पैराग्राफ से अधिक तेज होगा। क्यों, इसके अलावा, इस नोट को क्विकस्टार्ट से हटा दिया गया - ताकि अधिक उपयोगकर्ताओं को इस रेक पर कदम रखा जाए? कुछ सोच-समझकर।

पर पढ़ें:

मानचित्र के केंद्र को सेट करने के लिए, सेट करेंटर मैप विधि को कॉल करें:

 //       point:myMap.setCenter(point); 

"बिंदु:" क्या है? गंदा।

कार्ड हटाएँ

myMap.destroy ()

उन सभी वस्तुओं को नष्ट कर देता है जो नक्शे में हैं। इस पद्धति को कॉल करने के बाद myMap ऑब्जेक्ट को नष्ट करने के लिए, इसे मानचित्र ऑब्जेक्ट के लिए अशक्त करने की अनुशंसा की जाती है:

 //  .   ,       ID: var myMap = new DG.Map("myMapId"); //  .  DOMElement : var container = document.getElementById("myMapId"); //   ,    DOM   var myMap = new DG.Map("container"); //   ,       ID var myMap = new DG.Map("myMapId"); 

कोड का एक अजीब टुकड़ा क्या है? उसे विनाश के साथ क्या करना है? दोस्तों, ठीक है, आपको अभी भी बेस क्लास के लिए प्रलेखन पढ़ने की आवश्यकता है।

ईवेंट हैंडलर जोड़ें

myMap.addEventListener (objectId, eventType, callback)

विकल्प:
ऑब्जेक्टआईआईडी स्ट्रिंग डोम तत्व की पहचानकर्ता जिसे हम हैंडलर संलग्न करते हैं।

गैप टेम्पलेट। किसी ईवेंट तत्व हैंडलर को मानचित्र में संलग्न करते समय DOM तत्व को निर्दिष्ट करना क्यों आवश्यक है? यदि आप map.getContainerId () के अलावा कोई आईडी निर्दिष्ट करते हैं, तो कुछ भी काम नहीं करता है। उपयोगकर्ता के खिलाफ किसी प्रकार की हिंसा।

नक्शे को उत्तर की ओर ले जाएं

myMap.moveN (MoveStep)

विकल्प:
MoveStep Number Yes, कितने पिक्सल नक्शे को उत्तर की ओर ले जाते हैं।

फिर से गैप पैटर्न। उत्तर में पिक्सेल - यह कैसे है? उत्तर के लिए चाप की डिग्री - मैं समझता हूं, पिक्सेल ऊपर - मैं समझता हूं, उत्तर में पिक्सेल - मुझे समझ में नहीं आता है। खैर, इस पद्धति के अस्तित्व का अर्थ मुझे अलग करता है।

न्यूनतम ज़ूम सेट करें

myMap.setMinZoom (मिनज़ूम)

विकल्प:
न्यूनतम संख्या हाँ सबसे छोटा संभव ज़ूम कारक। न्यूनतम अनुमत मूल्य 1 है।

न्यूनतम स्वीकार्य मूल्य 1 है, ज़ूम नियंत्रण भी सेट करने के लिए 1 से कम पैमाने नहीं देता है। लेकिन यदि आप नक्शे के आरंभ के दौरान पैमाना निर्धारित नहीं करते हैं, तो आप 0 पर होंगे। मुझे आश्चर्य है कि ऐसा कैसे। वैसे, 0 वें पैमाने पर, गेटबाउंड क्षेत्र [-268, 434] को देशांतर में मैप करता है - हमारे पास 180 डिग्री से अधिक समय तक कब तक रहने की संभावना है?

मानचित्र सीमाओं पर सीमाएं निर्धारित करें
myMap.setBoundsRestrictions (सीमाएँ, परिवर्तन)

isChangePosition? एक को अभी भी अंग्रेजी से दोस्ती करनी चाहिए।

घटनाओं

हम पहले से ही addEventListener की विषमताओं को पूरा कर चुके हैं। इसके अलावा - अधिक: addEventListener है, removeEventListener नहीं है। फिर उपयोगकर्ता को भ्रमित करने के लिए DOM नामों का उपयोग क्यों करें?

घटना के नाम इस तरह लिखे जाने चाहिए: "डीजीक्लिक" - जी छोटा। यह देखते हुए कि अन्य सभी स्थानों में, डीजी को हमेशा बड़े अक्षरों में लिखा जाता है - गुस्सा असंगत। उदाहरणों में, फिर से, कार्ड को बिना जूम के आरंभीकृत किया जाता है।

लगभग हर घटना का अपना एक प्रकार होता है। इतने सारे वर्ग होने का बोध मुझसे बच जाता है। उदाहरण के लिए, DG.Events.Map को पाने के लिए कहा जा सकता है (न्यूनतम | अधिकतम) ज़ूम - क्यों? इस कार्यक्षमता की आवश्यकता किसे है?

मार्कर

डिजाइनर

विकल्प:
options.geoPoint DG.GeoPoint उस बिंदु का भौगोलिक स्थान जहां मार्कर इंगित करता है।
options.icon DG.Icon मार्कर छवि। DG.Icon वर्ग को नीचे और अधिक विवरण में वर्णित किया गया है। यदि आइकन निर्दिष्ट नहीं है, तो डिफ़ॉल्ट चित्र का उपयोग किया जाता है।
options.clickCallback फंक्शन एक हैंडलर जिसे मार्कर क्लिक करने पर कहा जाता है। फ़ंक्शन कॉल संदर्भ: विंडो ऑब्जेक्ट।

क्लिक पर कॉलबैक, निश्चित रूप से, उपयोगी है। लेकिन फिर आपको वास्तव में आगे बढ़ने और कम से कम माउसेंटर / मूसलीव पर कॉलबैक करने की आवश्यकता है।

प्रत्येक मार्कर एक विशिष्ट समूह से संबंधित होना चाहिए। इससे समूह संचालन करना संभव हो जाता है। उदाहरण के लिए, हमारे पास दो प्रकार के मार्कर हैं: एक ऊंची इमारतों के लिए, दूसरे निजी घरों के लिए। पूर्व को एक समूह में और दूसरे को बाद में रखकर, हम स्पष्ट रूप से प्रत्येक मार्कर सेट में हेरफेर कर सकते हैं।

समूहीकरण मार्कर, ज़ाहिर है, सुविधाजनक है। लेकिन समूहों में समूहों को क्यों नहीं जोड़ा जा सकता है? यह और भी अधिक सुविधाजनक है, और एक डिफ़ॉल्ट समूह होने की आवश्यकता को समाप्त करता है।

मैं ध्यान देता हूं कि बलून, ग्राफिक्स और परतों के लिए समान समूह उपलब्ध हैं। उन सबका अलग-अलग वर्णन क्यों? सामान्य आधार वर्ग समूह और GroupManager दर्ज करें, प्रलेखन आधा हो जाएगा।

समूह में प्रत्येक मार्कर के लिए एक ऑपरेशन करें।
myGroup.forEach (कॉलबैक, संदर्भ)

अहम। किसी अन्य विधि में निष्पादन संदर्भ निर्दिष्ट नहीं किया जा सकता है, लेकिन यहां यह है। ब्राउज़र Array.forEach के समान? फिर, addEventListener के साथ शुरू होने वाले अन्य सभी तरीकों को एक ब्राउज़र हस्ताक्षर के लिए डालना होगा। वैसे, JS 1.6 में, forEach का संदर्भ पैरामीटर, इसके विपरीत वैकल्पिक है।

baluns

गुब्बारा बनाने के उदाहरण पर विचार करें:

 //       : var myBalloon = new DG.Balloons.Common({ // ,    : geoPoint: new DG.GeoPoint(82.927810142519,55.028936234826), //   : contentHtml: '!   :)' }); //    : myMap.balloons.add(myBalloon); 

कोड के बीच में खाली लाइन वह <br> है जिसे आप बचना भूल गए (जैसा कि क्विकार्टार्ट के विपरीत है)। फिर से, गन्दा - उदाहरण अब काम नहीं कर रहा है।

बालुन के मापदंडों को फिर से अंग्रेजी और सामान्य ज्ञान के मुक्त उपयोग से आश्चर्यचकित किया जाता है (इसे बंद किया गया है - चाहे एक क्रॉस दिखाने के लिए, सामग्री को आकार दें - चाहे आकार तय हो)।

यह दिलचस्प है कि गुब्बारे में कोई घटना नहीं है (या वर्णित नहीं हैं?)।

कोई संकेत नहीं। लेकिन उन्हें दुख नहीं होगा।

अपडेट

मैंने ज्यामिति के बारे में एक बुरा शब्द नहीं कहा है - एक अच्छा, ठोस ग्राफिक लाइब्रेरी जिसमें व्यापक अनुकूलन विकल्प (लिनकेप विकल्प - ब्रेक पॉइंट पर गोलाई लाइनों का विकल्प - मुझे लगता है कि कभी मिले नहीं)। जब तक घटनाओं का अभाव आश्चर्यजनक है। (हालांकि, यह आश्चर्यचकित क्यों है? समस्या ज्ञात है - यहां तक ​​कि एक पारदर्शी कैनवास / एसवीजी कंटेनर मानचित्र को अपने आप से कवर करता है। हल किया गया :)। बायाँ सर्वेक्षण जोड़ें।

नियंत्रण

पोजिशनिंग नियंत्रण उपयोगकर्ता के मस्तिष्क के खिलाफ हिंसा का एक और उदाहरण है।

 myMap.controls.add(new DG.Controls.Zoom(), null, new DG.ControlPosition(DG.ControlPosition.TOP_RIGHT, new DG.Point(20,10))) 

और यह सब 20.10 की ऑफसेट के साथ दाएं कोने में नियंत्रण छड़ी करने के लिए।
मैं समझता हूं कि बिग ब्रदर्स के पास एक ही बालिका है - लेकिन यह असफल निर्णयों की नकल करने का एक कारण नहीं है। इसके बजाय क्यों

 new DG.ControlPosition(DG.ControlPosition.TOP_RIGHT, new DG.Point(20,10))) 

मत लिखो

 'topright', [20, 10] 

?
या इस तरह भी:

 { top: 20, right: 10 } 

?

और नियंत्रण निर्माता के लिए इस सेटिंग को लेने के लिए एक ही समय में, ताकि controls.add में समूह नाम के बजाय अशक्त लिखना न हो?

नियंत्रणों में से, केवल ज़ूम उपलब्ध है - बाकी को करने का समय नहीं था? या लेआउट डिजाइनरों के साथ कोई समस्या है? जाहिरा तौर पर, अंतर्निहित तत्वों की कमी की भरपाई करने के लिए, उन्होंने कस्टम बनाने के लिए इंटरफ़ेस खोला - DG.Controls.Abstract।

वैसे, मैंने कार्ड में नए DG.Controls.Abstract () को जोड़ने की कोशिश की - यह सामान्य रूप से काम करता था, मैंने कोई अपवाद नहीं फेंका। तो यह सार नहीं है, लेकिन आधार है। एक अमूर्त वर्ग के लिए वर्गों का विस्तार करने की विरासत पद्धति को बांधना सही समाधान नहीं लगता है - यह एक पूरी तरह से सार्वभौमिक तरीका है, इसके उपयोग को एक विशिष्ट वर्ग तक सीमित क्यों करें।

इंटरफ़ेस स्वयं काफी समझदार दिखता है - जब तक कि सहायकों को getStates () / setState () पूरी तरह से बेकार न लगे।

समूहों

मानचित्र API आपको भौगोलिक मानचित्र परत के शीर्ष पर कस्टम परतों को ओवरले करने की अनुमति देता है। यह मानचित्र पर लगभग किसी भी ऑब्जेक्ट, मार्गों, क्षेत्रों को प्रदर्शित करना संभव बनाता है। उदाहरण के लिए, इंटरनेट प्रदाताओं द्वारा शहर के कवरेज क्षेत्रों को दिखाना आसान है, या डिलीवरी के समय और लागत के साथ किसी स्टोर या पिज़्ज़ेरिया के वितरण क्षेत्रों को रेखांकन करके प्रदर्शित करना आसान है। आप अपने कार्यालयों या शहर के दौरे के मार्ग का संकेत भी दे सकते हैं। संक्षेप में, संभावनाएँ केवल कल्पना द्वारा सीमित हैं।

... साथ ही प्रक्षेपण का अनुमान लगाने की आवश्यकता है, जैसा कि हमने पहले ही पता लगा लिया था।

options.countTileServers संख्या टाइल सर्वर के लिए उप-डोमेन की संख्या।

एक डोमेन से एक साथ डाउनलोड की गई फ़ाइलों की संख्या पर ब्राउज़रों की एक सीमा होती है। इस सीमा के आसपास पाने के लिए, आप कई उप-डोमेन से टाइलें डाउनलोड कर सकते हैं। इष्टतम मानचित्र लोड करने की गति के लिए, हम दृढ़ता से इस मान को 4 पर सेट करने की सलाह देते हैं।

पैरामीटर का उपयोग Options.tilePrefix पैरामीटर के साथ संयोजन में किया जाता है। डिफ़ॉल्ट रूप से, options.countTileServers शून्य है - टाइल्स को एक सर्वर से डाउनलोड किया जाता है।

options.tilePrefix String टाइल सर्वर के उपडोमेन के नाम का उपसर्ग।

उदाहरण के लिए, url पैरामीटर http: //example.com/$ {z} / $ {x} / $ {y} .png है। यदि आप my.tile के रूप में options.tilePrefix को परिभाषित करते हैं, तो हमें टाइल सर्वर के उप-डोमेन का URL फ़ॉर्म में मिलता है: http: //mytile1.example.com/, http: //mytile2.example.com/, http: //mytile3.example.com/ और इतने पर, options.countTileServers पैरामीटर के आधार पर। इसलिए, पैरामीटर का उपयोग Options.tilePrefix पैरामीटर के साथ संयोजन में किया जाता है।

उह। कैसा जादू? ऐसा क्यों न करें: http: // mytile $ {n} .example.com / $ {z} / $ {x} / $ {y} .png?

AJAX

AJAX एपीआई का अर्थ पूरी तरह से समझा नहीं गया है। किसी भी ढांचे के किसी भी अजाक्स-एपीआई अधिक सुविधाजनक और कार्यात्मक है, क्यों एक कार्टोग्राफिक एपीआई भी इस समाशोधन में चढ़ना चाहिए? वैसे, आपके पास एक टाइपो है - असफल टी ure।

सामान्य तौर पर

कुल मिलाकर, 2 जीआईएस एपीआई एक दोहरा प्रभाव छोड़ता है।

एक तरफ, हां, एक पूर्ण कार्यात्मक एपीआई, थोड़े समय में विकसित हुआ, जिसमें एक अच्छा कार्यात्मक घटक है (यह 90% जरूरतों को कवर करेगा), विस्तार के लिए छोड़ दिया।

दूसरे पर:

• कई इंटरफेस के विचार और असंगति की कमी;
• लुक'न'फेल - "नेकी", जिसे मैप और यूआई का सेक्सी डिज़ाइन कहा जाता है, की उपेक्षा;
• गलत दस्तावेज, उदाहरणों की एक छोटी संख्या;
• एपीआई के हिस्से के रूप में वास्तविक 2 जीआईएस डेटा के साथ काम करने के लिए उपकरणों की कमी।