मार्करों या पत्रक

Question

में डॉट्स के बड़े डाटासेट मैं 10.000 के बारे में मार्करों या एक पत्रक के नक्शे पर डॉट्स प्रस्तुत करना चाहते हैं। मैंने इसे पहले से ही नियमित तरीके से किया है और मैंने पाया कि यह Google मानचित्र की तुलना में धीमी गति से है। मैं प्रदर्शन समस्याओं को प्राप्त किए बिना कई तत्वों को प्रस्तुत करने का एक तरीका ढूंढ रहा हूं।

वहाँ पत्रक के साथ ऐसा करने के लिए एक रास्ता है?

अद्यतन: मैं उज्ज्वल डॉट्स है कि घटनाओं को संभाल नहीं सकता के साथ प्लॉट करने के लिए नहीं करना चाहती। मैं वास्तव में विभिन्न रंगों और घटनाओं के साथ मार्कर पेंट करना चाहता हूं।

Answer 1

प्रदर्शन समस्या इस तथ्य के कारण है कि प्रत्येक मार्कर एक व्यक्तिगत डोम तत्व है। ब्राउज़र हजारों को प्रस्तुत करने में संघर्ष करते हैं।

आपके मामले में, एक आसान तरीके को बजाय Circle Markers का उपयोग करें और (जैसे मानचित्र का उपयोग preferCanvas विकल्प, या एक विशेष canvas renderer है कि आप अपने सर्किल मार्कर से प्रत्येक के लिए renderer विकल्प के रूप में पारित के साथ) उन्हें एक कैनवास पर प्रदान की गई है करने के लिए किया जाएगा। इस प्रकार Google मानचित्र डिफ़ॉल्ट रूप से काम करता है: इसके मार्कर वास्तव में कैनवास पर खींचे जाते हैं।

var map = L.map('map', { 
    preferCanvas: true 
}); 
var circleMarker = L.circleMarker(latLng, { 
    color: '#3388ff' 
}).addTo(map); 

या

var map = L.map('map'); 
var myRenderer = L.canvas({ padding: 0.5 }); 
var circleMarker = L.circleMarker(latLng, { 
    renderer: myRenderer, 
    color: '#3388ff' 
}).addTo(map); 

इस समाधान के साथ

, प्रत्येक सर्किल मार्कर अब व्यक्तिगत डोम तत्व है, लेकिन इसके बजाय पर एक एकल कैनवास है, जो बहुत आसान है पत्रक द्वारा तैयार की है ब्राउज़र के लिए संभाल लें।

इसके अलावा, पत्रक अभी भी माउस स्थिति और संबंधित घटनाओं ट्रैक करता है और, अपने सर्किल मार्करों पर इसी घटनाओं से चलाता है ताकि आप अभी भी इस तरह की घटनाओं (माउस क्लिक आदि) सुन सकते हैं।

100k अंकों के साथ डेमो: https://jsfiddle.net/sgu5dc0k/