यैंडेक्स पर पैनोरमा.केआरनो का उपयोग करते हुए

कार्य निर्धारित किया गया था: Yandex.Maps और लोकप्रिय KRPano पैनोरमा दर्शक के एकीकरण के साथ आने के लिए। सबसे पहले, निश्चित रूप से, हम एपीआई में चढ़ते हैं और ... हमें एक उत्तर मिलता है कि आप वाई। कार्ट के माध्यम से पैनोरमा नहीं बना सकते हैं।
इससे कोई फर्क नहीं पड़ता, क्योंकि होममोर पैनोरमा का उपयोग किया जाएगा, लेकिन मुख्य चीज जिसे करने की आवश्यकता है वह तथाकथित है एक रडार जो इंगित करेगा कि वर्तमान में पैनोरमा कहाँ दिख रहा है।

पैनोरामास वाई कार्ट के साथ रडार

तो, एक KRPano दौरा है, जिसमें से प्रत्येक पैनोरमा को कुछ मानक आइकन के साथ मानचित्र पर प्रदर्शित किया जाना चाहिए। जब आप क्लिक करते हैं, तो एक निश्चित पैनोरमा को लोड करना चाहिए, और आइकन को एक रडार छवि (मानचित्र पर सही रोटेशन के साथ) में भी बदलना चाहिए। एक पैनोरमा को देखते समय, रडार को भी अपनी धुरी के चारों ओर घूमना चाहिए क्योंकि देखने के कोण में परिवर्तन होता है।

सबसे पहले, जब onxmlcomplete घटना शुरू हो जाती है , तो हम कुछ जेएस फ़ंक्शन को कॉल करते हैं, उदाहरण के लिए, लोड किया गया , जो लोड किए गए पैनोरमा की आईडी में ले जाएगा:

<pano name="solar_tower_1" xmlurl="%SWFPATH%/scenes/solar_tower_1/scene.xml" pageurl="/solar_tower_1/" pagetitle="  #1" onxmlcomplete="trace(  #1 loaded); js(loaded(0))" /> 

यह कार्य क्या करेगा? कुछ भी जटिल नहीं है - बस मानचित्र पर अंक (स्थान चिह्न) का पुनर्निर्माण करें और पैनोरमा के देखने के कोण की जांच करने का कार्य शुरू करें (उदाहरण के लिए, 100 एमएस के अंतराल के साथ):

 function loaded(id) { activeId = id; //  ID  ,   addPmark(id); } function addPmark(id) { clearTimeout(degreeInterval); //        resetAll(); //       if (typeof inactiveMarks[id] != 'undefined') map.geoObjects.remove(inactiveMarks[id]); //    hotspot' map.geoObjects.remove(pMark); //     hotspot' //    -         pMark = new ymaps.Placemark(pmarks[id].coords, { iconContent: '<img src="map/icon_large.png" id="pMarkIcon">', }, { iconImageHref: 'map/pixel.png', iconImageSize: [93, 93], iconImageOffset: [-54, -35] }); map.geoObjects.add(pMark); degreeInterval = setInterval(updateDegree, 100); //     } function resetAll() { var size = pmarks.length; for (var i = 0; i < size; ++i) { if (typeof inactiveMarks[i] != 'undefined') map.geoObjects.remove(inactiveMarks[i]); inactiveMarks[i] = new ymaps.Placemark(pmarks[i].coords, { iconContent: '<img src="map/binocular.png" style=" background:url(\'map/blue-bg.png\');">' }, { iconImageHref: 'map/placemark-bg-blue.png', iconImageSize: [44, 55], iconImageOffset: [-17, -37], panoPath: pmarks[i].xml //      }); if (typeof pmarks[i] != 'undefined') { inactiveMarks[i].events.add('click', function(p) { //          kr.call('loadpano(' + p.originalEvent.target.options.get('panoPath') + ')'); }); } map.geoObjects.add(inactiveMarks[i]); } } 

हमने क्या किया: पैनोरमा लोड किया, पहले डॉट्स को डिफ़ॉल्ट रूप से बनाया, फिर आइकन को सक्रिय एक में बदल दिया, अपनी आईडी को बचाया, और हर 100 एमएस में एक बार हम देखने के कोण में बदलाव के लिए जांच करते हैं।

सबसे दिलचस्प बात रडार का रोटेशन है। यह निम्नानुसार होता है:

 function updateDegree() { var hlookat = kr.get('view.hlookat'); // check offset offset = pmarks[activeId].offset; //   ,              hlookat -= offset; //      rotate   $('#pMarkIcon').css({ '-moz-transform': 'rotate(' + hlookat + 'deg)', '-webkit-transform': 'rotate(' + hlookat + 'deg)', '-o-transform': 'rotate(' + hlookat + 'deg)', '-ms-transform': 'rotate(' + hlookat + 'deg)' }); } 

इस उदाहरण में अंक निर्देशांक, डिग्री में ऑफसेट और दृश्यों के लिए पथ के साथ एक सरल सरणी में संग्रहीत हैं:

 var pmarks = [ {coords: [107.60835728615834, 51.80498497161981], offset: 29.612430, iconContent: '1', xml: '%SWFPATH%/scenes/solar_tower_1/scene.xml'}, {coords: [107.60834053847577, 51.80625216324661], offset: 52.541204, iconContent: '2', xml: '%SWFPATH%/scenes/solar_tower_2/scene.xml'}, {coords: [107.60839418265618, 51.807256449274895], offset: 58.053150, iconContent: '3', xml: '%SWFPATH%/scenes/solar_tower_3/scene.xml'}, {coords: [107.60832980963896, 51.807974732832555], offset: -59.017464, iconContent: '4', xml: '%SWFPATH%/scenes/solar_tower_4/scene.xml'}, {coords: [107.60930374795694, 51.808262554869444], offset: 52.025996, iconContent: '5', xml: '%SWFPATH%/scenes/russian_dramatic_theater_1/scene.xml'} ]; 

कोड पूरा हो गया है।

खैर, यह सब कुछ ऐसा लगता है (दुर्भाग्य से, मैं डेमो के लिए लिंक नहीं दे सकता, इसलिए केवल स्क्रीनशॉट के साथ):

पैनोरमा 1:




पैनोरमा 2: