Google और OSM के साथ Yandex के नक्शे कैसे बनाएं?

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

और इसलिए मैंने एक और विकल्प तलाशने का फैसला किया।

विकल्प 1: टाइलें डाउनलोड करें

मैं खुद को अजनबी नहीं समझूंगा। मुझे यह विकल्प यैंडेक्स क्लब क्लब क्लब s.ya.ru/mapsapi/replies.xml?item_no=7125 में मिला । इस विकल्प के लिए सभी तर्कों को पहले से ही जोड़कर और OSM को जोड़कर, मुझे खुशी है कि सब कुछ तैयार था और पहले से ही कुछ और सोच रहा था, लेकिन फिर मुझे यह देखकर घबराहट हुई कि कार्ड सही तरीके से प्रदर्शित नहीं किए गए थे। निर्देशांक समान हैं, लेकिन कहीं-कहीं नक्शों का कुछ हिस्सा भरा हुआ नहीं है, ग्रे धब्बे दिखाई देते हैं, कभी ऊपर से, तो कभी नीचे से। समस्या यह थी कि न केवल अक्षांश और देशांतर को मिलाया गया था, बल्कि मौलिक रूप से विभिन्न समन्वय प्रणालियों का उपयोग किया गया था। जब Google निर्देशांक में परिवर्तित किया जाता है, तो एक निश्चित राशि से टाइलों को लंबवत रूप से स्थानांतरित करना आवश्यक था। यह सिर्फ इस मूल्य है और एक ग्रे क्षेत्र था।
उन्होंने इंटरनेट पर लिखा कि इस विकल्प का इलाज नहीं है। मैंने मानचित्र को लंबवत रूप से ऊपर और नीचे बढ़ाने की कोशिश की, लेकिन इसे छिपाएं। चूंकि मैंने पहले ही देखा था कि न केवल ग्रे धारियां शीर्ष पर दिखाई देती हैं, बल्कि मानचित्र पर भी, वर्गों की रेखा लोड नहीं हो सकती है। हालांकि, मैंने इस विकल्प को नहीं छोड़ा।
Google आपको केवल एपीआई के माध्यम से अपनी टाइल का उपयोग करने की अनुमति देता है, जिसका अर्थ है कि आपको किसी भी मामले में एक नक्शा बनाना होगा, लेकिन आप एक नक्शे के लेबल को दूसरे से कैसे मैप करते हैं?

विकल्प 2. टाइलों की नकल करना

योजना यह थी।
एक Google मानचित्र एक नकारात्मक सूचकांक के साथ, या ऊपर या बाएं नकारात्मक मान के साथ कहीं दूर, या कहीं और बनाया जाता है। उसके बाद, ईवेंट हैंडलर को यैंडेक्स के नक्शे पर लटका दिया जाता है, जो कि यैंडेक्स के नक्शे पर जाने पर, Google मैप को स्थानांतरित करता है। Google मानचित्र में एक मोशन हैंडलर है, जिसमें मैप्स के साथ div को यैंडेक्स मैप्स के div पर क्लास "YMaps-टाइल-कंटेनर" के साथ कॉपी किया जाता है जिसमें Yandex टाइल्स लगे होते हैं।

GEvent.addListener(gmap, "move" , function (overlay, latlng) {
var point = gmap.getCenter();
$layer = $( '#googlemap div img' ).parent().parent().parent();
$( '.GMaps-tile-container' ).html($layer.html()).width($layer.width()).height($layer.height());
$( '.GMaps-tile-container' ).css( 'left' ,$( '.YMaps-tile-container' ).css( 'left' ))
.css( 'top' ,$( '.YMaps-tile-container' ).css( 'top' ))
.css( 'width' ,$( '.YMaps-tile-container' ).css( 'width' ))
.css( 'height' ,$( '.YMaps-tile-container' ).css( 'height' ));
$( '.YMaps-tile-container' ).hide();
}, this );
GEvent.addListener(gmap, "tilesloaded" , function (overlay, latlng) {
var point = gmap.getCenter();
$layer = $( '#googlemap div img' ).parent().parent().parent();
$( '.GMaps-tile-container' ).html($layer.html()).width($layer.width()).height($layer.height());
$( '.GMaps-tile-container' ).css( 'left' ,$( '.YMaps-tile-container' ).css( 'left' ))
.css( 'top' ,$( '.YMaps-tile-container' ).css( 'top' ))
.css( 'width' ,$( '.YMaps-tile-container' ).css( 'width' ))
.css( 'height' ,$( '.YMaps-tile-container' ).css( 'height' ));

}, this );

* This source code was highlighted with Source Code Highlighter .

कार्ड के एक छोटे आकार के साथ, सब कुछ बहुत अच्छा काम करता है, लेकिन पूर्ण स्क्रीन में इसे खोलने के लायक है, क्योंकि पूर्ण पैराग्राफ यहां शुरू होता है।

विकल्प 3. मानचित्र को स्थानांतरित करें

अगला विकल्प जो दिमाग में आया, वह बस एक कार्ड को स्थानांतरित करना था जो दूसरे कार्ड के अंदर होगा।
Google मानचित्र स्वयं "YMaps-टाइल-कंटेनर" वर्ग के साथ एक div में बनाया गया है। यांडेक्स टाइल्स के साथ div छुपा रहा है, या बल्कि, यह छुपा नहीं रहा है, लेकिन पारदर्शिता 0 प्राप्त करता है, क्योंकि यह वह div है जो सभी कार्ड आंदोलनों को संसाधित करता है।
एक इवेंट हैंडलर को Yandex मैप में जोड़ें। जब यैंडेक्स कार्ड चलता है, तो यैंडेक्स मानचित्र का केंद्र Google मानचित्र के साथ सिंक्रनाइज़ हो जाएगा।

YMaps.Events.observe(map, map.Events.Move, function (oMap, offset) {
gmap.setCenter( new GLatLng(map.getCenter().getLat(), map.getCenter().getLng()), map.getZoom());
});
YMaps.Events.observe(map, map.Events.BoundsChange, function () {
gmap.setCenter( new GLatLng(map.getCenter().getLat(), map.getCenter().getLng()), map.getZoom());
});

* This source code was highlighted with Source Code Highlighter .

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

var none = new YMaps.TileDataSource( '' , false , false );
var tnone = function () { return new YMaps.Layer(none)};
YMaps.Layers.add( "none#layer" , tnone);
map.setType( new YMaps.MapType([ "none#layer" ], '' ,{minZoom:1, maxZoom:17}));

* This source code was highlighted with Source Code Highlighter .

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

विकल्प 3.1। MoveBy का उपयोग करना

यहाँ इस पृष्ठ पर api.yandex.ru/maps/jsapi/examples/synhromaps.html एक उदाहरण है कि दो यैंडेक्स कार्ड को एक-दूसरे के साथ कैसे सिंक्रनाइज़ किया जाए। केंद्रित करने के बजाय, एक निश्चित अंतराल द्वारा एक पारी का उपयोग किया जाता है (जाहिर है यह विकल्प लोड को कम करता है)। Google मानचित्र में बिल्कुल समान कार्य है, लेकिन Yandex मानचित्र शिफ्ट मान उपयुक्त नहीं हैं। कई प्रयोगों के बाद, मैंने इस उद्यम को छोड़ दिया।

विकल्प 4. मूवर्स को स्थानांतरित करें

