मानचित्र पर फ़ोटो का चयन, कैशिंग और प्रतिपादन का कार्यान्वयन

इस लेख में, मैंने यह वर्णन करने का निर्णय लिया कि मानचित्र के एक विशिष्ट खंड पर तस्वीरों को चुनने और प्रदर्शित करने की कार्यक्षमता हमारी gfranq.com फोटो सेवा में कैसे लागू की गई थी।

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

इस लेख में निम्नलिखित मुद्दों को संबोधित किया गया है:

• डेटाबेस से फ़ोटो का संग्रहण और चयन और उन्हें सर्वर कैश (SQL, C #, ASP.NET) में रखना।
• क्लाइंट साइड पर आवश्यक फ़ोटो डाउनलोड करना और उन्हें क्लाइंट कैश (जावास्क्रिप्ट) में डालना।
• जिन तस्वीरों को हर बार छुपाने या प्रदर्शित करने की आवश्यकता होती है, उन्हें दोबारा देखने की खिड़की को बदल दिया जाता है।
• गोलाकार ज्यामिति के तत्व।

सामग्री

• सर्वर साइड
  
  • एंबेडेड जियोटाइप्स
  • नियमित नमूना
  • हैश के साथ एक अतिरिक्त तालिका का उपयोग करना
  • मल्टी थ्रेडेड फोटो कैशिंग
• ग्राहक भाग
  
  • मानचित्र आरंभीकरण
  • HTML5 के साथ पोजिशनिंग
  • सर्वर जानकारी का उपयोग कर स्थान
  • आंशिक रूप से दृश्यमान आयताकार क्षेत्रों की गणना
  • कैश क्षेत्रों के आकार की गणना
  • पुन: वितरण करते समय देरी का उपयोग करना
  • आंशिक रूप से दृश्यमान क्षेत्रों के निर्देशांक और हैश की गणना
  • प्रदर्शित तस्वीरों को फिर से तैयार करना
  • नक्शा दूरी
• निष्कर्ष

सर्वर साइड

डेटाबेस में नमूना लेने और भंडारण करने के निम्नलिखित तरीकों का आविष्कार किया गया था:

• बिल्ट-इन भौगोलिक प्रकार के SQL सर्वर।
• प्रतिबंधों के साथ नियमित रूप से नमूना लेना।
• एक अतिरिक्त तालिका का उपयोग करना।

आगे, इन विधियों पर विस्तार से चर्चा की जाएगी।

एंबेडेड जियोटाइप्स

जैसा कि आप जानते हैं, SQL Server 2008 ने भूगोल और ज्यामिति के प्रकारों के लिए समर्थन पेश किया, जो आपको भौगोलिक (क्षेत्र पर) और ज्यामितीय (विमान पर) जानकारी, जैसे बिंदु, रेखा, बहुभुज , आदि को निर्दिष्ट करने की अनुमति देते हैं । । निर्देशांक ( lngMin latMin ) और ( latMax lngMax ) के साथ एक आयत द्वारा संलग्न सभी फ़ोटो प्राप्त करने के लिए, आप निम्नलिखित क्वेरी का उपयोग कर सकते हैं:

 DECLARE @h geography; DECLARE @p geography; SET @rect = geography::STGeomFromText('POLYGON((lngMin latMin, lngMax latMin, lngMax latMax, lngMin latMax, lngMin latMin))', 4326); SELECT TOP @cound id, image75Path, geoTag.Lat as Lat, geoTag.Long as Lng, popularity, width, height FROM Photo WITH (INDEX(IX_Photo_geoTag)) WHERE @rect.STContains(geoTag) = 1 ORDER BY popularity DESC 

ध्यान दें कि बहुभुज को वामावर्त बायपास IX_Photo_geoTag और स्थानिक सूचकांक IX_Photo_geoTag , जो कि निर्देशांक ( बी-पेड़ों के सिद्धांत द्वारा स्थानिक सूचकांक काम करते हैं) द्वारा निर्मित है ।

हालाँकि, यह पता चला है कि Microsoft SQL Server 2008 में स्थानिक इंडेक्स काम नहीं करते हैं यदि भूगोल के साथ कॉलम NULL मानों को स्वीकार कर सकता है, और समग्र सूचकांक में टाइप भूगोल के साथ एक कॉलम नहीं हो सकता है, और स्टैकओवरफ़्लो पर यह प्रश्न उठाया गया था। इस वजह से, इस तरह के प्रश्नों (इंडेक्स के बिना) का प्रदर्शन बहुत कम हो जाता है।

इस समस्या के समाधान के रूप में, निम्नलिखित प्रस्तावित किया जा सकता है:

• चूंकि NULL मान का उपयोग नहीं किया जा सकता है, डिफ़ॉल्ट रूप से इस कॉलम में निर्देशांक (0 0) होते हैं जो अफ्रीका के पास अटलांटिक महासागर में एक बिंदु पर इंगित करते हैं (वहां से, देशांतर और अक्षांश मायने रखता है)। हालांकि, इस बिंदु पर, साथ ही पास में, वास्तविक बिंदु भी स्थित हो सकते हैं, जिसका अर्थ है कि नक्शे पर फ़ोटो को किसी भी तरह से अनदेखा करने की आवश्यकता नहीं है। यदि आप बिंदु (0 0) से (0 90) को बदलते हैं, तो सब कुछ बहुत बेहतर होगा, क्योंकि अक्षांश 90 वास्तव में मानचित्र के किनारे को इंगित करता है, जिसका अर्थ है कि इस अक्षांश को बाहर करने के लिए ग्रिड को छोड़कर (यानी 89 का निर्माण)।
• SQL सर्वर अपग्रेड करने के लिए ALTER DATABASE database_name SET COMPATIBILITY_LEVEL = 110 का उपयोग करके ALTER DATABASE database_name SET COMPATIBILITY_LEVEL = 110 । इस संस्करण में, NULL भूगोल प्रकारों को अनुक्रमित करने के साथ एक बग तय किया गया था, और विभिन्न झुकावों के बहुभुज के लिए समर्थन जोड़ा गया था (ऊपर अनुरोध में, बहुभुज को वामावर्त और दक्षिणावर्त दोनों सेट किया जा सकता है)।

भौगोलिक प्रकारों की व्यापक संभावनाओं के बावजूद (और वे हमें न केवल इस तरह के एक साधारण चयन का उत्पादन करने की अनुमति देते हैं, जैसा कि ऊपर दिए गए उदाहरण में बताया गया है, लेकिन दूरी, विभिन्न बहुभुज का उपयोग करने के लिए भी), वे हमारी परियोजना में उपयोग नहीं किए गए थे।

नियमित नमूना

निर्देशांक ( lngMin latMin ) और ( latMax lngMax ) द्वारा सीमित क्षेत्र से फ़ोटो का चयन निम्नलिखित क्वेरी का उपयोग करके लागू करना आसान है:

 SELECT TOP @Count id, url, ... FROM Photo WHERE latitude > @latMin AND longitude > @lngMin AND latitude < @latMax AND longitude < @lngMax ORDER BY popularity DESC 

यह ध्यान देने योग्य है कि इस मामले में, आप latitude और longitude क्षेत्रों (पहले विकल्प के विपरीत) के लिए कोई भी अनुक्रमणिका बना सकते हैं, क्योंकि वे सामान्य फ्लोट प्रकार हैं। हालांकि, इस नमूने में 4 तुलनाएं हैं।

हैश के साथ एक अतिरिक्त तालिका का उपयोग करना

कुछ क्षेत्रों से तस्वीरों का चयन करने की समस्या का सबसे इष्टतम समाधान एक अतिरिक्त Zooms तालिका बनाना है जो प्रत्येक ज़ूम के लिए क्षेत्रों की राख युक्त रेखाओं को Zooms करता है, जैसा कि नीचे दी गई आकृति में दिखाया गया है।

SQL क्वेरी निम्न फ़ॉर्म पर ले जाती है ( zn वर्तमान ज़ूम स्तर है):

 DECLARE @hash float; SET @hash = (@latMin + 90) + (@lngMin + 180) * 180 + (@latMax + 90) * 64800 + (@lngMax + 180) * 11664000; SELECT TOP @Count id, url, ... FROM Photo WHERE id = (SELECT id FROM Zooms WHERE zn = @hash) 

इस दृष्टिकोण का नुकसान यह है कि एक अतिरिक्त तालिका अतिरिक्त मेमोरी स्थान लेती है।

बाद के तरीके की योग्यता के बावजूद, सामान्य चयन के साथ दूसरा विकल्प सर्वर पर लागू किया गया था, क्योंकि इसमें काफी अच्छा प्रदर्शन भी दिखाया गया था।

मल्टी थ्रेडेड फोटो कैशिंग

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

 private static object SyncObject = new object(); ... List<Photo> photos = (List<Photo>)CachedAreas[hash]; if (photos == null) { //    ,           1 . lock (SyncObject) { photos = (List<Photo>)CachedAreas[hash]; if (photos == null) { photos = PhotoList.GetAllFromRect(latMin, lngMin, latMax, lngMax, count); //          2     . CachedAreas.Add(hash, photos, null, DateTime.Now.AddSeconds(120), Cache.NoSlidingExpiration, CacheItemPriority.High, null); } } } //   CachedAreas[hash] 

इस खंड में, डेटाबेस से फ़ोटो लाने और उन्हें कैश में सहेजने के लिए सर्वर कार्यक्षमता का वर्णन किया गया था। अगला भाग यह वर्णन करेगा कि ब्राउज़र में क्लाइंट की तरफ क्या होता है।

ग्राहक भाग

इस पर मानचित्र और फ़ोटो की कल्पना करने के लिए, Google मानचित्र API का उपयोग किया गया था। सबसे पहले, उपयोगकर्ता के नक्शे को उनके जियोलोकेशन के अनुरूप एक निश्चित उपयुक्त स्थान पर ले जाना चाहिए।

मानचित्र आरंभीकरण

मानचित्र को प्रारंभ करते समय स्थान को निर्धारित करने के दो तरीके हैं। पहला HTML5 की क्षमताओं का उपयोग करना है, और दूसरा सभी क्षेत्रों के लिए पूर्व-गणना निर्देशांक का उपयोग करना है।

HTML5 के साथ पोजिशनिंग

 function detectRegion() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success); } else { map.setZoom(defaultZoom); map.setCenter(defaultPoint); } } function success(position) { ... map.setZoom(defaultZoom); map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); } 

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

