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

इस लेख में, मैंने यह वर्णन करने का निर्णय लिया कि मानचित्र पर किसी विशिष्ट स्थान पर फ़ोटो को चुनने और प्रदर्शित करने की कार्यक्षमता हमारी फोटो सेवा 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 का उपयोग किया जाता है (इसके अलावा, स्थानिक सूचकांक बी-पेड़ों का उपयोग करके बनाया गया है)।

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

निम्नलिखित दृष्टिकोण इस समस्या को हल कर सकते हैं:

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

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

सामान्य चयन

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

 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 बनाना है जो प्रत्येक ज़ूम के लिए क्षेत्रों की राख युक्त तारों को संग्रहीत करता है, जैसा कि नीचे दिखाया गया है।

निम्न 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) { // Use lock to avoid extracting from and adding to the cache more than once. lock (SyncObject) { photos = (List<Photo>)CachedAreas[hash]; if (photos == null) { photos = PhotoList.GetAllFromRect(latMin, lngMin, latMax, lngMax, count); // Adding information about photos to the cache with a storage time of 2 minutes with a high storage priority. CachedAreas.Add(hash, photos, null, DateTime.Now.AddSeconds(120), Cache.NoSlidingExpiration, CacheItemPriority.High, null); } } } // Further usage of CachedAreas[hash] 

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

ग्राहक पक्ष

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

मानचित्र को प्रारंभ करना

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

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)); } 

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

सर्वर से जानकारी का उपयोग करके जियोलोकेशन का निर्धारण करना

मानचित्र को नीचे स्रोत कोड के खंड में आरंभीकृत किया गया है, जहां 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 और bounds की आवश्यक सीमाओं को viewport bounds । वे केवल बड़े क्षेत्रों के लिए भिन्न होते हैं जो व्यूपोर्ट में पूरी तरह से फिट नहीं हो सकते। यदि सर्वर ने एक त्रुटि वापस की, तो अन्य प्रश्नों का उपयोग किया गया था जिसमें उस क्षेत्र या अंग्रेजी की मूल भाषा का उपयोग किया गया था, भाग {आबाद क्षेत्र} हटा दिया गया था, आदि। http://maps.googleapis.com/maps/api/geocode/xml?address={Country},{Region},{Populated area}&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) के साथ बिंदु), और आकार की गणना की जाती है वर्तमान ज़ूम स्तर पर निम्नानुसार है:

 // The initial window at which initMapSizeLat and initMapSizeLng were calculated var initDefaultDimX = 1000, var initDefaultDimY = 800; // The current default viewport which depends on the size of the areas. var currentDefaultDimX = 1080, var currentDefaultDimY = 500; var initMapSizeLat = 0.0003019; var initMapSizeLng = 0.00067055; // The coefficient of size reduction (increase). var initRatio = 0.75; // To calculate the size of the smallest caching area, the map was zoomed in to the maximum zoom level // Ie initMapSizeLat and initMapSizeLng were calculated empirically. var initZoomSize = new google.maps.Size( initMapSizeLat / initDefaultDimX * currentDefaultDimX * initRatio, initMapSizeLng / initDefaultDimY * currentDefaultDimY * initRatio); // All subsequent sizes of areas can be calculated based only on the smallest area (by multiplying each size by 2, because with increasing the zoom level by 1, the linear dimensions increase by 2 times, and the quadratic dimensions increase by 4 times). 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 and normalizeLng(lng) coordinates are the coordinates of the overlapping rectangles. // Longitude normalization is used because the right boundary can be greater than 180 or the left boundary can be less than -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)) { // Send a query to the database and put this cell in the client cache. } else { // Do nothing. } } function calculateHash(lat, lng, zoom) { // lat: [-90..90] // lng: [-180..180] return (lat + 90) + ((lng + 180) * 180) + (zoom * 64800); } 

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

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

1. क्लाइंट कैश से visMarks तक सभी दृश्यमान फ़ोटो को visMarks । तस्वीरों के साथ इन क्षेत्रों की गणना ऊपर वर्णित थी।
2. प्राप्त मार्करों को लोकप्रियता से क्रमबद्ध करना।
3. मार्कर का उपयोग करके अतिव्यापी मार्करों का पता markerSize , SmallMarkerSize , minPhotoDistRatio और pixelDistance ।
4. maxBigVisPhotosCount साथ बड़े मार्करों की सरणियाँ बनाना और maxBigVisPhotosCount साथ छोटे मार्कर maxSmlVisPhotosCount ।
5. पुराने मार्करों को परिभाषित करना, जिन्हें छिपाया जाना चाहिए और उन्हें smlMarksToHide करने के लिए smlMarksToHide और bigMarksToHide refreshMarkerArrays ।
6. नए मार्करों के लिए दृश्यता और ज़ूम इंडेक्स zIndex को अपडेट करना जो कि zIndex का उपयोग करके प्रदर्शित किया जाना चाहिए।
7. addPhotoToRibbon का उपयोग करके फ़ीड में addPhotoToRibbon गए फ़ोटो, जो वर्तमान समय में दिखाई 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; // Extracting all visible markers. 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; } // Sorting markers by popularity. 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; } }); // Finding overlapping markers and markers that exceed a certain specified number. 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++; } } } // Adding markers that should be hidden to smlMarksToHide and bigMarksToHide. refreshMarkerArrays(visibleSmallMarkers, visSmlMarks2, smlMarksToHide); refreshMarkerArrays(visibleBigMarkers, visBigMarks2, bigMarksToHide); // Hiding invisible markers and displaying visible markers when zIndex changes. var curZInd = maxBigVisPhotosCount + 1; curZInd = updateMarkersVis(visBigMarks2, bigMarksToHide, true, curZInd); curZInd = 0; curZInd = updateMarkersVis(visSmlMarks2, smlMarksToHide, false, curZInd); visibleBigMarkers = visBigMarks2; visibleSmallMarkers = visSmlMarks2; // Adding visible photos to the feed. 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) के साथ मंडलियों के रूप में देखने के लिए, प्लगइन रिचमार्कर का उपयोग मनमाने ढंग से जोड़ने के लिए div तत्व के साथ किया गया था।

निष्कर्ष

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