यदि भारी भार के कारण टाइलों के आंदोलन के साथ विकल्प रोल नहीं करता है, तो वस्तुओं के आंदोलन के साथ विकल्प बेहतर होना चाहिए।
योजना विकल्प 3 के समान है, एक अपवाद के साथ: घटना हैंडलर को Google मानचित्र प्रोसेसर द्वारा नियंत्रित किया जाना चाहिए। ऐसा करने के लिए, घटनाओं को संभालने के लिए जिम्मेदार यैंडेक्स परतों को छिपाएं।
और यहाँ हम निराशा की प्रतीक्षा कर रहे हैं। अज्ञात कारणों से, इस संस्करण में Google नक्शे केवल माउस क्लिक की प्रक्रिया करते हैं, लेकिन आंदोलन और रिलीज़ नहीं। और परिणामों को खोजने के लिए मैंने कितने घंटे बिताए, गिनती नहीं की।
मानक यैंडेक्स मैप्स हैंडलर को हटाने की कोशिश में लंबे प्रयोगों के बाद, यह पता चला कि हमें इसे थोड़ा अलग ढंग से करना होगा और सब कुछ काम करेगा।
सबसे पहले आपको गूगल मैप्स को div YMaps-टाइल-कंटेनर से बहुत रूट पर स्थानांतरित करने की आवश्यकता है, अर्थात, उस div में जिसमें Yandex मैप स्वयं बनाया गया है। अब नक्शा एक ग्रे बैकग्राउंड के साथ कवर किया गया है। "YMaps- लेयर-कंटेनर" वर्ग के साथ दिवा की पृष्ठभूमि का मान पारदर्शी पर सेट करें। अब हम मानचित्र और ऑब्जेक्ट दोनों को देखते हैं, लेकिन Google को ईवेंट प्राप्त नहीं होते हैं। Z- इंडेक्स गूगल मैप्स को 1 पर सेट करें, और “YMaps-layer-container” को ऑटो में सेट करें। कोशिश कर रहा है ... हो गया!

और भेड़ियों को खिलाया जाता है और भेड़ें सुरक्षित हैं!

सब कुछ दो कार्यों में फिट होता है, जिनमें से कोड नीचे देखा जा सकता है।
आप OSM भी कनेक्ट कर सकते हैं।

// .
function unbindGoogleMap()
{
$( '#googlemap' ).hide();
$( '.YMaps-map-type-layer-container' ).show();
$( '.YMaps-layer YMaps-common-object-layer' ).show();
if (mapevents[0])
mapevents[0].cleanup();
}
/ Google
function bindGoogleMap(type)
{
var selector = '#' +$(map.getContainer()).attr( 'id' );
map.setType( new YMaps.MapType([ "none#layer" ], '' ,{minZoom:1, maxZoom:17}));
map.redraw();
if ($( '#googlemap' ).length==0)
{
var $div = $( '<div>' ).attr( 'id' , 'googlemap' ).width($(selector).width()).height($(selector).height()).css({zIndex:1});
$( '#routemap' ).prepend($div);
}
$( '#googlemap' ).show();
$( '.YMaps-layer-container' ).css({background: 'transparent' ,zIndex: 'auto' });
$( '.YMaps-map-type-layer-container' ).hide();
$( '.YMaps-layer YMaps-common-object-layer' ).hide();
if (!gmap)
{
gmap = new GMap2( document .getElementById( 'googlemap' ));
gmap.enableContinuousZoom();
gmap.enableScrollWheelZoom();
}
switch (type)
{
case 'gotsat' : case 4:
gmap.setMapType(G_SATELLITE_MAP);;
break ;
case 'gothyb' : case 5:
gmap.setMapType(G_HYBRID_MAP);;
break ;
case 'gotrel' : case 6:
gmap.setMapType(G_PHYSICAL_MAP);;
break ;
default : gmap.setMapType(G_NORMAL_MAP);
}
gmap.setCenter( new GLatLng(map.getCenter().getLat(), map.getCenter().getLng()), map.getZoom());
//
GEvent.addListener(gmap, "move" , function (overlay, latlng) {
map.setCenter( new YMaps.GeoPoint(gmap.getCenter().lng(), gmap.getCenter().lat()), gmap.getZoom());
}, this );
//-
GEvent.addListener(gmap, "update" , function (overlay, latlng) {
map.setCenter( new YMaps.GeoPoint(gmap.getCenter().lng(), gmap.getCenter().lat()), gmap.getZoom());
}, this );
//
mapevents[0] = YMaps.Events.observe(map, map.Events.BoundsChange, function () {
gmap.setCenter( new GLatLng(map.getCenter().getLat(), map.getCenter().getLng()), map.getZoom());
});
}

* This source code was highlighted with Source Code Highlighter .

वह सब है। एक लाइव उदाहरण bikecamp.ru/map पर देखा जा सकता है