अधिक क्लाइंट-साइड सुविधाओं का समर्थन करने वाले OpenLayers विकल्प [बंद]

Question

मैं एक प्रणाली के लिए विभिन्न आर्किटेक्चर पर विचार कर रहा हूं जो बिंदु सुविधाओं के लिए आदर्श रूप से क्लाइंट-साइड रेंडरिंग का उपयोग करेगा और प्लग-इन मुक्त होना चाहिए। मैं अपने लैपटॉप का परीक्षण करने के लिए इस प्रश्न के उत्तर में विकसित इस एप्लिकेशन का उपयोग कर रहा हूं (जो कि काफी सक्षम है - OpenLayers में विभिन्न बिंदुओं के साथ क्वाड-कोर 2.6 ghz सीपीयू, 4 जीबी मेमोरी, किसी अन्य लोड के तहत नहीं, फ़ायरफ़ॉक्स 8) यह 500 पर उल्लेखनीय रूप से पिछड़ रहा है और 1,000 से अधिक संघर्ष करना शुरू कर देता है। बेतरतीब ढंग से उत्पन्न सुविधाओं के लिए किसी भी घटना संचालकों नहीं है और सभी एक ही सहजीवन का उपयोग करते हैं।

मुझे १०,००० तक की सुविधाएँ दिखाई दे रही हैं, जिनमें १० तक अलग-अलग प्रतीक हैं, सभी क्लिक और माउस-ओवर हैंडलर के साथ, और कम सक्षम प्लेटफार्मों पर।

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

मेरे मुख्य प्रश्न (यदि आप बहुत दयालु होंगे) हैं:

1. क्या आपके द्वारा लिखित / उपयोग किए गए अन्य OpenLayers अनुप्रयोगों में प्रदर्शन का यादृच्छिक बिंदु उत्पन्न करने वाला अनुप्रयोग प्रतिनिधि है?
2. क्या कोई सिद्ध और मुफ्त वैकल्पिक वेब मैपिंग एपीआई है जो डब्ल्यूएमएस सेवाओं (जो मुझे उपयोग करने की आवश्यकता है) का समर्थन करता है और फ्लैश / सिल्वरलाइट / किसी अन्य प्लगइन्स का उपयोग किए बिना क्लाइंट-साइड सुविधाओं के साथ तेज है?
3. मुझे क्या जाँच करनी चाहिए इस पर कोई अन्य सुझाव?

सर्वर-साइड रेंडरिंग पर मुख्य रूप से भरोसा करना एक विकल्प है, लेकिन मैं और ग्राहक दोनों स्केलिंग-अप उपयोगकर्ता संख्या और UI की जवाबदेही पर चिंताओं के कारण इससे बचना चाहते हैं।

Comments

मेरे 5 साल पुराने दोहरे कोर पर, फ़ायरफ़ॉक्स 8 पर उस ऐप का उपयोग करते हुए 3 जीबी रैम डेस्कटॉप (1 जीबी लिनक्स डिस्ट्रो आईएसओ डाउनलोड करते समय), 1,000 अंक बहुत ही तुरंत आकर्षित करते हैं, कोई संघर्ष नहीं ... 10,000 के बारे में 1.5 सेकंड लगते हैं।

— user2856

@ ल्यूकपिनर है कि बस जल्दी से ड्राइंग * और पैनिंग / ज़ूमिंग सुचारू रूप से? डेटा को पुनः प्राप्त करना और सुविधाओं को चित्रित करना मेरे लिए भी ठीक है, लेकिन यह मानचित्र इंटरैक्शन है जो समस्या है।

— टॉमफंब

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

— unicoletti

हाँ, कोई समस्या नहीं / पैनिंग ज़ूमिंग। 1K अंक मेरी 1.6ghz एटम नेटबुक पर हालांकि थोड़ा धीमा कर देता है :)

— user2856

Answer 1

1 प्रश्न का उत्तर हां है । आप बहुत सामान्य कॉन्फ़िगरेशन के साथ OL का उपयोग कर रहे हैं। ऐसी चालें हैं जिनका उपयोग आप प्रदर्शन सुधारने के लिए कर सकते हैं, मैं बाद में करूँगा।

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

प्रश्न 3 का उत्तर: माप से शुरू करें:

मैंने एप्लिकेशन की एक स्थानीय प्रतिलिपि संपादित की, ताकि रेंडरर वेक्टर परत के लिए विकल्प सूची में स्पष्ट रूप से निर्दिष्ट हो। परीक्षणों के दौरान मैं कैनवस रेंडर को छोड़ दूंगा और फिर पृष्ठ को एक अलग प्रयोग के साथ फिर से लोड करूँगा:

var pts = new OpenLayers.Layer.Vector("Points", {renderers: ["Canvas", "SVG", "VML"]});

मैंने redraw फ़ंक्शन में एक टाइमर जोड़ा ताकि यह पता लगा सके कि ड्राइंग में कितना समय लगा :