सर्वर जानकारी का उपयोग कर स्थान

मैप को स्रोत कोड के अगले भाग में आरंभीकृत किया गया है, जिसमें bounds सर्वर द्वारा लौटाए गए क्षेत्र (शहर, क्षेत्र या देश) के निर्देशांक हैं। अनुमानित ज़ूम स्तर की गणना getZoomFromBounds फ़ंक्शन ( getZoomFromBounds से उधार लिया गया) में दिए गए एल्गोरिदम के अनुसार की जाती है।

 var northEast = bounds.getNorthEast(); var southWest = bounds.getSouthWest(); var myOptions = { zoom: getZoomFromBounds(northEast, southWest), center: new google.maps.LatLng((northEast.lat() + southWest.lat()) / 2, (northEast.lng() + southWest.lng()) / 2), mapTypeId: google.maps.MapTypeId.ROADMAP, minZoom: 3, maxZoom: 19 } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

 function getZoomFromBounds(ne, sw) { var GLOBE_WIDTH = 256; // a constant in Google's map projection var west = sw.lng(); var east = ne.lng(); var angle = east - west; if (angle < 0) { angle += 360; } return Math.round(Math.log($('#map_canvas').width() * 360 / angle / GLOBE_WIDTH) / Math.LN2); } 

सर्वर पर, क्षेत्रों की गणना उपयोगकर्ता के आईपी के आधार पर की जाती है। प्रत्येक क्षेत्र के लिए सभी बॉर्डर निर्देशांक के एकत्रीकरण के लिए, Google जियोकोडिंग एपी का उपयोग किया गया था , हालांकि ऑफ़लाइन ऐसी जानकारी का उपयोग वैध नहीं है, इसके अलावा प्रति दिन 2500 अनुरोधों की सीमा भी है। प्रत्येक शहर, क्षेत्र और देश के लिए, हमारे डेटाबेस से एक अनुरोध उत्पन्न हुआ जो वांछित viewport और सीमाएं वापस कर देता है। वे केवल बड़े क्षेत्रों के लिए भिन्न होते हैं जो व्यूपोर्ट में पूरी तरह से फिट नहीं हो सकते। उसी समय, यदि उत्तर एक त्रुटि के साथ वापस किया गया था, तो अन्य अनुरोधों का उपयोग किया गया था जो कि क्षेत्र या अंग्रेजी की मूल भाषा में संयुक्त लेखन, भाग {सेटलमेंट}, आदि को हटा दिया गया था। http://maps.googleapis.com/maps/api/geocode/xml?address={},{/},{ }&sensor=false

उदाहरण के लिए, इस तरह के अनुरोध के लिए: http://maps.googleapis.com/maps/api/geocode/xml?address=Russia, इवानवा% 20 क्षेत्र, इवानोवो और सेंसर = झूठा

 ... <location> <lat>56.9951313</lat> <lng>40.9796047</lng> </location> <location_type>APPROXIMATE</location_type> <viewport> <southwest> <lat>56.9420231</lat> <lng>40.8765941</lng> </southwest> <northeast> <lat>57.0703221</lat> <lng>41.0876169</lng> </northeast> </viewport> <bounds> <southwest> <lat>56.9420231</lat> <lng>40.8765941</lng> </southwest> <northeast> <lat>57.0703221</lat> <lng>41.0876169</lng> </northeast> </bounds> ... 

आंशिक रूप से दृश्यमान आयताकार क्षेत्रों की गणना

कैश क्षेत्रों के आकार की गणना

इसलिए, जैसा कि पहले उल्लेख किया गया है, क्लाइंट और सर्वर दोनों पर सभी तस्वीरें आयताकार क्षेत्रों में कैश की जाती हैं, जिसका संदर्भ बिंदु एक मनमाना बिंदु है (हमारे मामले में, निर्देशांक (0, 0) के साथ बिंदु), और आकार की गणना वर्तमान स्तर के आधार पर की जाती है। (ज़ूम) निम्नानुसार है:

 //  ,    initMapSizeLat  initMapSizeLng var initDefaultDimX = 1000, var initDefaultDimY = 800; //     ,     . var currentDefaultDimX = 1080, var currentDefaultDimY = 500; var initMapSizeLat = 0.0003019; var initMapSizeLng = 0.00067055; //  () . var initRatio = 0.75; //               // .. initMapSizeLat  initMapSizeLng   . var initZoomSize = new google.maps.Size( initMapSizeLat / initDefaultDimX * currentDefaultDimX * initRatio, initMapSizeLng / initDefaultDimY * currentDefaultDimY * initRatio); //      ,     (     2,        1,     2 ,   -  4). function initZoomSizes() { zoomSizes = []; var coef = 1; for (var i = 21; i >= 0; i--) { zoomSizes[i] = new google.maps.Size(initZoomSize.width * coef, initZoomSize.height * coef); coef *= 2; } } 

इस प्रकार, प्रत्येक ज़ूम स्तर पर, क्षेत्र में आयताकार क्षेत्र का आकार वर्तमान देखने वाली खिड़की से 0.75^2=0.5625 है यदि इसकी चौड़ाई = 1080px और ऊंचाई ऊंचाई = 500px।

पुन: वितरण करते समय देरी का उपयोग करना

चूंकि मानचित्र पर सभी फ़ोटो को पुनः साझा करना बहुत तेज़ संचालन नहीं है (जैसा कि बाद में दिखाया जाएगा), यह उपयोगकर्ता इनपुट के बाद एक निश्चित देरी से करने का निर्णय लिया गया था:

 google.maps.event.addListener(map, 'bounds_changed', function () { if (boundsChangedInverval != undefined) clearInterval(boundsChangedInverval); var zoom = map.getZoom(); boundsChangedInverval = setTimeout(function () { boundsChanged(); }, prevZoom === zoom ? moveUpdateDelay : zoomUpdateDelay); prevZoom = zoom; }); 

आंशिक रूप से दृश्यमान क्षेत्रों के निर्देशांक और हैश की गणना

सभी आयतों के निर्देशांक और हैश की गणना जो निर्देशांक ( latMin , lngMin ) के साथ दृश्यमान विंडो को ओवरलैप करते हैं और पहले वर्णित एल्गोरिथ्म के अनुसार गणना किए गए आयाम निम्नानुसार हैं:

 var s = zoomSizes[zoom]; var beginLat = Math.floor((latMin - initPoint.x) / s.width) * s.width + initPoint.x; var beginLng = Math.floor((lngMin - initPoint.y) / s.height) * s.height + initPoint.y; var lat = beginLat; var lng = beginLng; if (lngMax <= beginLng) beginLng = beginLng - 360; while (lat <= maxlat) { lng = beginLng; while (lng <= maxLng) { //  lat  normalizeLng(lng)    . //    - ,        180     -180. loadIfNeeded(lat, normalizeLng(lng)); lng += s.height; } lat += s.width; } function normalizeLng(lng) { var rtn = lng % 360; if (rtn <= 0) rtn += 360; if (rtn > 180) rtn -= 360; return rtn; } 

फिर, प्रत्येक क्षेत्र के लिए, निम्नलिखित फ़ंक्शन को कहा जाता है, जो आवश्यक होने पर सर्वर को अनुरोध भेजता है। हैश गणना सूत्र प्रत्येक क्षेत्र के लिए एक अद्वितीय मान लौटाता है, क्योंकि संदर्भ बिंदु और आयाम निश्चित हैं।

 function loadIfNeeded(lat, lng) { var hash = calculateHash(lat, lng, zoom); if (!(hash in items)) { //           . } else { //    . } } function calculateHash(lat, lng, zoom) { // lat: [-90..90] // lng: [-180..180] return (lat + 90) + ((lng + 180) * 180) + (zoom * 64800); } 

प्रदर्शित तस्वीरों को फिर से तैयार करना

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

1. क्लाइंट कैश से सभी दृश्यमान फ़ोटो को visMarks सरणी में visMarks । तस्वीरों के साथ इन क्षेत्रों की गणना ऊपर वर्णित थी।
2. लोकप्रियता के आधार पर सॉर्टर्स प्राप्त किए।
3. मार्कर का उपयोग करके ओवरलैपिंग मार्करों को परिभाषित करें, smallMarkerSize , minPhotoDistRatio और pixelDistance फ़ंक्शन।
4. maxBigVisPhotosCount मार्करों की संख्या के साथ maxBigVisPhotosCount की संख्या और maxSmlVisPhotosCount की संख्या के साथ maxSmlVisPhotosCount ।
5. पुराने मार्कर को छुपाना और उन्हें smlMarksToHide और bigMarksToHide में smlMarksToHide और उन्हें bigMarksToHide का refreshMarkerArrays ।
6. नए मार्करों के लिए दृश्यता और zIndex डेप्थ इंडेक्स को अपडेट करना जो कि zIndex का उपयोग करके प्रदर्शित किया जाना चाहिए।
7. addPhotoToRibbon का उपयोग करके वर्तमान में शीर्ष रिबन पर दिखाई देने वाली फ़ोटो जोड़ना।

 function redraw() { isRedrawing = true; var visMarker; var visMarks = []; var visBigMarks2; var visSmlMarks2; var bigMarksToHide = []; var smlMarksToHide = []; var photo; var i, j; var bounds = map.getBounds(); var northEast = bounds.getNorthEast(); var southWest = bounds.getSouthWest(); var latMin = southWest.lat(); var lngMin = southWest.lng(); var latMax = northEast.lat(); var lngMax = northEast.lng(); var ratio = (latMax - latMin) / $("#map_canvas").height(); var zoom = map.getZoom(); visMarks = []; var k = 0; var s = zoomSizes[zoom]; var beginLat = Math.floor((latMin - initPoint.x) / s.width) * s.width + initPoint.x; var beginLng = Math.floor((lngMin - initPoint.y) / s.height) * s.height + initPoint.y; var lat = beginLat; var lng = beginLng; i = 0; if (lngMax <= beginLng) beginLng = beginLng - 360; //    . while (lat <= latMax) { lng = beginLng; while (lng <= lngMax) { var hash = calcHash(lat, normLng(lng), zoom); if (!(hash in curItems)) { } else { var item = curItems[hash]; for (photo in item.photos) { if (bounds.contains(item.photos[photo].latLng)) { visMarks[i] = item.photos[photo]; visMarks[i].overlapCount = 0; i++; } } } k++; lng += s.height; } lat += s.width; } //    . visMarks.sort(function (a, b) { if (b.priority !== a.priority) { return b.priority - a.priority; } else if (b.popularity !== a.popularity) { return b.popularity - a.popularity; } else { return b.id - a.id; } }); //     ,    . var curInd; var contains; var contains2; var dist; visBigMarks2 = []; visSmlMarks2 = []; for (i = 0; i < visMarks.length; i++) { contains = false; contains2 = false; visMarker = visMarks[i]; for (j = 0; j < visBigMarks2.length; j++) { dist = pixelDistance(visMarker.latLng, visBigMarks2[j].latLng, zoom); if (dist <= markerSize * minPhotoDistRatio) { contains = true; if (contains && contains2) break; } if (dist <= (markerSize + smallMarkerSize) / 2) { contains2 = true; if (contains && contains2) break; } } if (!contains) { if (visBigMarks2.length < maxBigVisPhotosCount) { smlMarksToHide[smlMarksToHide.length] = visMarker; visBigMarks2[visBigMarks2.length] = visMarker; } } else { bigMarksToHide[bigMarksToHide.length] = visMarker; if (!contains2 && visSmlMarks2.length < maxSmlVisPhotosCount) { visSmlMarks2[visSmlMarks2.length] = visMarker; } else { visBigMarks2[j].overlapCount++; } } } //  ,     smlMarksToHide  bigMarksToHide . refreshMarkerArrays(visibleSmallMarkers, visSmlMarks2, smlMarksToHide); refreshMarkerArrays(visibleBigMarkers, visBigMarks2, bigMarksToHide); //         zIndex. var curZInd = maxBigVisPhotosCount + 1; curZInd = updateMarkersVis(visBigMarks2, bigMarksToHide, true, curZInd); curZInd = 0; curZInd = updateMarkersVis(visSmlMarks2, smlMarksToHide, false, curZInd); visibleBigMarkers = visBigMarks2; visibleSmallMarkers = visSmlMarks2; //     . trPhotosOnMap.innerHTML = ''; for (var marker in visBigMarks2) { addPhotoToRibbon(visBigMarks2[marker]); } isRedrawing = false; } function refreshMarkerArrays(oldArr, newArr, toHide) { for (var j = 0; j < oldArr.length; j++) { contains = false; var visMarker = oldArr[j]; for (i = 0; i < newArr.length; i++) { if (newArr[i].id === visMarker.id) { contains = true; break; } } if (!contains) { toHide[toHide.length] = visMarker; } } } function updateMarkersVis(showArr, hideArr, big, curZInd) { var marker; var bounds = map.getBounds(); for (var i = 0; i < showArr.length; i++) { var photo = showArr[i]; if (big) { marker = photo.bigMarker; $('#divOvlpCount' + photo.id).html(photo.overlapCount); } else { marker = photo.smlMarker; } marker.setZIndex(++curZInd); if (marker.getMap() === null) { marker.setMap(map); } } for (i = 0; i < hideArr.length; i++) { marker = big ? hideArr[i].bigMarker : hideArr[i].smlMarker; if (marker.getMap() !== null) { marker.setMap(null); marker.setZIndex(0); if (!bounds.contains(hideArr[i].latLng)) hideArr[i].priority = 0; } } return curZInd; } function addPhotoToRibbon(marker) { var td = createColumn(marker); if (isLatLngValid(marker.latLng)) { trPhotosOnMap.appendChild(td); } else { trPhotosNotOnMap.appendChild(td); if (photoViewMode == 'user') { var img = $("#photo" + marker.id).children()[0]; $('#photo' + marker.id).draggable({ helper: 'clone', appendTo: $('#map_canvas'), stop: function (e) { var mapBoundingRect = document.getElementById("map_canvas").getBoundingClientRect(); var point = new google.maps.Point(e.pageX - mapBoundingRect.left, e.pageY - mapBoundingRect.top); var latLng = overlay.getProjection().fromContainerPixelToLatLng(point); marker.latLng = latLng; marker.priority = ++curPriority; placeMarker(marker); }, containment: 'parent', distance: 5 }); } } } 

नक्शा दूरी

पिक्सेल में मानचित्र पर दो बिंदुओं के बीच की दूरी प्राप्त करने के लिए , निम्नलिखित फ़ंक्शन का उपयोग करें:

 var Offset = 268435456; var Radius = 85445659.4471; function pixelDistance(latLng1, latLng2, zoom) { var x1 = lonToX(latLng1.lng()); var y1 = latToY(latLng1.lat()); var x2 = lonToX(latLng2.lng()); var y2 = latToY(latLng2.lat()); return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)) >> (21 - zoom); } function lonToX(lng) { return Math.round(Offset + Radius * lng * Math.PI / 180); } function latToY(lat) { return Math.round(Offset - Radius * Math.log((1 + Math.sin(lat * Math.PI / 180)) / (1 - Math.sin(lat * Math.PI / 180))) / 2); } 

यह कार्य विशाल स्टैकओवरफ्लो पर भी पाया गया था।

मार्करों को स्टाइल करने के लिए ताकि वे VKontakte जैसे फ़ोटो के साथ मंडलियों की तरह दिखें, RichMarker प्लगइन का उपयोग div तत्व के लिए एक मनमाना शैली के अतिरिक्त के साथ किया गया था।

निष्कर्ष

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