function redraw() {
var start = (new Date).getTime();
[...]
var diff = (new Date).getTime() - start;
console.log("redraw completed in "+diff+"ms");

उसके बाद मैंने Chrome 17 और फ़ायरफ़ॉक्स 8.0.1 दोनों पर OSX SL पर 1000 और 5000 की विशेषताओं पर कई रन बनाए। मेरे आश्चर्य के लिए एसवीजी रेंडरर कैनवस रेंडरर की तुलना में औसत 20% तेज है! (नोट: विंडोज़ जेएस समय ओएसएक्स की तरह सटीक नहीं है ताकि परिणाम कम संगत हो सकें)।

यह और आपका कहना है कि

यह समस्या है कि नक्शा बातचीत है

, IMHO, हमें बताता है कि हॉटस्पॉट सुविधाओं की वेक्टर हैंडलिंग में है। मेरे एक ऐप पर काम करते समय, मैंने हाल ही में इस पर एक नज़र डाली और इसे उप-वर्ग करने का फैसला किया और फिर इसे उन सभी जटिल कोड से छुटकारा दिलाया जिनका साधारण बिंदुओं के लिए कोई उपयोग नहीं है। बेशक मैं बहुत जंगली गया और यहां तक ​​कि OpenLayers.Geometry.Point पर निर्भरता को हटा दिया और मेरा संस्करण अब x, y विशेषताओं के साथ सरल js ऑब्जेक्ट्स पर काम करता है।

आपके विकल्प लाभ / लागत के अवरोही क्रम में हैं:

पहला विकल्प निम्नलिखित की तरह वेक्टर परत के लिए एक रणनीति विकल्प को कॉन्फ़िगर करके दृश्यमान बिंदुओं को सर्वर-साइड फ़िल्टर करना है :

 strategies: [new OpenLayers.Strategy.Refresh({force:true}), new OpenLayers.Strategy.BBOX({ratio:2, resFactor: 3})],

इस तरह से जब आप ग्राहक की ओर खींची गई सुविधाओं की संख्या में ज़ूम करते हैं, तो वे सभी के बजाय उस सीमा तक सीमित हो जाएंगे।

दूसरे विकल्प के रूप में आप एक अनुकूलित वेक्टर / रेंडरर लिखने पर विचार कर सकते हैं । रिवाज का एक उदाहरण, नीचे छीन लिया गया, तेजी से कार्यान्वयन मेरे जीथब पृष्ठ पर यहां उपलब्ध है । सभी उपयोगों के लिए उपयुक्त नहीं है, लेकिन यह पर्याप्त होना चाहिए कि मैं जो सुझाव दे रहा हूं, उसका एक मोटा विचार दे।

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

Comments

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

— टमाटरब

मैंने एक उदाहरण वेक्टर / कैनवस रेरेरी का लिंक जोड़ा है जिसका उपयोग मैं अपनी एक परियोजना में करता हूं।

— unicoletti

वाह छीन लिया गया उदाहरण एक बड़ा अंतर बनाता है, यह वास्तव में प्रभावशाली है। मैं 1,000 विशेषताओं के साथ 10,000 से उड़ान भरने से संघर्ष कर रहा था

— टॉमफंब

मैंने OL कैनवस रेंडरर और पॉइंट्स के लिए एक ठोस भरण का उपयोग करने के लिए पहला उदाहरण (swingley.appspot.com) संशोधित किया, और ज़ूम और पैन प्रदर्शन वास्तव में आपके TagCanvas & TagVector के समान है। मैंने अपने संशोधनों में आपके द्वारा हटाए गए हिट-टेस्ट की कार्यक्षमता को भी फिर से लागू किया ताकि मैं तुलनात्मक प्रदर्शन का परीक्षण कर सकूं - टैग * दृष्टिकोण लगभग 20% तेजी से पहचानने में था कि कौन सी सुविधा हिट हुई (5000 में से)। कस्टम कक्षाओं को लिखने / अपडेट करने और इसी तरह के प्रदर्शन (मेरे परीक्षणों में) में महत्वपूर्ण प्रयास को देखते हुए, मुझे लगता है कि मैं देखूंगा कि वेनिला ओएल क्या कर सकता है

— टॉमफंब

ऐसा इसलिए है क्योंकि हिट-टेस्ट सभी विशेषताओं को एक अन्य कैनवास में बदल देता है, इस प्रकार वे प्रत्येक रिफ्रेश के साथ दो बार खींचे जाते हैं ।

— unicoletti

Answer 2

UTFGrid और टाइलमिल का उपयोग करके आप बहुत अच्छे प्रदर्शन के साथ असीमित अंक प्रदर्शित कर सकते हैं। N यादृच्छिक बिंदुओं को प्रदर्शित करना एक तरह का एक आकस्मिक उदाहरण है जो उस स्थिति में या जीआईएसक्लाउड या इसी तरह के किसी भी जादू के साथ काम नहीं करेगा, हालांकि - चूंकि वेक्टर प्रदर्शन हैक को आमतौर पर पूर्ण डेटासेट और कुछ पूर्व-प्रक्रिया के ज्ञान की आवश्यकता होती है: दोनों टाइलमिल और जीआईक्लाउड दोनों करते हैं। बहुत सारी टाइलिंग।